@ font-face两个解析错误

Question

该网站在桌面浏览器上运行完美。

在手机浏览器上，该网站不会读取字体文件。

所以我检查了CSS验证器，发现了2个错误，解析错误。我尝试了几个不同的东西，似乎无法摆脱解析错误。这是错误导致的代码。字体文件存储在本地。

任何建议都将不胜感激。

@font-face {
  font-family: 'trashhand';
  src: url('TrashHand.ttf');
}

Answer 1

您可以尝试为font-family用法创建回退系统。例如：

FO  O BAR       PO BOX 1234
LASD  BA        PO BOX 1234
V  D Sxxx       PO BOX 1234

备用系统的主要目的是创建替代字体用法，因此如果浏览器不支持第一种字体，它将尝试下一个选项。

Answer 2

您可以尝试以适当的方式导入字体。

CSS TO IMPORT FONT：

@font-face {
  font-family: 'TrashHand';
  src: url('TrashHand.ttf') format('truetype'); /* Safari, Android, iOS */
}

CSS使用：

body{
    font-family:'TrashHand', sans-serif;
}

此外，您可以看到here为不同的浏览器和系统导入不同字体的许多可能性。

Answer 3

首先，如果您的字体为format或OpenType，TrueType提示是可选的，则值得明确指定：

@font-face {
  font-family: 'trashhand';
  src: url('TrashHand.ttf') format('truetype');
}

除此之外，移动设备上的路径识别存在一些问题。因此，您可以在字体路径的开头添加/，这可能会解决所有问题。

最后但并非最不重要，请考虑使用与主要浏览器兼容的woff或woff2。