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

Posted 2023-02-27

【中文标题】@font-face 不适用于特定字体

【英文标题】：@font-face not working with specific font

【发布时间】：2013-03-02 13:29:13

【问题描述】：

所以我无法让@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.

【参考方案1】：

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

开头

@font-face 

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

【讨论】：

嗯，我的另外两种字体在@font-face 上工作得很好，而且代码是一样的......所以这一切都很奇怪

您确定要测试您提到的页面carlpapworth.com/friday-quiz 吗？在哪些浏览器上？

【参考方案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;

【讨论】：

即使它是一个 .otf？

好吧，我的意思是，您可能应该提供不止一种类型，以使其适用于所有浏览器。