Android Webview使用自定义字体加载网页

最新推荐文章于 2024-08-18 03:46:46 发布

木大白易

最新推荐文章于 2024-08-18 03:46:46 发布

阅读量1.5w

点赞数 1

分类专栏： Android学习笔记文章标签： webview 字体 html

本文链接：https://blog.csdn.net/aiynmimi/article/details/52777965

版权

Android学习笔记专栏收录该内容

142 篇文章 7 订阅

订阅专栏

前言

有时，当我们使用Webview加载一个网页的时候，需要使用特定的字体来显示，这时就需要我们对页面做下处理！

方法

①首先需要我们获得目标网页的HTML源码：

URL url = new URL(address);
        URLConnection urlConnection = url.openConnection();
        HttpURLConnection conn = (HttpURLConnection) urlConnection;
        conn.setRequestMethod("GET");
        InputStream inStream = conn.getInputStream();
        byte[] data = readInputStream(inStream);
        String htmlSource = new String(data, "UTF-8");

//将输入流转换为字节数组的方法
public byte[] readInputStream(InputStream instream) throws IOException {
        ByteArrayOutputStream outStream = new ByteArrayOutputStream();
        byte[] buffer = new byte[1204];
        int len;
        while ((len = instream.read(buffer)) != -1) {
            outStream.write(buffer, 0, len);
        }
        instream.close();
        return outStream.toByteArray();
    }

②这里我将需要的字体文件放在了项目Assets/Fonts/xxxx.ttf目录下，然后在Assets目录下新建两个文件myfont.css和body.css
myfont.css

@font-face {
    font-family: 'MyWebFont';
    src:url('fonts/xxxx1.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'MyWebFont';
    src:url('fonts/xxxx2.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

这里需要注意的问题：如果有两个或者两个以上的字体文件，在上面的css中可以依次写入即可，一个@font-face{}标签里边写一个字体。另外font-family后边的名字可以相同，也可以不同！
boby.css

body {
    font-family:'MyWebFont';
}

我这里是让网页中<body />里边使用这些字体文件，当然你也可以做你自己的处理！另外需要注意的问题，在myfont.css中如果`font-family写了相同的名字，则写一个名字即可，但是如果写了不同的名字，则要写上全部的名字，中间用逗号隔开！
③接下来，就要对网页进行处理，加入我们的css！

String assetsFontCSS = "<link href=\"file:///android_asset/myfont.css\" rel=\"stylesheet\" type=\"text/css\"/>";
String assetsbodyCSS = "<link href=\"file:///android_asset/body.css\" rel=\"stylesheet\" type=\"text/css\"/>";
String htmlAdded = htmlSource.replace("</head>", assetsFontCSS + "\n" + assetsbodyCSS + "\n" + "</head>");

将两个css，引入到HTML源码的<head />标签中！
④最后调用loadDataWithBaseUrl()方法即可！

webView.loadDataWithBaseURL(address, htmlAdded , "text/html","utf-8", null);

因为把字体文件直接打包在APK中，会大大增加APK文件的大小，如果我们想实时在服务器中下载字体，然后再去渲染页面呢，就需要我们将字体文件下载到手机的SD卡中！
这里下载到手机中的目录为SD卡根目录/downloadFont/Fonts/xxx.ttf，对应创建的css文件SD卡根目录/downloadFont/myfont.css
这里字体的下载和文件的创建就不说了，这里说下如何引用。

String SDLinkpath = "file://"+ Environment.getExternalStorageDirectory().getAbsolutePath()+"/downloadFont";
String SDFontCSS = "<link href=\"" 
+ SDLinkpath
+ "/myfont.css\" rel=\"stylesheet\" type=\"text/css\"/>";

同样的加入到网页源码中<head />标签中即可!

问题

①在测试中发现，这样引用对字体文件的大小有限制，特别是中文的字体文件，一般都特别大，大概在30M以下可以正常显示，超过30M就不能正常显示了！
High-Logic公司的FontCreator软件是一款功能强大的字体编辑软件！当时使用这个软件将字体文件删除到一定的大小，测试可以正常显示！
如果需要请购买正版，下载仅供测试使用：传送门
②此方法试用于android 4.4及以上版本，即API level 19及以上！以下版本不能显示！
查阅了资料，说WebView内核在4.4以下是webkit，4.4之后是chromium，而chromium是Google和Oprea从webkit分支独立出来的blink渲染引擎！不知道跟这个有没有关系！

这里推荐一位大神人物，对Webkit和Chrominm有很深的研究：
Yongsheng大神