加载WebFonts异常故障

Question

我正在尝试应用网页字体来改进我的页面。找到我想要的，并上传到我自己的服务器，托管我的项目。这是我的css：

@font-face {
font-family: 'urban';
src: url('/urban-sketch.ttf');

#div {font-family: urban;}

这个目录是热链接的，不是我在这里发布的快捷方式。没有显示，字体根本不加载。这让我觉得ttf本身可能出了问题。接下来我尝试了另一种字体，并应用了相同的代码，但它也不起作用。我搜索了近24小时，最常见的问题是目录。因此，我检查了很多次，以确保目录是正确的。我现在做的最后一件事就是查看字体，上传我的字体，复制它们的样式表，并更正目录，但是仍然没有出现任何内容。我正在3个浏览器上测试，IE，FF和Chrome。我现在已经放弃了，希望有人能发现所做的错事。

下面是当前的字体松鼠代码，我现在正在使用：

    @font-face {
    font-family: 'urban_sketchregular';
    src: url('/urban-webfont.eot');
    src: url('/urban-webfont.eot?#iefix') format('embedded-opentype'),
         url('/urban-webfont.woff2') format('woff2'),
         url('/urban-webfont.woff') format('woff'),
         url('/urban-webfont.ttf') format('truetype'),
         url('/urban-webfont.svg#urban_sketchregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

#div {
border-style: dotted;
margin-bottom:25px;
font-family: urban_sketchregular;
}

Answer 1

1. 尝试验证路径是否正确并且能够通过浏览器访问(复制完整的字体文件路径并尝试从浏览器直接访问它)。
2. 确保您的字体具有正确的内容类型。
3. 使用正确的CSS语法

链接

请注意文件URL后的格式。

Answer 2

现在，试着只使用truetype格式，现在大多数浏览器都可以读取它。尝试以下语法(注意有一个字体文件夹)：

  @font-face {
  font-family: Urban; /* no need for the quotes, it can read it anyway. */
  src: local('Urban Regular'), local('Urban'); 
  /* For local, check how the font is written on the machine --> Right click on file -> Details -> Title */ 
  src: url(/fonts/urban-webfont.ttf) format('truetype'); 
  font-weight: normal;}

希望这能有所帮助。另外，一个好的做法是将@字体置于CSS文件中任何其他代码的前面。