最近，做了个小需求。因为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
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。