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新知",每天准时分享一个新知识,这里只是同步,想要及时学到就来关注我吧!

相关推荐
sakiko_5 小时前
UIKit学习笔记4-使用UITableView制作滚动视图
笔记·学习·ios·swift·uikit
小锋学长生活大爆炸8 小时前
【开源软件】这次iPhone也是用上Claw了 | PhoneClaw
ios·开源软件·iphone·claw
SameX12 小时前
独立开发一个把走过的路变成 km² 的 App,聊聊 25m 网格和后台 GPS 的坑
ios
XD74297163613 小时前
科技早报晚报|2026年4月30日:Agent 安全壳、浏览器 iOS 测试台与可穿戴数据 API,今天更值得看的 3 个技术机会
科技·ios·开源项目·科技新闻·开发者工具
北京自在科技16 小时前
Find Hub App 小更新
android·ios·安卓·findmy·airtag
2501_9159214316 小时前
HTTPS前端劫持 新一代流量劫持解决方案
前端·网络协议·ios·小程序·https·uni-app·iphone
911hzh16 小时前
Flutter WebRTC iOS 原理解析:从 getUserMedia 到 Texture,讲清视频采集、纹理渲染与远端通话链路
flutter·ios·webrtc
软泡芙17 小时前
【iOS】 开发入门指南
ios
水中加点糖17 小时前
ios中使用DockKit和CoreML实现自定义目标的自动跟随(一)
目标检测·ios·目标跟踪·硬件控制·dockkit
2501_9159090618 小时前
iOS应用签名的三种方法全解析:从官方到第三方工具
android·ios·小程序·https·uni-app·iphone·webview