font-family 未应用于移动设备

Question

我的css. 我有一个标题，我想使用特定字体设置样式。我在用@fontface。在我的桌面上，它工作正常，但是在我上，iPhone我iPad得到了一些标准字体（我认为这可能是次，但我不确定）。我做了一些研究并尝试了不同的格式 otf ttf 等...但仍然不起作用。最后，厌倦了，我尝试将 css 上的字体更改为其他系统字体，但手机仍然无法识别它们。基本上它只能使用一种字体。以下是桌面上的几个字体示例：

前三个图像是我在桌面版本上应用的不同字体系列。有系统字体、谷歌字体和使用@fontface. 所有工作。

第四张图片显示了每种字体的内容iPhone。iPad总是同一个。到底发生了什么？任何建议表示赞赏。

我的自定义字体代码是：

@font-face {font-family: QuaestorSans;
          src:  url("fonts/QuaestorSans-Rg.otf") format("opentype"),
                url("fonts/QuaestorSans.ttf") format("opentype");
}


.title{
  font-family: QuaestorSans;
  font-size: 2em;
  letter-spacing: 1.4px;
}

html

爱丽丝·索耶 地球上的天空

有一个小动画可以淡入字母，但我不会想到这会干扰字体系列（并且仅在移动设备上？）。

如果您想查看该网站，请访问 alicesoyer.com

字体系列只有一条规则，但如果您在桌面和移动设备上测试该网站（我现在正在 iPhone 和 iPad 上测试），您将看到不同的系列。谢谢

Answer 1

最有可能的原因是没有适合移动设备的字体格式，请尝试使用https://www.fontsquirrel.com/tools/webfont-generator等服务为您正在使用的字体生成正确的代码