android - 如何在 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 文件字体系列。 您的问题将由 JavaScript 解决。 遵循我的方法:

首先 :) 使用@font-face 在您的 CSS 文件中将您的自定义字体定义为 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);

第三个:)

通过您的 WebView 在您的 onItemSelectedListener 或您想要的任何东西中运行一个 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);

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