如何在WebView中设置字体大小和文本颜色?

时间:2015-02-07 09:25:24

标签: android html webview

我正在开发一个Android应用程序,其中我使用了HTML文件来获取帮助内容。我使用WebView来显示内容,每件事都很好。 问题是用户可以更改应用程序的主题和字体大小。如何将这些属性传播到WebView的内容?究竟如何在WebView中更改字体大小和文本颜色?有没有一种简单的方法可以做到这一点,或者我应该创建不同的HTML文件或CSS?如何处理大小单位(dp,sp,...)?

感谢您对这种情况的帮助。

4 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

在您的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'));
 });

答案 2 :(得分:0)

最好使用CSS和Javascript进行主题活动。但是,如果我们想要动态地将一些设置从Android传递到WebView,则可以使用 JavascriptInterface 。这是一种方法:

首先,我们定义一个类,它将用作Android应用程序和WebView for 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线程中运行代码非常重要,否则无法使用。

以下是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>

答案 3 :(得分:0)

首先,您需要定义webView,然后使用以下方法。

  1. lightFont是您应存储在资产文件夹中的字体。

  2. color是您的文字颜色。

  3. font size:您可以更改字体大小。(例如20px或中等等)。

  4. 最后您需要使用seconde方法在html上显示webView

  5. 第一种方法:

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