堆栈内存溢出
  繁体   English   中英

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

[英]how to change WebView content font-family via javascript in android?

 原文  2019-11-10 19:55:16  2   3    android/ html/ css/ fonts

问题描述

我的 android 应用程序有一个设置屏幕，用户可以在其中 select 自定义字体并将其应用到任何地方，所有 fonts 都保存在 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%;
}
}

这是怎么做的？？

3 个解决方案

解决方案1
 1  2019-11-11 07:49:02

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

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

 @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 function ：

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

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

解决方案2
 1  2019-11-13 15:47:13

它起作用了......这就是我所做的

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

将此 class 添加到活动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);
            }
        }

    }

添加了名为 onCreate 的 loadWebView

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

    }

解决方案3
 0  2022-07-13 05:54:24

一个替代答案，就像一个sharme

CSS根据需要在(:root)下添加变量，根据需要添加(@font-face)，给标签赋值

:root {
--myFont: 'aaagolden';
--myColor: #A21719;
--myColorB: #FFE1E1;
}

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

h1, h2, h3, h4 {
font-family: var(--myFont);
color:  var(--myColor);
text-align: justify;
margin: 10px;
}

Javascript 接口创建 JSInterface class 包含从共享首选项获取字体和 colors 并将它们存储在字符串中的方法

public class JSInterface {

    private Context mContext;
    private SharedPreferences shared;

    public JSInterface(Context mContext){
        this.mContext = mContext;
    }

    @JavascriptInterface
    public void showToast (String msg){
        Toast.makeText(mContext, msg, Toast.LENGTH_LONG).show();
    }

    @JavascriptInterface
    public String getMyFont (){
        String myFont = "barada";
        shared = mContext.getSharedPreferences("UserData", Context.MODE_PRIVATE);
        int selectedFont = shared.getInt("myFont", 4);

        switch (selectedFont) {
            case 1:
                myFont ="aaagolden";
                break;
            case 2:
                myFont ="hacen";
                break;
            case 3:
                myFont ="aljazeera";
                break;
            case 4:
                myFont ="barada";
                break;
            case 5:
                myFont ="times";
                break;
            case 6:
                myFont ="calibri";
                break;
        }
        return myFont;
    }

    @JavascriptInterface
    public String getMyColor (){
        String myColor ="#1565C0";
        shared = mContext.getSharedPreferences("UserData", Context.MODE_PRIVATE);
        int selectedTheme = shared.getInt("myStyle", 30);

        switch (selectedTheme) {
            case 10:
                myColor ="008577";
                break;
            case 20:
                myColor ="C51A1C";
                break;
            case 30:
                myColor ="1565C0";
                break;
            case 40:
                myColor ="8B7969";
                break;
            case 50:
                myColor ="6f2699";
                break;
            case 60:
                myColor ="A73A13";
                break;
        }
        return myColor;
    }

    @JavascriptInterface
    public String getMyColorB (){
        String myColorB ="A4D9F8";
        shared = mContext.getSharedPreferences("UserData", Context.MODE_PRIVATE);
        int selectedTheme = shared.getInt("myStyle", 30);

        switch (selectedTheme) {
            case 10:
                myColorB ="8AF3E1";
                break;
            case 20:
                myColorB ="FFE1E1";
                break;
            case 30:
                myColorB ="A4D9F8";
                break;
            case 40:
                myColorB ="DFC2AF";
                break;
            case 50:
                myColorB ="C39DE2";
                break;
            case 60:
                myColorB ="FCC1AC";
                break;
        }
        return myColorB;
    }

}

Webview Activity addJavascriptInterface 使用 JSInterface class 到 webview 命名为 AndroidFunction

WebView mywebView = findViewById(R.id.webView);
WebSettings webSettings = mywebView.getSettings();
mywebView.setBackgroundColor(Color.TRANSPARENT);
webSettings.setJavaScriptEnabled(true);
Intent data = getIntent();
if(data.getExtras() != null){
    Utils.CustomToast(ViewActivity.this,"جاري التحميل ...");
    pageTitle = data.getStringExtra("pageTitle");
} else{
    pageTitle = "القرءان الكريم";
}
actionBar.setTitle(pageTitle);
// the name of the interface (AndroidFunction) will be used later so remember it
mywebView.addJavascriptInterface(new JSInterface(this),"AndroidFunction"); 
mywebView.loadUrl("file:///android_asset/" + pageTitle + ".html");

HTML在head部分：链接样式表，在styles>:root下添加定义的变量，添加javascript调用在JSInterface中创建的名为AndroidFunction的方法

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name = "viewport" content = "initial-scale=1.0, user-scalable=yes, width=device-width" />
    <link rel="stylesheet" href="file:///android_asset/stylesheet.css" />
    <style>
        :root {
            --myFont: 'aaagolden';
            --myColor: #A21719;
            --myColorB: #FFE1E1; 
            }
    </style>
    <script>
         var font = AndroidFunction.getMyFont();
         var color = AndroidFunction.getMyColor();
         var colorB = AndroidFunction.getMyColorB();

         var r = document.querySelector(':root');
          r.style.setProperty('--myFont', font);
          r.style.setProperty('--myColor', '#' + color);
          r.style.setProperty('--myColorB', '#' + colorB);
    </script>
</head>

我花了很多时间才弄清楚（互联网上没有足够的信息）......我希望你觉得这很有用

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何更改 react-native webview 的字体系列（font-family.ttf from assets） 单击按钮时更改字体系列 (Android) 如何更改工具栏标题的字体系列？ 通过Android上的Nativescript更改标签的字体系列属性 android 中的字体系列使用 Android Jsoup更改样式标签中的字体系列 NativeScript：字体家族未在Android上加载 如何使用javascript更改android webview的字体 使用android styles.xml进行更改字体系列的react-native选择器未更改 Android WebView安全字体系列？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM