与 figma 相比，字体提供不同的输出

Question

我使用 Gilroy-Bold 作为我的字体，在 figma 中得到的结果与我的 React 应用程序不同。它们都来自同一来源。

菲格玛：

我的笔记本电脑：

这就是我的实现方式。

@font-face {
 font-family:'Gilroy-Bold';
 src:url('/src/Gilroy/Gilroy-Bold.ttf');
}

.PPNameHeader{
   color: #444BAB;
   margin:0px;
   margin-left: 6%;
   font-size: 1.173rem;
   font-family:Gilroy-Bold;
}

根据我的编辑推荐，路径是正确的。我试过的东西：

*{
  font-family:'Gilroy-Bold';
  src:url('/src/Gilroy/Gilroy-Bold.ttf');
}

清除了我的缓存。

隐身标签。

重新启动开发服务器和编辑器。

Answer 1

现在我们知道是您的路径导致了问题，最好为您的 src 使用 亲戚 url。您正在使用 绝对 url，它可以根据其所在的环境评估不同的位置。

src:url('/path/from/root/Gilroy-Bold.ttf'); /* absolute url */
src:url('./path/from/current/file/Gilroy-Bold.ttf'); /* relative url */

应用自定义 font-family 时，其名称通常用引号引起来。我不确定这是否有必要，但可以尝试一下：

.PPNameHeader{
   ...
   font-size: 1.173rem;
   font-family: 'Gilroy-Bold';
}

与 figma 相比，字体提供不同的输出

Font is giving different output compared to figma

css

fonts

typography

reactjs