Question

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

@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）。
我曾尝试在其他文件夹中复制字体文件并使用相对网址。
如果我删除@ font-face规则，安装字体，只使用本地参考，它显示正常，如果我使用Google webfont参考，它也可以。

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

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

编辑2：感谢Dima的anwser，我已经解决了这个问题，但我对此并不了解。

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

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

Answer 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

Answer 2

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

要使用它，请打开您的TTF文件，然后查看字体名称，如果它显示Cabin，那么，font-family: 'Cabin';

@ font-face无法使用chrome

2 个答案: