UIWebView使用app内自定义字体

2017-01-14 10:01:47来源:http://www.jianshu.com/p/ac319f4c5daa作者:summer_liu的自留地人点击

第七城市

最近,做了个小需求。因为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中使用。




第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台