Question

您好我从网上下载了一个字体，并尝试使用@font-face在CSS中修改它，但它不起作用。我正在使用Netbeans IDE 8.0.2，该文件位于我的字体文件夹中。

@font-face {
    font-family: MINISTRY;
    src: url(fonts/MINISTRY.otf);
    src: local("MINISTRY"), local("MINISTRY"), url(MINISTRY.otf)  format("opentype");
}

Answer 1

好的，让我重复我在评论部分提到的内容。

根据here和here找到的文章，.otf字体类型的浏览器支持至少可以说是不完整的。根据最新的W3C规范，.woff字体类型在所有现代浏览器中都得到了最好的支持。

所以我的建议是使用众多在线转换工具之一将您的网络字体转换为woff格式。 FontSquirrel就是这样一个在线网站，很多人都在使用和推荐。现在您只能使用一种字体类型（.woff），或者您可以为@font-face规则添加多种字体类型，例如Paul Irish引用here in this article。虽然我应该提到这篇文章差不多有5到6年的历史，并且与当前时代并不完全相关。

现在要说，确保正确引用了字体文件的路径。我的意思是，如果您的文件结构类似于此类，

root Folder
    |
    |-- css folder
    |       |-- .css file
    |-- Font folder
    |       |-- .otf font file
    |       |-- .woff font file
    |       |-- .svg font file
    |-- Html files folder
    |       |-- .html file(s)

现在，在此示例中，@font-face规则中提到的字体文件路径为＆＃34; ../fonts/filename.filetype＆＃34;。所以字体文件的路径很重要。

现在，即使您发现未加载字体文件，也要检查服务器是否具有提供字体文件的正确访问权限。我的意思是，如果服务器获得字体文件类型，那么它知道如何处理该特定字体类型。现在，如果你有一个跨域字体请求（使用CDN），那么一些浏览器会抱怨并退出工作。你会发现this reference非常有用，可以理解和使用。

希望我已经为你阐明了这个问题。 快乐编码：）

<强> UPDATE ::

还可以参考this SO question了解

Answer 2

签出http://www.fontsquirrel.com/tools/webfont-generator他们允许您上传字体，然后下载所有必需的字体格式以及示例文件。

我似乎无法使用@ font-face让我的font-family工作

2 个答案: