css - CSS字体不会加载

Question

我正在尝试加载日记字体，但无论出于什么奇怪的原因，它都不会加载。

@font-face {  
  font-family: Brandon Grotesque;  
  src: url(/addons/shared_addons/themes/axium/fonts/brandon-grotesque.ttf) format("truetype");
}

@font-face {  
  font-family: Journal;  
  src: url(/addons/shared_addons/themes/axium/fonts/journal.ttf) format("ttf");
}

body {
  font-family: Journal;
}

Brandon Grotesque 有效，但 Journal 无效

我从：http ://www.dafont.com/journal.font 下载的

有什么帮助吗？

Answer 1

最后的格式标识符错误：

format("ttf");

应该是format("truetype")，像布兰登怪诞。

Answer 2

首先，将 ttf 更改为 truetype：

src: url(/addons/shared_addons/themes/axium/fonts/brandon-grotesque.ttf) format("truetype");

然后，通过检查开发人员工具（chrome 中的 f12）确保它在正确的位置

更重要的是，你要知道并不是每个浏览器都支持ttf格式，你可以在这里查看： http: //caniuse.com/ttf

此外，您需要知道字体在 windows、macos/linux 中的呈现方式不同，并且字体在 windows 下的 chrome 中可能不像在 macos/linux 中那样吸引人