搜索
  • ios开发如何在 WKWebView 中使用自定义字体？
  • 发布于 2个月前
  • 267 热度
    0 评论
  • Storm
  • 0 粉丝 37 篇博客
  •   
前言
我们可以在 iOS 应用程序中使用自定义字体，相信大多数 iOS 开发者都知道怎么做，但是有时候我们也需要在 WKWebView 使用自定义字体，今天就来聊聊这个话题。

在 WKWebView 中使用自定义字体
我们先使用 WKWebView 的 .loadHTMLString(_:baseURL:) 方法加载一段本地的静态 HTML：
let webView = WKWebView(frame: view.bounds)
view.addSubview(webView)

let htmlString = """
<!doctype html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div>Apple Swift iOS</div>
</html>
"""
webView.loadHTMLString(htmlString, baseURL: nil)
可以看到效果：

默认情况下，WKWebView 会使用 Times New Roman 字体，16 号大小。

使用系统支持的字体
iOS 系统本身自带了一些字体，可以在 WebView 的 CSS 中直接使用，直接修改 CSS 中的 style 即可，比如我们改成 Zapfino 字体：
let htmlString = """
<!doctype html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div style="font-family: Zapfino">Apple Swift iOS</div>
</html>
"""
可以看到效果：


在 WKWebView 中使用自定义字体
出了系统支持的字体，有时候我们还需要使用自定义的字体，比如安卓中常用的 Roboto 斜体。
1、将字体文件导入项目中（一般是 ttf 文件）：

2、在 info.plist 文件中增加对应的标记：

备注：后来测试发现不做这一步也可以。

3、修改 HTML 字符串
在 HTML 中，要使用自定义字体，需要使用 @font-face 关键字，这个关键字可以将自定义字体文件加载到 CSS 中，
<!doctype html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    @font-face {
        font-family: 'Roboto-Italic';
        src: url("Roboto-Italic.ttf") format('truetype');
    }
</style>
<div style="font-family: Roboto-Italic">Apple Swift iOS</div>
</html>
4、将 app bundle 引入 WKWebView
为了能让 WKWebView 顺利访问字体文件，需要将字体文件所在的 Bundle 路径传入，我们这里字体文件在主 Bundle，所以直接传 Bundle.main.bundleURL：
// 堆代码 duidaima.com
webView.loadHTMLString(htmlString, baseURL: Bundle.main.bundleURL)

最后再运行代码，就能看到 Demo 中渲染了自定义字体：

用户评论
可能感兴趣的话题