最近，做了個小需求。因為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;

}

你好嗎

之后，在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中的web文件夾，即為測試的html和css，如要本地測試，可放到Nginx服務器上，然后修改下demo中的url，便可看到效果。

總結

以上是生活随笔為你收集整理的h5页面自定义字体_UIWebView使用app内自定义字体的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。