css - 手机浏览器不支持字体

Question

我按照本指南使用该@font-face属性来支持浏览器，我使用的方法是“稍微深入的浏览器支持”。它在我的机器上运行（当然），我托管了该站点并要求我的一位朋友检查该站点以验证他的浏览器是否支持该字体，并且确实如此。但是，当我使用 Safari 从我的 iPhone 检查网站时，其中一种字体不受支持，我想知道为什么会这样。如指南中所述，我将字体放在顶部，在任何样式之前。

这是托管站点的链接https://gilbert1391.github.io/new-portfolio/

我要支持的字体是 The Bold Font（在 hero 部分中使用）和 Helvetica Neue，而我的 iphone 浏览器不支持的字体是前者。

iPhone软件版本：13.3.1

标签： css

Answer 1

我解决了这个问题

首先，我在本地机器上安装了字体，我认为它@font-face工作正常，我从电脑上卸载了字体并从那里开始工作。

其次，我的路径错误，通过使用以下路径修复了该问题： /src/assets/fonts/TheBoldFont.ttf

但它仍然没有工作，我收到了这个警告

Failed to decode downloaded font

我修复它的方法是替换之前的路径： ./assets/fonts/TheBoldFont.ttf