Android(安卓)WebView通过代码修改网页的字体大小

今天遇到一个问题：需要在Android 客户端控制webview网页中字体的大小，webview加载的内容是从服务端获取的html片段，我们知道webview，可以直接加载html片段

（mWebView.loadDataWithBaseURL(null, news.getContent(), "text/html", "utf-8", null);） /**         * mWebView.loadData(news.getContent(), "text/html", "utf-8");//不能用这种，会有乱码         */

然后我们需要修改字体大小。可以根据

/**  * webview  */ WebView wv; /**  * Manages settings state for a WebView  */ WebSettings settings; /**  * 用来控制字体大小  */ int fontSize = 1;wv = (WebView) findViewById(R.id.webViewContent);  settings = wv.getSettings();  settings.setSupportZoom(true);if (settings.getTextSize() == WebSettings.TextSize.SMALLEST) {   fontSize = 1;  } else if (settings.getTextSize() == WebSettings.TextSize.SMALLER) {   fontSize = 2;  } else if (settings.getTextSize() == WebSettings.TextSize.NORMAL) {   fontSize = 3;  } else if (settings.getTextSize() == WebSettings.TextSize.LARGER) {   fontSize = 4;  } else if (settings.getTextSize() == WebSettings.TextSize.LARGEST) {   fontSize = 5;  }/**     * 设置底部按钮的事件     */    private void setImageViewClick() {        /**         * 缩小按钮         */        imgViewSX.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                fontSize--;                if (fontSize < 0) {                    fontSize = 1;                }                switch (fontSize) {                case 1:                    settings.setTextSize(WebSettings.TextSize.SMALLEST);                    break;                case 2:                    settings.setTextSize(WebSettings.TextSize.SMALLER);                    break;                case 3:                    settings.setTextSize(WebSettings.TextSize.NORMAL);                    break;                case 4:                    settings.setTextSize(WebSettings.TextSize.LARGER);                    break;                case 5:                    settings.setTextSize(WebSettings.TextSize.LARGEST);                    break;                }            }        });        /**         * 放大按钮         */        imgViewFD.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                fontSize++;                if (fontSize > 5) {                    fontSize = 5;                }                switch (fontSize) {                case 1:                    settings.setTextSize(WebSettings.TextSize.SMALLEST);                    break;                case 2:                    settings.setTextSize(WebSettings.TextSize.SMALLER);                    break;                case 3:                    settings.setTextSize(WebSettings.TextSize.NORMAL);                    break;                case 4:                    settings.setTextSize(WebSettings.TextSize.LARGER);                    break;                case 5:                    settings.setTextSize(WebSettings.TextSize.LARGEST);                    break;                }            }        });

但是这种方式只能用android自带的五种字体大小：
SMALLEST(50%),
SMALLER(75%),
NORMAL(100%),
LARGER(150%),
LARGEST(200%);
如果前台的界面比较复杂的情况下，，像新闻类的。我们会事先在项目的assets目录下，创建一个模板，然后从服务器拿到数据，填充。当然，你可以让你们公司的后台给你写好模板，和样式。然后你直接调用就可以了。那么我们会遇到一个问题，就是修改字体大小，因为可能模板里面或者是从服务器拿到的html片段里面已经有个行样式

<p style="font-size: 10px;font-family:宋体 ;color: #ccc "> 这是有行样式的数据p>

类似这种，那么。你再通过js去修改这个p的文字大小是不会起作用的。。。我问了下前段。。他们说因为行内样式不能通过添加类名修改，换个角度理解就是，行内样式的优先级比外链的样式大。。。那问题来了。。我就是要修改。。有没有办法。当然有的。

//Activity:这就是填充方法，填充的内容就是服务器的html片段，填充完毕//后,再循环查找p标签，然后修改里面的字体。。  contentWebView                .loadUrl("javascript:tianchongcontentstr('"                        + replaceBlank2(str) + "')"); html: <html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">            <title>无标题文档title>        <link rel="stylesheet" href="newsWhite.css">                <script type="text/javascript">                function tianchongcontentstr(contentstr){                    document.getElementById("contentstr").innerHTML = contentstr;                    var objs=document.getElementsByTagName("p");                     for (var i = 0; i < objs.length; i++) {                        objs[i].className="xieyi1";                     }                }                    script>                head>    <body id="body">            <div class="N_xq wh mr">                <div    id="contentstr" >                div>            div>                        body>html>//然后js文件：@charset "utf-8";*{margin:0;padding:0;}.xieyi1{font-size:14pt !important;}.xieyi4{font-size:24px;}.xieyi5{font-size:27px;}

重点就是 !important这个。。这个就是声明了优先级最大。。。可以覆盖行样式里面的内容，，，至此。。就解决了。。.

每日语录：
假如我不曾见过太阳，我就可以忍受黑暗。。。加油！！！！

更多相关文章

随机推荐