我似乎无法使用@font-face 让我的字体家族工作

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

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

Answer 2

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

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

所以我的建议是使用众多可用的在线转换工具之一将您的网络字体转换为 woff 格式。 FontSquirrel is one such online site which has been used and recommended by a lot of people. Now you can use just the one font type (.woff) or you can add multiple font types to your @font-face rule like it is referenced 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 规则中提到的字体文件路径是“../fonts/filename.filetype”。所以字体文件的路径很重要。

即使在那之后，如果您发现您的字体文件没有加载，请检查服务器是否有适当的访问权限来提供字体文件。我的意思是，如果服务器获得字体文件类型，那么它就知道如何处理该特定字体类型。现在，如果您有跨域字体请求（使用 CDN），那么一些浏览器会抱怨并停止工作。你会发现 this reference 非常好理解和得心应手。

希望我已经为您阐明了这个主题。 快乐编码:)

更新::

也请参考的想法

我似乎无法使用@font-face 让我的字体家族工作

I can't seem to get my font-family to work using @font-face

css

font-face