堆棧內存溢出
  簡體   English   中英

如何通過 android 中的 javascript 更改 WebView 內容字體系列？

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

 原文  2019-11-10 19:55:16  5   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