Android webview 使用自定义自体

2015-09-10 20:32 181人阅读 评论(1) 收藏 举报

分类：

android（19）

原文：http://blog.isming.me/2015/07/07/Android-custom-font/

最近的一个项目中有个需求：app与webview需要统一使用自定义字体。

一：修改App的默认字体

1.把myfont.ttf放在assets/fonts 目录下

2.配置Calligraphy

dependencies {

    compile 'uk.co.chrisjenx:calligraphy:1.2.0'

}

  githut地址：https://github.com/chrisjenx/Calligraphy

2.在 BaseApplication extends Application 的onCreate 方法中

[java] view plain copy

1. CalligraphyConfig.initDefault(new CalligraphyConfig.Builder()  
2.                        .setDefaultFontPath("fonts/myfont.ttf")  
3.                        .setFontAttrId(R.attr.fontPath)  
4.                        .build()  

3.在BaseActivity 中重写attachBaseContext方法

[java] view plain copy

1. protected void attachBaseContext(Context newBase) {  
2.        super.attachBaseContext(CalligraphyContextWrapper.wrap(newBase));  
3.    }  

二：修改webview里网页的字体：

1.对于本地的网页，在asset目录放字体文件，并在css中添加以下内容，自定义一个字体face，并且在需要的地方使用这个字体face即可。

[html] view plain copy

1. @font-face {  
2.       font-family: 'MyCustomFont';  
3.       src: url('file:///android_asset/fonts/myfont.ttf');   
4.     }  
5.     body{  
6.       font-family:"MyCustomFont";  
7.     }  

2.对于在线的网页，则需要把字体文件放到服务器，使用同样的方式定义字体face,应用到每个地方。

为了减少网页或者说服务器端的工作，可以使用本地注入的方式注入font-face的css，并对整个网页进行样式替换。

给webview自定义webViewClient,重写onPageFinish,在其中添加如下内容：

[java] view plain copy

1. public void onPageFinished(WebView view, String url) {  
2.                 injectCSS();  
3.                 view.loadUrl("javascript:!function(){" +  
4.                         "s=document.createElement('style');s.innerHTML="  
5.                         + "\"@font-face{font-family:myhyqh;src:url('****/fonts/myfont.ttf');}*{font-family:myhyqh !important;}\";"  
6.                         + "document.getElementsByTagName('head')[0].appendChild(s);" +  
7.                         "document.getElementsByTagName('body')[0].style.fontFamily = \"myhyqh\";}()");  
8.                 super.onPageFinished(view, url);  
9.             }  

[java] view plain copy

1. ****/fonts/myfont.ttf  //这里的* 号是为了让它走：shouldInterceptRequest  

重写vwebview的shouldInterceptRequest方法：

[java] view plain copy

1. public WebResourceResponse shouldInterceptRequest(WebView view,  
2.                     String url) {  
3.                 WebResourceResponse response = super.shouldInterceptRequest(view, url);  
4.                 Log.i("webview","load intercept request:" + url);  
5.                  if (url != null && url.contains("myfont.ttf")) {  
6.                         String assertPath ="fonts/myfont.ttf";  
7.                         try {  
8.                             response = new WebResourceResponse("application/x-font-ttf","UTF8", getAssets().open(assertPath));  
9.                         } catch (IOException e) {  
10.                             e.printStackTrace();  
11.                         }  
12.                     }  
13.                 return response;  
14.             }  

这样网页被新字体重新渲染就达到目的了