WKWebview 使用自定义字体

编辑于2019-02-20.

注意:只适用于webview加载本地HTML

1.webview 使用自定义字体
css文件 中 :

body{
    font-family:#fontfamily#,sans-serif;
}

其中#fontfamily# 替换为字体名字 即可.

  1. wkwebview 使用自定义字体

同上,会发现不起作用,修改为以下方式

@font-face
{
    font-family: #fontfamily#;
    src: local(#fontfamily#),url('http://localhost/CustomFont/#fontfamilyurl#') format('opentype');
}

fontfamily# 和 #fontfamilyurl# 是需要替换的,另外就是资源加载的这个路径问题,很明显我这里是把字体放在了沙盒之中,如果要使用项目中存在的字体,路径直接这么填

@font-face
{
    font-family: 'CharlotteSansW02-Book';
    src: local('CharlotteSansW02-Book'),url('Charlotte Sans Book.otf') format('opentype');
}

参考上方的##对号入座即可.
要是访问沙盒中的字体就按上边的来,这里存在一个问题,假如html代码是加载的本地文件,代码是这样写的:

    NSString * path = [[NSBundle mainBundle] resourcePath];
    NSURL * baseURL = [NSURL fileURLWithPath:path];
    [self.webView loadHTMLString:HtmlString baseURL:baseURL];

常规方法设置会访问不到沙盒中的文件,这有个教程:

https://www.jianshu.com/p/be83c57bbf67 (本地开了一个类似Apache服务器),即可解决

参考 : https://stackoverflow.com/questions/25785179/using-custom-fonts-in-wkwebview

附上一 demo : https://github.com/AdityaDeshmane/iOSWKWebViewCustomFontDemo,可以参考下

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容