html - 即使使用所有可能的格式，自定义字体也无法在 iOS 上运行

Question

我正在尝试在我的网站上使用 Gill Sans-Light 字体，但出于某种原因，我似乎无法让该字体仅在 iOS 设备上运行。为了证明我的意思，下面是我在 Android 手机和 iOS 手机中打开我的网站时使用相同字体的屏幕截图。

---

安卓:

iOS:

---

是的，我知道这里有很多关于这个特定问题的问题，我已经通读了所有问题，但无论我使用什么解决方案，我似乎都无法使我的字体正常工作。

如果有帮助，我使用 Transfonter 将字体格式转换为 EOT、WOFF2、WOFF、TTF 和 SVG。

这是我的代码:

@font-face {
    font-family: 'Gill Sans';
    src: url('../fonts/GillSans-Light.eot');
    src: url('../fonts/GillSans-Light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/GillSans-Light.woff2') format('woff2'),
         url('../fonts/GillSans-Light.woff') format('woff'),
         url('../fonts/GillSans-Light.ttf') format('truetype'),
         url('../fonts/GillSans-Light.svg#GillSans-Light') format('svg');
    font-weight: 300;
    font-style: normal;
}

感谢您的帮助。

Answer 1

iOS 和 macOS 都包含 Gill Sans 作为系统字体，因此您可能会获得默认的 Regular 字重，而不是您的托管版本。

一种选择是在安装了名为 Gill Sans 的字体的平台上有意使用系统版本:

@font-face {
    font-family: 'Gill Sans';
    src: local('GillSans-Light'),
         url('../fonts/GillSans-Light.woff2') format('woff2'),
         url('../fonts/GillSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

一个更可预测的选择，特别是对于像这样有许多不同“剪切”或数字版本的字体，是将 font-family 名称更改为不太可能与系统冲突的名称字体。例如:

@font-face {
    font-family: 'Example family name';
    src: url('../fonts/GillSans-Light.woff2') format('woff2'),
         url('../fonts/GillSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

h1 {
  font-family: 'Example family name', GillSans-Light, sans-serif;
  font-weight: 300;
  font-style: normal;
}

必读:https://en.wikipedia.org/wiki/Eric_Gill