时间戳

首页 > 解决方案 > 在 css 中加载的字体没有显示在网站上

html - 在 css 中加载的字体没有显示在网站上

问题描述

我正在创建一个网站，我正在尝试更改默认字体，但即使它似乎已正确加载（即使在其他计算机上我也没有看到加载错误），我在页面上得到的所有内容都是默认字体。这是我用来加载字体的 CSS 代码：

@font-face {
  font-family: "Fira Code";
  src: URL("../fonts/FiraCode-Regular.woff2") format('woff2'), 
       URL("../fonts/FiraCode-Regular.woff") format('woff'),
       URL("../fonts/FiraCode-Regular.ttf")  format('truetype');
}

然后调用字体：

body {
  font-family: "Fira Code";
}

作为参考，网站文件夹的结构是：

website-folder
  |- index.html
  |- css
  | |- style.css
  |- fonts
  | |- FiraCode-Regular.woff2
  | |- FiraCode-Regular.woff
  | |- FiraCode-Regular.ttf

我也尝试在单个元素上调用 font-family ，但它没有用。

从另一个问题可以看出，我在每个 CSS 文件的开头添加了这段代码，但仍然没有运气：

 *= require fonts

手机版和电脑版网站的 CSS 文件不同，但它们位于同一文件夹中，因此字体代码相同。终端 CSS 也是独立的。我正在使用这个 API，所以我在本地下载了 CSS 并修改了其中的字体系列，但没有。

我已经尝试使用 GitHub 字体链接作为字体中的 URL - 我确保它可以工作 - 但它仍然没有工作。

另一个奇怪的事情是，在尝试解决这个问题几个小时后，字体出现在网站上，但没有出现在移动 HTML 上，如果我尝试从另一台计算机加载它，它会显示默认字体。

我已经尝试查看有关该问题的其他几个问题，但没有一个帮助我解决了我的问题。我真的希望任何人都可以帮助我！提前致谢 ：-）

./fonts/FiraCode-Regular.woff2编辑：我通过写而不是弄乱了相关目录../fonts/FiraCode-Regular.woff2，但现在即使使用固定代码，字体仍然不会显示。

编辑二：最后，问题是*= require fonts我添加到每个 CSS 文件开头的代码，如另一个问题的答案所示。我不知道为什么它会阻止加载字体，但也感谢帮助我进行第一次编辑的所有人！如果没有它 100%，它就不会发挥同样的作用。

标签： htmlcssfonts

解决方案

推荐阅读