无法通过@font-face 从本地存储加载字体 - React / css答案

【问题标题】：Unable to load font from local storage via @font-face - React / css无法通过@font-face 从本地存储加载字体 - React / css
【发布时间】：2022-10-19 12:34:45
【问题描述】：

我正在尝试从 theme.js 加载“Inspiration-Regular.ttf”字体。

网址是正确的。

然后，我在第 137 行将“Inspiration-Regular.tff”设置为正文的字体系列，如下面的代码所示

检查元素后 - 它确实声明“字体系列”已更新（如下所示），但出现相同的视觉默认字体。为什么字体没有变化？

灵感规律应如何出现的 sn-p。

【问题讨论】：

标签： css reactjs fonts font-face font-family

【解决方案1】：

您的 @font-face 规则在指定格式时出错：

truetype 字体的正确格式值为format('truetype')。

大多数现代浏览器也可以在没有指定任何格式的情况下加载字体。
但是，我建议添加此值以获得最佳兼容性。

/* works */

@font-face {
  font-family: 'FiraCorrect';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/firasans/v16/va9E4kDNxMZdWfMOD5Vvl4jO.ttf) format('truetype');
}


/* won't work */

@font-face {
  font-family: 'FiraIncorrect';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/firasans/v16/va9E4kDNxMZdWfMOD5Vvl4jO.ttf) format('ttf');
}


/* won't work */

@font-face {
  font-family: 'FiraInDifferent';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/firasans/v16/va9E4kDNxMZdWfMOD5Vvl4jO.ttf);
}

.correct {
  font-family: 'FiraCorrect';
  font-weight: 400;
}

.inCorrect {
  font-family: 'FiraIncorrect';
  font-weight: 400;
}

.inDifferent {
  font-family: 'FiraInDifferent';
  font-weight: 400;
}

<p class="correct">Correct @font-face: format(truetype)</p>
<p class="inCorrect">Incorrect @font-face: format(ttf)</p>

<p class="inDifferent">Incorrect @font-face: no format specified</p>

【讨论】：