Safari 第一次下载字体失败

Question

Safari 第一次下载字体失败（无缓存），但重新加载页面后就可以了。存储的字体文件存储在服务器上。

字体规则：

@font-face {
  font-family: Museo Sans Cyrl;
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: 
  url("../fonts/MuseoSansCyrl/MuseoSansCyrl100.ttf") format("truetype"),
  url("../fonts/MuseoSansCyrl/MuseoSansCyrl100.woff2") format("woff2"),
  url("../fonts/MuseoSansCyrl/MuseoSansCyrl100.otf") format("opentype");
}

其他字体粗细也一样

如果直接点击链接，文件正在下载。

尝试使用 font-face，从不同文件甚至其他服务器下载字体

Answer 1

您很可能可以通过

来缓解这个问题

更喜欢更紧凑的
```
woff2
```
格式。目前 safari 将加载更大的
```
.ttf
```
文件。

@font-face {
  font-family: Museo Sans Cyrl;
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("../fonts/MuseoSansCyrl/MuseoSansCyrl100.woff2") format("woff2"),
  url("../fonts/MuseoSansCyrl/MuseoSansCyrl100.ttf") format("truetype"),
  url("../fonts/MuseoSansCyrl/MuseoSansCyrl100.otf") format("opentype");
}

将带有
```
preload
```
属性的 <link> 标签添加到 HTML
```
<head>
```

<link rel="preload" href="../fonts/MuseoSansCyrl/MuseoSansCyrl100.woff2" as="font" type="font/woff2" crossorigin>

来自 mdn 文档

这确保它们更早可用并且不太可能被阻止页面的渲染，提高性能。尽管名字包含术语 load，它不会加载并执行脚本，但是只安排它以更高的优先级下载和缓存。

Safari 第一次下载字体失败

问题描述投票：0回答：1

1个回答

最新问题

Safari 第一次下载字体失败

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1