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")，就像Brandon 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中字体的呈现方式不同，并且在windows下的chrome中字体可能看起来不像在macos / linux中那样吸引人