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这个。。这个就是声明了优先级最大。。。可以覆盖行样式里面的内容，，，至此。。就解决了。。.
每日语录：
假如我不曾见过太阳，我就可以忍受黑暗。。。加油！！！！