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

我的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%;
}
}

---

如何做到这一点？？？

您不能通过android直接更改HTML文件字体系列。 您的问题将通过JavaScript解决。 按照我的方法：

首先：）使用@font-face将CSS文件中的自定义字体定义为bleow

@font-face{
字体系列：“yourfontName1”；
src:url（'android。resource://yourAppPackageName/font/yourfontName1.fontFromat');
/*字体格式可以是ttf、otf和*/
}
@字体{
字体系列：“yourfontName2”；
src:url（'android。resource://yourAppPackageName/font/yourfontName2.fontFormat');
/*字体格式可以是ttf、otf和*/
}
/*其他字体定义*/

有效。。。这就是我所做的

添加到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;
}

将此类添加到活动中FontStyle基于用户偏好

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);
            }
        }

    }

---

您是否使用webView？感谢Alireza Bideli的回复，我已经尝试过了，但没有效果。在实现Alireza Bideli解决方案后，我已经更新了我的问题。loadWebView（）；你的应用程序包名是“www.alitkaan3.com”吗？我没有选择要加载的页面，这就是为什么它是空的。。。我已尝试添加mywebView.loadUrl（“file:///android_asset/“+pageTitle+”.html”）；在mywebView.evaluateJavascript之后（脚本，null）；页面加载了原始的fontI测试我的答案。我的解决方案仅在以前加载过webview并且您希望使用类似按钮onClick的事件更改webview字体时才起作用

 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");

    }