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;
   }

 });

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

更换app内字体请参考：https://www.cnblogs.com/plokmju/p/7722887.html
这是一个系类，从基础到深入。抽时间把大神这系列文章再拜读整理一下。

膜拜一下大神！！！

最后编辑于：2019.05.06 17:00:30