swift 中如何自定义 WKWebView 的字体

这里每天分享一个 iOS 的新知识,快来关注我吧

前言

我们可以在 iOS 应用程序中使用自定义字体,相信大多数 iOS 开发者都知道怎么做,但是有时候我们也需要在 WKWebView 使用自定义字体,今天就来聊聊这个话题。

在 WKWebView 中使用自定义字体

我们先使用 WKWebView.loadHTMLString(_:baseURL:) 方法加载一段本地的静态 HTML:

xml 复制代码
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 字体:

xml 复制代码
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 中,

xml 复制代码
<!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

less 复制代码
webView.loadHTMLString(htmlString, baseURL: Bundle.main.bundleURL)

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

这里每天分享一个 iOS 的新知识,快来关注我吧

本文同步自微信公众号 "iOS新知",每天准时分享一个新知识,这里只是同步,想要及时学到就来关注我吧!

相关推荐
百锦再3 小时前
Android Studio 项目文件夹结构详解
android·java·ide·ios·app·android studio·idea
season_zhu4 小时前
iOS开发:关于URL解析
ios·json·swift
iOS大前端海猫5 小时前
深入解析 Swift 中的并发属性包装器:@Actor、@MainActor 和 @GlobalActor
ios·app
ZRD11125 小时前
SwiftUI 表达式
swiftui·swift
溪饱鱼6 小时前
DHgate爆火背后的技术原因
android·前端·ios
增强7 小时前
腾讯云 人脸核身 Flutter 插件功能开发(一 IOS 端实现)
ios
鸿蒙布道师10 小时前
鸿蒙NEXT开发图片相关工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
Unlimitedz1 天前
iOS内存管理中的强引用问题
macos·ios·cocoa
雨夜赶路人1 天前
iOS开发--接入ADMob广告失败
ios
旭日猎鹰1 天前
iOS崩溃堆栈分析
ios