UIWebView使用app内自定义字体

最近，作了个小需求。由于app是使用的自定义字体，因此产品想让h5的字体跟app的字体一致，减小脱离感。而通常来讲，app内的h5页面，都是显示系统的默认字体。要想使用自定义字体，通常的作法是在h5里面加上字体库，而后app端，在加载url的时候，会去下载这些字体。可是字体包一个动辄3，4M，要是有多个字体库的话，不用想，体验会很糟糕。因此这种下载的方式不太可行。但它的好处就是，在全部的浏览器上都支持。

指定font-family

搜索一番，发现能够直接指定font-family为iOS字体库的名字。好比app引用的是圆体，打开LaunchPad-->其余-->字体册，搜圆体，PostScript名称就正是咱们须要的。如图。

 

1.png

而后在html中，或者css。这里为了方便，直接将样式写在了html中了。

.p1 { 
 font-family: "STYuanti-SC-Regular"; font-size: 30pt; color: red; } <p class='p1'>你好吗</p> 

以后，在app里加载url，(^o)/~，是否是变成圆体了。注意，这个前提是首先你得在app里加入圆体字体库，并添加到plist中。以下图。

 

plist.png

不过这种方式的缺点就是，只适用于iOS，由于字体库名是iOS内置字体库里面的。可是app都会有两端。因此此种方式，舍弃。

另寻出路

换个思路，既然字体库都已经在app内有了。可不能够直接借用呢？既省流量，又有好的体验。固然是能够的！！

在html/css内，这样写。使用font-face，src为字体库名称。

@font-face { font-family: 'Yuanti-SC-Regular'; src: url('Yuanti-SC-Regular.ttf') format('truetype') } .p1 { font-family: "Yuanti-SC-Regular"; font-size: 30pt; color: red; } 

用charles抓包发现，下载ttf的请求以下。

 

3.png

下载字体请求的url以下。

http://172.19.144.94/testFont/Yuanti-SC-Bold.ttf 

跟使用本地图片的方式同样，能够用URLProtocol拦截请求，当检测到是ttf下载时，能够将本地的字体库读出来，直接将data返回。

因而乎，自定义CustomURLProtocol: NSURLProtocol。在AppDelegate注册。

[NSURLProtocol registerClass:[CustomURLProtocol class]]; 

关键代码：

- (void)startLoading { NSMutableURLRequest *mutableReqeust = [[self request] mutableCopy]; [NSURLProtocol setProperty:@YES forKey:URLProtocolHandledKey inRequest:mutableReqeust]; if ([[self.request.URL absoluteString] hasSuffix:@"ttf"]) { // fontName NSString *fontName = [[self.request.URL.absoluteString lastPathComponent] stringByDeletingPathExtension]; NSString *path = [[NSBundle mainBundle] pathForResource:fontName ofType:@"ttf"]; NSData *fontData = [NSData dataWithContentsOfFile:path]; NSURLResponse *response = [[NSURLResponse alloc] init]; [self.client URLProtocol:self didReceiveResponse:response cacheStoragePolicy:NSURLCacheStorageNotAllowed]; [self.client URLProtocol:self didLoadData:fontData]; [[self client] URLProtocolDidFinishLoading:self]; }else{ self.connection = [NSURLConnection connectionWithRequest:mutableReqeust delegate:self]; } } 

限制：因为WKWebView不能使用urlprotocol，因此只能在UIWebView中使用。

demo在此

说明一下，demo中的web文件夹，即为测试的html和css，如要本地测试，可放到Nginx服务器上，而后修改下demo中的url，即可看到效果。

做者：我落泪_情绪零碎 连接：https://www.jianshu.com/p/ac319f4c5daa 来源：简书 简书著做权归做者全部，任何形式的转载都请联系做者得到受权并注明出处。