font-face 适用于桌面 Chrome 和桌面 Firefox，但不适用于桌面 Safari 或 iOS 浏览器答案

【问题标题】：font-face works in desktop Chrome & desktop Firefox but not in desktop Safari nor iOS browsersfont-face 适用于桌面 Chrome 和桌面 Firefox，但不适用于桌面 Safari 或 iOS 浏览器
【发布时间】：2020-03-06 16:27:28
【问题描述】：

我的字体工作正常：

桌面 Chrome
桌面火狐

相同的字体调用不起作用：

桌面 Safari
iOS 浏览器
iOS 火狐
iOS Safari

您可以在此处查看带有网站/公司名称的 font-family 调用的登录页面：Derek Erb Solutions

字体系列声明：

@font-face {
font-family: 'Dce_handwriting';
src: url('/fonts/DceHandwritingRegular.woff') format('woff'),
url('/fonts/DceHandwritingRegular.ttf') format('truetype'),
url('/fonts/DceHandwritingRegular.otf') format('opentype'),
font-weight: normal;
font-style: normal;
font-display: fallback;

}

字体系列调用：

#sitename {
font-family: Dce_handwriting, sans-serif;
font-size: 6em;
margin: 0 auto;

}

在这里查看类似的问题，我确保从文件名中删除破折号和下划线，并在字体系列声明中包含“src:”。

我可能已经查看自己的代码太久了，无法再看到问题......但这特别令人沮丧。

【问题讨论】：

有关信息，在阅读了此处的一些其他线程后，我将以下内容添加到我的 .htaccess 文件中： AddType font/ttf .ttf AddType font/eot .eot AddType font/otf .otf AddType font/woff .woff 没有变化。相同的症状。同样的问题。

标签： css fonts

【解决方案1】：

与往常一样，问题的最大部分是一个愚蠢的分号！

最后一行应该是：

url('/fonts/DceHandwritingRegular.otf') format('opentype');

在行尾使用所有重要的分号而不是逗号。

这解决了几乎所有浏览器上的问题...

【讨论】：