html5字体修改webview,WebView中修改字体

一般情况下我们做加载网页都是返回一个url，我们进行加载。各种各样的样式都已经在网页中做了处理。但是，也会碰到一些情况，需要我们加载代码片段。还有修改一些样式，比如：修改网页中的字体。当然，本文中的修改字体同样可以修改网页中的字体。

那么现在就将这个问题做一下记录。文章的末尾也会附上承香墨影有关app修改字体的系列文章。

添加字体

新建Assets及fonts目录，并将字体文件拷贝到fonts目录下

字体.png

老生常谈的问题，加载代码片段

mWebView.loadDataWithBaseURL("file:///android_asset/",html, "text/html", "utf-8", null);

这一块没有什么可说的。

重要的点是在WebViewClient中做的处理

wvMian.setWebViewClient(new WebViewClient() {

@Override

public void onPageFinished(WebView view, String url) {

super.onPageFinished(view, url);

view.loadUrl("javascript:!function(){" + "s=document.createElement('style');s.innerHTML=" + "\"@font-face{font-family:myhyqh;src:url('**injection**/hyqh.ttf');}*{font-family:myhyqh !important;}\";"

+ "document.getElementsByTagName('head')[0].appendChild(s);" +

"document.getElementsByTagName('body')[0].style.fontFamily = \"myhyqh\";}()");

}

//由于网页上是没有权限访问本地的asset文件夹的，因此我们需要拦截请求来加载本地的文件，如果是代码片段可以直接用asset文件夹，我这里替换了`file:

//android_assets/`为 `**injection**/`了，我们还需要重写`shouldInterceptRequest`

//在请求为我们这个字体文件的时候，加载本地文件：

@Override

public WebResourceResponse shouldInterceptRequest(WebView view, String url) {

WebResourceResponse response = super.shouldInterceptRequest(view, url);

if (url != null && url.contains("**injection**/")) {

//String assertPath = url.replace("**injection**/", "");

String assertPath = url.substring(url.indexOf("**injection**/") + "**injection**/".length(), url.length());

try {

response = new WebResourceResponse("application/x-font-ttf", "UTF8", getAssets().open(assertPath));

} catch (IOException e) {

e.printStackTrace();

}

}

return response;

}

});

如果都是代码片段形式的话可以用以下的方式

mWebView.setWebViewClient(new WebViewClient() {

@Override

public void onPageFinished(WebView view, String url) {

super.onPageFinished(view, url);

view.loadUrl("javascript:!function(){" +

"s=document.createElement('style');s.innerHTML="

+ "\"@font-face{font-family:MyCustomFont;src:url('****/myfont.ttf');}*"

+"{font-family:MyCustomFont !important;}\";"

+ "document.getElementsByTagName('head')[0].appendChild(s);" +

"document.getElementsByTagName('body')[0].style.fontFamily = \"MyCustomFont\";}()");

}

@Override

public WebResourceResponse shouldInterceptRequest(WebView view, String url) {

WebResourceResponse response = super.shouldInterceptRequest(view, url);

Log.i("webview","load intercept request:" + url);

if (url != null && url.contains("myfont.ttf")) {

String assertPath ="fonts/myfont.ttf";

// String assertPath = url.substring(url.indexOf("**injection**/") + "**injection**/".length(), url.length());

try {

response = new WebResourceResponse("application/x-font-ttf","UTF8", getAssets().open(assertPath));

} catch (IOException e) {

e.printStackTrace();

}

}

return response;

}

});

以上就可以实现了更改网页中的字体了。

膜拜一下大神！！！