@font-face 在 chrome 中不起作用答案

【问题标题】：@font-face not working in chrome@font-face 在 chrome 中不起作用
【发布时间】：2014-05-19 01:21:52
【问题描述】：

几个月后，我终于继续从事我的爱好项目。我在年初遇到了一些计算机问题，不得不重新安装 Windows，丢失了数据库，但可以检索脚本。据我所知，一切都和以前完全一样，除了绝对网址。我纯粹在本地主机上工作。在我停止工作之前，我确信在所有主要浏览器中一切正常，除非我记错了。为了让它工作，我简化了代码/文件名：

@font-face
{
  font-family: "cabin" ;
  src: url("http://localhost/hrhr/fonts/cabin.ttf");
}

*
{
  margin: 0px;
  padding: 0px;
  border: 0px;
  font-family: "cabin";
}

一些备注：

如前所述，它在 Chrome (33) 中不起作用，在 Opera (20) 中也不起作用。
它可以在 Internet Explorer (11) 中运行。它已经在不简化代码和文件名的情况下工作。
如前所述，我很确定几个月前一切正常，除了绝对网址和浏览器版本之外，没有任何变化。
正如来自类似问题的 anwser 所建议的那样，我尝试添加格式，但这没有帮助。
我尝试过引用的变体。
它通常不会显示在资源下的 Chrome 开发人员工具中。奇怪的是有时会出现（在尝试了代码的变体之后），当这种情况发生时，它会正确显示名称，但示例字体是错误的（可能是 Times New Roman）。
我尝试将字体文件复制到其他文件夹并使用相对 url。
如果我删除 @font-face 规则、安装字体并仅使用本地参考，它显示正常，如果我使用 Google webfont 参考，它也可以工作。

我认为我严重忽略了一些东西，但谷歌搜索并没有帮助我，而且我觉得奇怪的是 IE 对我的代码没有任何问题。提前致谢。

编辑：字体可以在这里找到： http://www.impallari.com/cabin

编辑 2：感谢 Dima 的 anwser，我已经解决了这个问题，但我还没有更接近于理解它。

我使用了网站提供给我的字体和脚本，就像我说的那样，这很有效，然后我一步一步地删除了元素，使它越来越像原来的情况，直到它再次停止工作。所以基本上，我可以让它与我的脚本和“转换”的 ttf 文件一起工作，所以问题似乎是原始 ttf 文件本身固有的。脚本、文件路径或跨浏览器兼容性都不是问题。转换后，Chrome 没有任何问题。但我不知道技术上的区别是什么。

明天我会看看我是否可以找到一个字体查看器，看看我是否能找到差异。我也可以邮寄字体的创建者（询问他是否知道它有问题），我想知道其他人是否对字体“按原样”有问题，所以不要转换它。除非有人给我一个技术解释，否则我会接受 Dima 的 anwser 并且只会学习“转换”字体。

【问题讨论】：

标签： css google-chrome font-face

【解决方案1】：

尝试像这样使用它：

 @font-face {
  font-family: 'Cabin';
  src: url("/fonts/cabin.eot");
  src: url("/fonts/cabin.eot?#iefix") format("embedded-opentype"), url("/portals/0/fonts/cabin.woff") format("woff"), url("/fonts/cabin.ttf") format("truetype"), url("/fonts/cabin.svg#cabin") format("svg");
  font-weight: normal;
  font-style: normal; 
}

这将确保所有浏览器都被覆盖...您最好的选择是将.ttf 字体上传到网络字体生成器，如this one 或this one，然后它将生成不同格式的网络字体，然后您'将能够下载它......它还将包括它的 CSS，这将类似于我上面显示的那个

编辑：回答您关于为什么会这样的问题，没有正确或错误的答案，就是这样。不同的浏览器支持不同的字体格式。您可以阅读其中的一些内容here

【讨论】：

我检查了您的链接，它说字体已损坏。我已经从它的源（我将在原始帖子中添加）重新下载了字体，但它仍然说它已损坏。但是，当我安装字体（完全相同的文件）并使用本地引用（所以没有@font-face 规则）时，字体在 Chrome 中工作正常，所以我怀疑是否有任何损坏是导致此问题的原因？
是的，有时会发生......只需使用另一个网络字体生成器工具......有很多，这个只是最受欢迎的
我使用了everythingfonts.com/font-face，它对我有用。它解决了这个问题，但是我并没有更接近理解它。我会更新原来的帖子。
不，就像我在编辑中添加的那样：它与浏览器兼容性无关。 ttf 是最广泛支持的字体格式之一，转换后字体可以正常工作。几个月前它也可以工作，就像我说的那样，几个月前在所有主要浏览器中使用相同的字体，使用相同的代码。所以我想知道转换对 ttf 文件做了什么，我想知道在这几个月里发生了什么改变了行为。字体规格是否更新？ CSS 规范是否更新？新的浏览器版本是否有不同的解释？
没有。我会弄乱一些其他字体，与此同时，我已经接受了你的 awswer。

【解决方案2】：

你甚至可以使用@import url('fonts/cabin.ttf');

要使用它，请打开您的 TTF 文件，查看字体名称，如果是 Cabin，则为 font-family: 'Cabin';

【讨论】：