如何在 android 中通过 javascript 更改 WebView 内容字体系列？

Question

我的 android 应用程序有一个设置屏幕，用户可以在其中选择自定义字体并将其应用到任何地方，所有字体都保存在 res/font 目录中......我的问题是，一旦选择了一种字体，它就会应用于整个项目，除了 html 文件，因为它们由 css 文件设置样式。

用户使用此屏幕选择字体，更改立即生效，如下所示：

我想将用户的字体应用到我的 html 文件中……这就是它们现在的样子 :(

我认为这可以通过更改 css 文件中的字体系列来实现。 这是我的css

@media only screen and (max-width: 600px) {
h2 {
  color: blue;
  font-size:20px;
  text-align: justify;
   margin: 10px;
} 
h3 {
  color:  blue;
  font-size:18px;
  text-align: justify;
   margin: 10px;
} 
h4 {
  color:  blue;
  font-size:16px;
  text-align: justify;
   margin: 10px;
} 
p {
    font-size:16px;
    color: black;
    text-align: justify;
     margin: 10px;
}
ul {
    font-size:16px;
    color: black;
    text-align: justify;
     margin: 10px;
}
ol {
    font-size:16px;
    color: black;
    text-align: justify;
     margin: 10px;
}
a:link {
     color:  blue;
     font-size:16px;
     text-decoration: underline;
     text-align: justify;
     margin: 10px;
 }
 a:visited {
     color:  blue;
     font-size:16px;
     text-decoration: underline;
     text-align: justify;
     margin: 10px;
 }
  a:active {
      color:  blue;
      font-size:16px;
      text-decoration: underline;
      text-align: justify;
      margin: 10px;
  }
img {
    display: block;
    margin-left: auto;
    margin-right: 0;
    width: 70%;
}
}
@media only screen and (min-width: 600px) {
h2 {
  color: blue;
  font-size:30px;
  text-align: justify;
   margin: 10px;
}
h3 {
  color:  blue;
  font-size:25px;
  text-align: justify;
   margin: 10px;
}
h4 {
  color:  blue;
  font-size:23px;
  text-align: justify;
   margin: 10px;
}
p {
    font-size:23px;
    color: black;
    text-align: justify;
     margin: 10px;
}
ul {
    font-size:23px;
    color: black;
    text-align: justify;
     margin: 10px;
}
ol {
    font-size:23px;
    color: black;
    text-align: justify;
     margin: 10px;
}
a:link {
     color:  blue;
     font-size:23px;
     text-decoration: underline;
     text-align: justify;
      margin: 10px;
 }
 a:visited {
     color:  blue;
     font-size:23px;
     text-decoration: underline;
     text-align: justify;
      margin: 10px;
 }
  a:active {
      color:  blue;
      font-size:23px;
      text-decoration: underline;
      text-align: justify;
       margin: 10px;
  }
img {
    display: block;
    margin-left: auto;
    margin-right: 0;
    width: 70%;
}
}

这是怎么做到的？？

Answer 1

您不能直接通过 android 更改 HTML 文件 font-family。 您的问题将由 JavaScript 解决。 遵循我的方法：

首先 :) 在您的 CSS 文件中使用 @font-face 将您的自定义字体定义为 bleow

@font-face {
    font-family: 'yourfontName1';
    src: url('android.resource://yourAppPackageName/font/yourfontName1.fontFromat');
    /* font format can be ttf , otf and ...*/
}
@font-face {
    font-family: 'yourfontName2';
    src: url('android.resource://yourAppPackageName/font/yourfontName2.fontFormat');
        /* font format can be ttf , otf and ...*/

}
/* other font definition */

第二:) 将 domStorageEnabled 表单 false（默认值）更改为 true ，为您的 WebView 启用 JavaScript 并 禁用 缓存

mWebview.getSetting().setDomStorageEnabled(true);
mWebview.getSettings().setJavaScriptEnabled (true);
mWebview.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);

第三 :)

在您的 onItemSelectedListener 中通过您的 WebView 运行 JavaScript 函数 或任何您想要的：

String script= "javascript:(function(){  " +
                        "var cols = document.getElementsByTagName('*');" +
                        "for(i = 0; i < cols.length; i++) {" +
                        "cols[i].style[\"font-family\"]=\""+yourSelectedFontName+"\";" +
                        "}})();";

mWebview.evaluateJavascript(script,null);

这对我有用，我希望它也对你有用:)

Answer 2

成功了……这就是我所做的

添加到 CSS

@font-face {
    font-family: aljazeera;
     src: url("file:///android_res/font/aljazeera.ttf")
}

@font-face {
    font-family: barada;
    src: url('file:///android_res/font//barada.ttf');
}

@font-face {
    font-family: hacen;
    src: url('file:///android_res/font//hacen.ttf');
}

body {
  font-family: aljazeera;
}

将此类添加到活动中字体样式基于用户偏好

public class JavaScriptWebViewClient extends WebViewClient    {
        @Override
        public void onPageFinished(WebView view, String url) {

            shared = getSharedPreferences("UserData", Context.MODE_PRIVATE);
            int selectedFont = shared.getInt("myFont", 4);
            String FontStyle = "sans-serif";


            switch (selectedFont){
                case 1:
                    FontStyle ="sans-serif";
                    break;
                case 2:
                    FontStyle ="hacen";
                    break;
                case 3:
                    FontStyle ="aljazeera";
                    break;
                case 4:
                    FontStyle ="barada";
                    break;
            }

            String script= "javascript:(function(){  " +
                    "var cols = document.getElementsByTagName('*');" +
                    "for(i = 0; i < cols.length; i++) {" +
                    "cols[i].style[\"font-family\"]=\""+FontStyle+"\";" +
                    "}})();";

            if (Build.VERSION.SDK_INT >= 19) {
                view.evaluateJavascript(script,null);
            }else {
                view.loadUrl(script);
            }
        }

    }

添加了 loadWebView，它被称为 onCreate

 private void loadWebView() {
        Intent data = getIntent();
        String pageTitle = data.getStringExtra("pageTitle");


        title.setText(pageTitle);

        mywebView.setWebViewClient(new JavaScriptWebViewClient());
        mywebView.loadUrl("file:///android_asset/" + pageTitle + ".html");

    }