Android WebView 加载CSS文件显示富文本
2019-04-30 本文已影响0人
榕城歌者
应用场景：
通过Web端编写文章，为了显示上的美观，都会加上一些标签，形成一个H5文本。
服务器返回的是H5文本内容，里面还有Html标签。Android客户端需要将这些内容加载出来，采用WebView去加载，除此之外，还要求客户端定义一套样式去渲染。
css内容：
@charset"UTF-8";
@font-face {
font-family:"opensans";
src: url("fonts/opensans.ttf");
}
img,object,video,embed {
max-width:100% !important;
width:auto;
height:auto;
vertical-align:middle;
border:0;
}
html, body {
background-color:white;
text-align:justify;
text-justify:distribute-all-lines;
font-size:16px !important;
line-height:1.5;
color: #4a4a4a;
}
a:link{
text-decoration: none;
color:#2B93F6
}
WebView渲染内容：
//articleContent是带html标签的文章内容，作者采用的是Kotlin编码
val sb = StringBuilder()
sb.append("<HTML><HEAD><LINK href=\"article.css\" type=\"text/css\" rel=\"stylesheet\"/></HEAD><body>")
sb.append(articleContent+"")
sb.append("</body></HTML>")
webView.loadDataWithBaseURL("file:///android_asset/", sb.toString(),"text/html","utf-8",null)
注意：
一般来说不修改WebView的默认配置，useWideViewPort和loadWithOverviewMode的属性都是false。
useWideViewPort的值决定了是否允许WebView使用 <viewport> 标签，用于屏幕自适应。默认值是false，页面布局的宽度被一直设置为 CSS 中控制的 WebView 的宽度，所以想让本地的CSS起作用，那么这个值就不能设置为true；
loadWithOverviewMode的作用是，当页面宽度大于WebView宽度时，缩小使页面宽度等于WebView宽度，设置为true之后页面宽度有可能会超过手机屏幕。所以没有特定要求，不要将这个值设置为true。
settings.useWideViewPort =false
settings.loadWithOverviewMode =false
两者同时设置为false能达到最优的显示效果，这也是源码默认的设定值。
查看更多WebView设置，可看：
