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") ，例如Br​​andon Grotesque。

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中的呈现方式有所不同，并且在chrome下Windows中的字体可能看起来不如macos / linux中的那样吸引人。