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

Question

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

Android:

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

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

Custom font not working on iOS even when using all formats possible

html

css

fonts

font-face

ios