WKWebView 使用自定义字体

前言

最近公司产品想更改APP整体的字体，并且H5页面的字体也要与APP原生的字体保持一致。

1.APP更改字体

这个比较简单，按照常规方法更改即可
(1).将字体文件放入工程
(2).在info.plist中增加Fonts provided by application 数组类型，并将添加的字体文件添加
(3).找到字体文件对应的具体的我们要用的字体名字

NSArray *fontFamilies = [UIFont familyNames];
for (NSString *fontFamily in fontFamilies){
      NSArray *fontNames = [UIFont fontNamesForFamilyName:fontFamily];
      NSLog (@"%@: %@", fontFamily, fontNames);
 }

(4).在设置font的地方利用

[UIFont fontWithName:@"具体的字体名" size:15];

2.WKWebView更改字体

有多种方案可以实现，本人目前采用的是将字体文件转为base64，然后将baser64通过css注入到webview的页面中。
在WKWebView的代理方法中:

- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation

添加如下代码：

NSString *fileUrl = [[NSBundle mainBundle] pathForResource:@"字体文件名" ofType:@"TTF"];
NSData *fileData = [NSData dataWithContentsOfFile:fileUrl];
NSString *boldFont = [fileData base64EncodedStringWithOptions:0];
NSMutableString *javascript = [NSMutableString string];
[javascript appendString:[NSString stringWithFormat:@"\
                              var boldcss = '@font-face { font-family: \"%@\"; src: url(data:font/ttf;base64,%@) format(\"truetype\");} *{font-family: \"%@\" !important;}'; \
                              var head = document.getElementsByTagName('head')[0], \
                              style = document.createElement('style'); \
                              style.type = 'text/css'; \
                              style.innerHTML = boldcss; \
                              head.appendChild(style);",@"字体文件对应的具体的字体名",boldFont,@"字体文件对应的具体的字体名"]];
 [webView evaluateJavaScript:javascript completionHandler:nil];