body标签内设置的style样式未在Android WebView中生效如何解决

云上老周

2026-10-1

WebView加载HTML时body设置的字体不生效的原因及解决方案

问题原因

系统及WebView默认未内置Open Sans字体，CSS中直接指定该字体名称时，无法找到匹配的字体资源，会自动回退到系统默认无衬线字体。
当前使用loadData方法加载HTML内容，默认baseUrl为about:blank，无法正确加载本地assets目录下的自定义字体等资源。
HTML代码存在语法错误：<strong>标签未正确闭合（原代码写为<strong> Dumy /strong>，缺少左尖括号），可能导致CSS样式解析中断。
部分WebView默认配置会强制使用系统字体，覆盖网页中指定的字体样式。

解决方案

1. 引入自定义字体到项目

将Open Sans对应的字体文件（如OpenSans-Regular.ttf、OpenSans-Bold.ttf等）放入项目的app/src/main/assets目录下。

2. 修改HTML代码引入字体

在HTML的<head>标签中添加@font-face声明，关联本地字体资源，同时修正语法错误：

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style>
        @font-face {
            font-family: 'Open Sans';
            src: url('OpenSans-Regular.ttf');
            font-weight: normal;
            font-style: normal;
        }
        @font-face {
            font-family: 'Open Sans';
            src: url('OpenSans-Bold.ttf');
            font-weight: bold;
            font-style: normal;
        }
        body {
            font-family: 'Open Sans', sans-serif;
        }
    </style>
  </head> 
  <body style="font-family:Open Sans">    
    <p><strong> Dumy </strong></p>
    <p>
      Dumyp
    </p>
    <p>
      Dumyp2
    </p>
    <p>
      Dumyp3
    </p>
  </body>
</html>

3. 替换HTML加载方法

将原有的loadData方法替换为loadDataWithBaseURL，指定baseUrl为assets目录路径，确保本地字体资源可以正常加载：

// 替换原来的loadData代码
webView.loadDataWithBaseURL("file:///android_asset/", 
    productsResultObject.getProductDetail(), 
    "text/html; charset=utf-8", 
    "UTF-8", 
    null);

4. 调整WebView配置

添加WebSettings相关配置，避免默认配置覆盖字体样式：

WebSettings webSettings = webView.getSettings();
// 允许访问本地文件
webSettings.setAllowFileAccess(true);
// 禁止字体大小跟随系统缩放，避免样式错乱
webSettings.setTextZoom(100);

可选方案：无需修改原始HTML的注入方式

如果无法修改原始HTML代码，可以在WebView加载完成后通过JS注入样式实现字体修改：

webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        String injectStyle = "var style = document.createElement('style');" +
                "style.innerHTML = '@font-face { font-family: \"Open Sans\"; src: url(\"OpenSans-Regular.ttf\"); }' +" +
                "'body { font-family: \"Open Sans\" !important; }';" +
                "document.head.appendChild(style);";
        webView.evaluateJavascript(injectStyle, null);
    }
});

内容的提问来源于stack exchange，提问作者emrekocaman

body标签内设置的style样式未在Android WebView中生效如何解决

问题原因 #

解决方案 #

1. 引入自定义字体到项目 #

2. 修改HTML代码引入字体 #

3. 替换HTML加载方法 #

4. 调整WebView配置 #

可选方案：无需修改原始HTML的注入方式 #