如何在WebView中設置字體大小和文本顏色？

Question

我正在開發一個Android應用程序，其中使用了HTML文件作為幫助內容。 我已經使用WebView來顯示內容，並且一切都很好。 問題是用戶可以更改應用程序的主題和字體大小。 如何將這些屬性傳播到WebView的內容？ 究竟該如何在WebView中更改字體大小和文本顏色？ 有沒有簡單的方法可以做到這一點，或者我應該創建不同的HTMLfile或CSS？ 如何處理尺寸單位（dp，sp，...）？

感謝您在這種情況下的幫助。

Answer 1

loadUrl("javascript:(document.body.style.backgroundColor ='red');"); loadUrl("javascript:(document.body.style.fontSize ='20pt');");loadUrl("javascript:(document.body.style.color ='yellow');");

Answer 2

在您的android應用程序上，使用以下代碼加載用戶選擇的字體大小和顏色的網頁：

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebChromeClient(new InredisChromeClient(this));
myWebView.setWebViewClient(new InredisWebViewClient(this));
myWebView.clearCache(true);
myWebView.clearHistory();
myWebView.getSettings().setJavaScriptEnabled(true);
myWebView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
myWebView.loadUrl("http://demo.com/content.html?font-size=12&fontcolor=blue");

在content.html頁面上，啟用JavaScript並使用jQuery及其功能，如下所示：

function getCssValue(sCSS)
{
    var sPageURL = window.location.search.substring(1);
    var sValues = sPageURL.split('&');
    for (var i = 0; i < sValues.length; i++) 
   {
       var sPair = sValues[i].split('=');
       if (sPair[0] == sCSS) 
       {
           return sPair[1];
        }
   }
}        

$(document).ready(function(){
    // Set the Font Size from URL
    $('html').css('font-size', getCssValue('font-size'));
 });

Answer 3

最好使用CSS和Javascript進行主題活動。 但是，如果我們想將某些設置從Android動態傳遞到WebView，則可以實現，並且解決方案是使用JavascriptInterface 。 這是一種實現方法：

首先，我們定義一個類，該類將用作android應用程序和WebView進行JS交互的橋梁。

這里的WebInterface是Activity中的一個內部類，因此可以直接訪問myWebView，這是一個WebView實例變量。

        public class WebInterface {
        private Activity activity;

        public WebInterface(Activity activiy) {
            this.activity = activiy;
        }


        @JavascriptInterface
        public void changeTheme() {

            activity.runOnUiThread(new Runnable() {

                @Override
                public void run() {
                    // All of the theme settings could go here, the settings passed on by Android
                    myWebView.loadUrl("javascript:document.body.style.backgroundColor ='red';");
                    myWebView.loadUrl("javascript:document.body.style.fontSize ='20pt'");
                    myWebView.loadUrl("javascript:document.body.style.color ='yellow';");

                    //OR load your data as shown here http://stackoverflow.com/a/7736654/891092

                    htmlData = "<link rel=\"stylesheet\" type=\"text/css\" href=\"theme.css\" />" + htmlData;
                    // lets assume we have /assets/theme.css file
                    myWebView.loadDataWithBaseURL("file:///android_asset/", htmlData, "text/html", "UTF-8", null);
                }
            });
        }
    }

請注意，在UI Thread中運行代碼非常重要，否則它將無法正常工作。

這是Activity通過JavascriptInterface注冊WebView的方式：

myWebView.getSettings().setJavaScriptEnabled(true);
myWebView.addJavascriptInterface(jsInterface, "JSInterface");

在用戶正在查看的HTML文件中，可以通過通過橋在Android中調用代碼來制作按鈕或小部件來更改主題：

<input type="button" value="Say hello" onClick="doChangeTest()" />
<script type="text/javascript">
    function doChangeTest(){
        JSInterface.changeTheme(); // this calls the changeTheme in WebInterface
    }

</script>

Answer 4

首先，您需要定義一個webView ，然后使用下面的方法。

lightFont是您應存儲在資產文件夾中的字體。
color是您的文字顏色。
font size ：您可以更改字體大小。（例如20px或中號等）。
最后，您需要使用seconde方法在webView上顯示html

第一種方法：

 public static String getStyledFont(String html) {


        boolean addBodyStart = !html.toLowerCase().contains("<body>");
        boolean addBodyEnd = !html.toLowerCase().contains("</body");
        return "<style type=\"text/css\">" +
                "@font-face {font-family: CustomFont;" +
                "src: url(\"file:///android_asset/lightFont.ttf\")}" +
                "body {color: #787878;}"+
                "body {font-family: CustomFont;font-size: x-small;}</style>" +
                (addBodyStart ? "<body>" : "") + html +(addBodyEnd ? "</body>" : "");
    }

第二種方法：

String htmlText = getStyledFont(yourText);
        webView.loadDataWithBaseURL("file:///android_asset/",
                htmlText ,
                "text/html; charset=UTF-8", null, null);

如何在WebView中設置字體大小和文本顏色？

問題描述

4 個解決方案

解決方案1
1 2015-02-07 09:29:53

解決方案2
1 2015-02-07 10:15:41

解決方案3
0 已采納 2015-02-07 10:40:19

解決方案4
0 2017-10-22 11:09:37

如何在WebView中設置字體大小和文本顏色？

問題描述

4 個解決方案

解決方案1 1 2015-02-07 09:29:53

解決方案2 1 2015-02-07 10:15:41

解決方案3 0 已采納 2015-02-07 10:40:19

解決方案4 0 2017-10-22 11:09:37

解決方案1
1 2015-02-07 09:29:53

解決方案2
1 2015-02-07 10:15:41

解決方案3
0 已采納 2015-02-07 10:40:19

解決方案4
0 2017-10-22 11:09:37