@font-face 不适用于特定字体

Question

所以我无法让@font-face 使用特定字体。是因为字体文件还是我做错了什么？

网站链接：http://carlpapworth.com/friday-quiz/

字体文件的路径：ftp://ftp.carlpapworth.com//friday-quiz/fonts/Lobster_1.3.otf css：

@font-face {
font-family: lobster;
font-weight: 100;
font-style: normal;
src: url('fonts/Lobster_1.3.otf');
}

如您所见，我调用的其他字体工作正常。 为任何帮助而欢呼。 C.

Answer 1

提到的页面由 Firefox 显示，没有任何 @font-face 字体。网络日志甚至没有显示任何获取字体的尝试。查看 Firefox 错误控制台（或使用 W3C CSS Validator）发现 at-rules 格式错误：它们以

开头

@font-face {

所以它们被忽略了。奇怪的Â 可能是由于某些字符编码出错造成的，但无论如何解决这个问题应该是第一步。如果问题仍然存在，请尝试发布仍然出现问题的最简单的文档。另请注意，IE 不支持 .otf 格式，也不是 Web 的最佳字体格式；考虑将FontSquirrel @font-face generator 用于跨浏览器功能。

Answer 2

试试这个：

@font-face {
    font-family: 'lobster';
    src: url("fonts/lobster.woff") format("woff"),
         url("fonts/lobster.ttf") format("truetype"),
         url("fonts/lobster.svg#webfontszsn4DPI") format("svg");
    font-weight: normal;
    font-style: normal;
}