苹果WebKit下WKWebView迁移时自定义字体加载及字重异常问题

问题原因说明 #

1. 初始字体加载失败不属于WebKit已知问题，是WKWebView比UIWebView更严格的跨域资源访问限制导致：你调用loadHTMLString:baseURL:时传入的baseURL是本地沙箱路径，CSS里引用的远程字体属于跨域资源，WKWebView默认会拦截这类请求，UIWebView无该限制所以可以正常加载。
2. 调整URL后字重无法切换的原因是你仅声明了单种字重的Heebo字体，没有引入对应500、700字重的字体资源，也没有在@font-face中指定font-weight属性，浏览器找不到匹配的字重文件，只能 fallback 到默认的常规字重。

解决方案 #

1. 修复字体加载失败问题 #

两种方案二选一即可：

• 方案1：开启WKWebView本地文件跨域访问权限，初始化时配置如下：

WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
// 允许本地页面访问跨域资源，App Store审核可通过
[config setValue:@(YES) forKey:@"allowUniversalAccessFromFileURLs"];
self.articleWebView = [[WKWebView alloc] initWithFrame:yourFrame configuration:config];

• 方案2：将Heebo字体文件下载到App本地bundle中，CSS里直接引用本地字体路径，彻底避免跨域问题。

2. 修复字重不生效问题 #

补充引入不同字重的Heebo字体资源，每个字重对应单独的@font-face声明，示例如下：

/* 常规字重 400 */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/heebo/v12/NGS6v5_NC0k9P9H0TbFhsqMA6aw.woff2) format('woff2');
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* 中粗 500 */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/heebo/v12/NGS6v5_NC0k9P9H2TbFhsqMA6aw.woff2) format('woff2');
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* 粗体 700 */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/heebo/v12/NGS6v5_NC0k9P9H4TbFhsqMA6aw.woff2) format('woff2');
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
}

配置完成后，代码中设置的font-weight:500、font-weight:700就可以正常匹配对应字体文件，实现字重切换效果。

额外优化建议 #

将HTML模板中的viewport meta标签移到style标签之前，避免部分移动端渲染异常。

内容的提问来源于stack exchange，提问作者JeanDArc