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 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。