页面上呈现的字体错误答案

【问题标题】：wrong font rendered on page页面上呈现的字体错误
【发布时间】：2022-01-15 09:38:06
【问题描述】：

这可能很愚蠢，但它让我非常糟糕。我有带有打字稿并使用 scss.module 的 React 项目，所以我已经导入了我的.woff 和.woff2 字体文件并创建了我的@font-face，如下所示，使用我的var( --primary-font: 'BRSonoma', sans-serif;) 在我的:root{} 上指示全局font-family（在global.css 中）。
Eventho 在检查开发工具style 选项卡上显示它我有我的--primary-font: 'BRSonoma', sans-serif; 和computed 选项卡也表明我正在使用BRSonoms 但在实际页面上呈现默认铬字体Times（看起来像Times）。

文件夹结构：\

-common
| 
 -fonts folder  (hosting .woff and .woff2 files)
|
.fonts.scss file (hosting @font-face)
|
.global.css (my css vars and code)

我的@font-face{}

@font-face {
  font-family: 'BRSonoma';
  src: url(data:application/octet-stream;base64,....... )
  src: url('/common/)
}

在 .global.css 文件上：

:root{
  --primary-font: 'BRSonoma', sans-serif;
  --brand-quaternary: #ffdb01;
  --error-color: #f33c46;
// and many others
}
body {
  color: var(--text-default);
  font-family:
    var(--primary-font),
    'Segoe UI',
    'Roboto',
    'Oxygen',
    'Ubuntu',
    'Cantarell',
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  padding-top: var(--app-header-height);
}

我在这里做错了什么？

【问题讨论】：

标签： css sass fonts scss-mixins

【解决方案1】：

也许尝试将@font-face 直接导入您的global.css 以及src:url() 请尝试将地址指向字体.woff 文件的来源

【讨论】：

非常感谢，在我将@font-face 导入 global.css 后，这实际上可以工作

【解决方案2】：

这是一个如何使用它的示例：

由 font-family 声明的名称将是其余部分中使用的名称所需的样式表。

@font-face {
    font-family: 'quadranta';
    src: url('quadranta.eot');
    src: url('quadranta.otf') format('truetype'),
         url('quadranta.woff') format('woff'),
         url('quadranta.eot?#iefix') format('embedded-opentype'),
         url('quadranta.svg#QuadrantaBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

谢谢！

【讨论】：