该字体在Iphone 11上显示，但在Iphone 14上不使用。这怎么可能？

Question

我使用 font-face 连接文件中的字体。

@font-face {
    font-family: "Mak";
    src: url('../fonts/MAK.eot') format('embedded-opentype'),
        url('../fonts/MAK.woff') format('woff'),
        url('../fonts/MAK-bold.eot') format('embedded-opentype'),
        url('../fonts/MAK-bold.woff') format('woff'),
  }

我尝试将其上传到 guithub 和其他托管服务上，但没有帮助

Answer 1

预加载字体文件肯定可以缩短加载时间，如评论所述。

但是，请务必仔细检查您的

@font-face

规则。 目前，它有一些错误。

1. 用分号替换最后的逗号 - 结尾的逗号实际上使

   url

   属性无效。
2. 您需要 2 个字体规则，分别用于常规字体和粗体字体粗细。否则，浏览器将以“假粗体”呈现粗体文本

我们可以安全地删除已弃用的

.eot

（已停产的 Internet Explorer 使用） - 这同样适用于同样已弃用的

.svg

字体文件格式。

@font-face {
  font-family: "Mak";
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/MAK.woff") format("woff");
}

@font-face {
  font-family: "Mak";
  font-weight: bold;
  font-style: normal;
  src: url("../fonts/MAK-bold.woff") format("woff");
}

某些浏览器可能更宽容 - 允许较小的语法错误。

您还可以检查您的字体系列是否在

woff2

中可用 – 由于这种格式紧凑，因此还可以加快字体加载速度。