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

Question

我正在尝试在 WKWebView 中显示的某些动态 HTML 的 CSS 中使用本地字体（与应用程序一起安装的字体）。我已经阅读了许多 Stack Overflow 帖子和这个 webpage。回顾一下我所做的：

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

它作为应用程序 plist 的一部分输入到 应用程序提供的字体 部分。

根据引用的网页，我可以确认 ImpactLTStd.otf 列在 构建阶段 的 复制捆绑资源 部分中] 并让我相信 ImpactLTStd.otf 与应用程序正确捆绑在一起。

字体在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 的默认字体。

有人知道我哪一步做错了吗？

Answer 1

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

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

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

Use Custom Local Font in WKWebView

css

fonts

ios

swift

wkwebview