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">
<!--        <img class="img2" src="srcimg.png" id="img"  οnerrοr="this.src='srcimg.png'">-->
            <div class="N_xq wh mr">
                <div    id="contentstr" >
                </div>
            </div>

<!--            <h5 id="h5">©2015 四川发布 版权所有 转载须经授权</h5>-->
            <!--相关文章 版权信息-->


            </body>

</html>


//然后js文件:

@charset "utf-8";
*{margin:0;padding:0;}
.xieyi1{font-size:14pt !important;}
.xieyi4{font-size:24px;}
.xieyi5{font-size:27px;}

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

每日语录:
假如我不曾见过太阳,我就可以忍受黑暗。。。加油!!!!

 

人已赞赏
Android文章

Android中验证姓名、身份证、银行卡、手机号(正则表达式校验)

2019-12-7 10:37:05

Android文章

Android WebView文字大小调整及页面缩放调整

2019-12-10 15:56:45

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索