在 WKWebView 中使用自定义本地字体

Posted 2023-02-23

【中文标题】在 WKWebView 中使用自定义本地字体

【英文标题】：Use Custom Local Font in WKWebView

【发布时间】：2017-11-07 20:03:11

【问题描述】：

我正在尝试在WKWebView 中呈现的一些动态 html 的 CSS 中使用本地字体（随应用程序安装的字体）。我已经阅读了许多 Stack Overflow 帖子和 webpage。回顾我所做的：

字体（在本例中为 ImpactLTStd.otf）是 ios 应用程序的一部分。

在应用程序提供的字体部分中作为应用程序列表的一部分输入。

根据引用的网页，我可以确认 ImpactLTStd.otf 列在 Build Phases 的 Copy Bundle Resources 部分，并让我相信 @987654325 @ 与应用程序正确绑定。

字体在 CSS 中被列为：

<style> @font-face font-family: 'Impact LT Std'; src: local('Impact LT Std'), local('ImpactLTStd'), url('ImpactLTStd.otf'); format('opentype');  </style>

我以两种不同的方式引用字体（一种按字体系列，另一种按字体名称，以便查看哪个有效，哪个无效）：

<style>  .box_root     overflow: auto;    background-color: #000000;    padding-top: 1.5em;    padding-bottom: 1.5em;    padding-left: 1.5em;    max-width: 1440px;    max-height: 640px;    display: table;    .box_title     color: #ffd300;    line-height: 1em;    font-size: 85pt;    font-size: 6vw;    font-family: 'Impact LT Std';    text-transform: uppercase;    .box_description     padding-top: .5em;    line-height: 1em;    color: #ffffff;    font-size: 65pt;    font-size: 4vw;    font-weight: bold;    font-family: 'ImpactLTStd';   

我使用 loadHTMLString 将 HTML 加载到 WKWebView：

webView.loadHTMLString(getHtml(), baseURL: nil)

但是，使用 CSS 标记在 WKWebView 中显示的 HTML 文本不使用 Impact 字体，而是使用一些看起来像 Times New Roman 的默认字体。

有人知道我做错了什么步骤吗？

【参考方案1】：

您在加载 HTML 字符串时没有提供基本 URL，这将导致字体加载失败。尝试访问你的包的主要资源路径，如下所示：

if let resourcePath = Bundle.main.resourcePath 
    let url = URL.init(fileURLWithPath: resourcePath)
    webView.loadHTMLString(getHtml(), baseURL: url)

【讨论】：

就是这样！我想知道为什么我看过的其他材料都没有提到这一点。再次感谢...

如果我们要加载其他需要基本url的内容（如视频）怎么办？如何同时给出基本url和资源路径？

你拯救了我的一天，太棒了。