最近，做了個(gè)小需求。因?yàn)閍pp是使用的自定義字體，所以產(chǎn)品想讓h5的字體跟app的字體一致，減少脫離感。而一般來說，app內(nèi)的h5頁面，都是顯示系統(tǒng)的默認(rèn)字體。要想使用自定義字體，一般的做法是在h5里面加上字體庫(kù)，然后app端，在加載url的時(shí)候，會(huì)去下載這些字體。但是字體包一個(gè)動(dòng)輒3，4M，要是有多個(gè)字體庫(kù)的話，不用想，體驗(yàn)會(huì)很糟糕。所以這種下載的方式不太可行。但它的好處就是，在所有的瀏覽器上都支持。
指定font-family
搜索一番，發(fā)現(xiàn)可以直接指定font-family為iOS字體庫(kù)的名字。比如app引用的是圓體，打開LaunchPad-->其他-->字體冊(cè)，搜圓體，PostScript名稱就正是我們需要的。如圖。
然后在html中，或者css。這里為了方便，直接將樣式寫在了html中了。
.p1 {
font-family: "STYuanti-SC-Regular";
font-size: 30pt;
color: red;
}
<p class='p1'>你好嗎</p>
之后，在app里加載url，(o)/~，是不是變成圓體了。注意，這個(gè)前提是首先你得在app里加入圓體字體庫(kù)，并添加到plist中。如下圖。
不過這種方式的缺點(diǎn)就是，只適用于iOS，因?yàn)樽煮w庫(kù)名是iOS內(nèi)置字體庫(kù)里面的。但是app都會(huì)有兩端。所以此種方式，舍棄。
另尋出路
換個(gè)思路，既然字體庫(kù)都已經(jīng)在app內(nèi)有了?？刹豢梢灾苯咏栌媚兀考仁×髁?，又有好的體驗(yàn)。當(dāng)然是可以的??！
在html/css內(nèi)，這樣寫。使用font-face，src為字體庫(kù)名稱。
@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抓包發(fā)現(xiàn)，下載ttf的請(qǐng)求如下。
下載字體請(qǐng)求的url如下。
http://172.19.144.94/testFont/Yuanti-SC-Bold.ttf
跟使用本地圖片的方式一樣，可以用URLProtocol攔截請(qǐng)求，當(dāng)檢測(cè)到是ttf下載時(shí)，可以將本地的字體庫(kù)讀出來，直接將data返回。
于是乎，自定義CustomURLProtocol: NSURLProtocol。在AppDelegate注冊(cè)。
[NSURLProtocol registerClass:[CustomURLProtocol class]];
關(guān)鍵代碼：
- (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文件夾，即為測(cè)試的html和css，如要本地測(cè)試，可放到Nginx服務(wù)器上，然后修改下demo中的url，便可看到效果。
