在 swift 4.2 中加载动态 html 页面时，如何在 iOS 上为 wkWebview 实现本地自定义字体？答案

【问题标题】：How to implement local custom font for wkWebview on iOS when loading dynamic html page in swift 4.2?在 swift 4.2 中加载动态 html 页面时，如何在 iOS 上为 wkWebview 实现本地自定义字体？
【发布时间】：2020-04-09 17:36:45
【问题描述】：

首先，我在 web 部件中创建了我的 style.css

@font-face {
  font-family: "Noto Sans Southeast Asian";
  font-weight: normal;
  src: local("Noto Sans Southeast Asian"), url("NotoSansSoutheastAsian-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Noto Sans Southeast Asian Bold";
  font-weight: bold;
  src: local("Noto Sans Southeast Asian Bold"), url("NotoSansSoutheastAsian-Bold.ttf") format("truetype");
}

我已经完成了本机 iOS 部分的说明 custom font not working programmatically in swift

没用

我得到的建议是我必须将我的 HTML 页面编码为 base64，如果我想在之后将它带到本机部分以添加 wkWebview 的本地字体

我不知道如何实现 wkWebview 以在我的项目从 Html 文件加载的每个页面中使用我的自定义字体

我刚开始使用 wkWebview。我的项目使用 swift 4.2

【问题讨论】：

标签： html ios swift fonts wkwebview

【解决方案1】：

func updateHTMLStringStyle(fontSize: String, bodyContent: String) -> String {

 return "<html><head><meta charset='utf-8'><meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'><meta name='theme-color' content='#000000'><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' /><meta name='theme-color' content='#000000'><meta name='msapplication-navbutton-color' content='#5A9C14'><meta name='apple-mobile-web-app-status-bar-style' content='#000000'><style>a:link { color: blue; }</style><link href='https://fonts.googleapis.com/css?family=ProximaNova-Regular' rel='stylesheet'><style>:root,* {font-family: ProximaNova-Regular;font-size: \(fontSize);color: "rgb(216, 216, 216)");text-align: left;-webkit-user-select: none;user-select: none;}</style></head><body>\(bodyContent ?? "")</body></html>"

}

您可以根据您的要求自定义此 HTML 格式的字体样式、文本颜色、字体大小。在上述函数中传递 webview 内容和字体大小。

使用功能

webViewBody.loadHTMLString((self.updateHTMLStringStyle(fontSize: "21px"))!, baseURL: nil)

我希望，这会成功。

【讨论】：

谢谢，就我而言，我的目的是制作从网站加载的所有 html 文件，以将字体更改为我的自定义字体。您的答案只是制作使用本机本地字体的静态页面。我已经尝试过您的答案，但它不适用于我的情况

【解决方案2】：

对于我来说我通过在我的style.css 的 Web 部件上进行编辑解决了这个问题，并将 WOFF 字体类型上传到我的网站，然后链接到它。

我刚刚知道 iOS safari 从 iOS 10 开始支持 WOFF 和 WOFF2。*

@font-face {
  font-family: "Noto Sans Southeast Asian";
  src: local("Noto Sans Southeast Asian"), 
       url(LINK_TO_FONT/NotoSansSoutheastAsian-Regular.woff) format("woff");
  font-weight: normal;
  font-style: normal;

}
@font-face {
  font-family: "Noto Sans Southeast Asian Bold";
  src: local("Noto Sans Southeast Asian Bold"), 
       url(LINK_TO_FONT/NotoSansSoutheastAsian-Bold.woff) format("woff");
  font-weight: bold;
  font-style: normal;

}

【讨论】：