在 CSS 中使用自定义 @font-face 在任何浏览器中都不起作用答案

【问题标题】：Using custom @font-face in CSS is not working in any browser在 CSS 中使用自定义 @font-face 在任何浏览器中都不起作用
【发布时间】：2016-09-07 14:28:04
【问题描述】：

所以我有一个 HTML 页面，链接到一个 CSS 文件，该文件应该将名为 header 的 div 类的字体更改为名为 KeepCalm 的自定义字体。下面是定义字体的代码：

@font-face {
  font-family: 'KeepCalm';
  src: url('Files\Fonts\KeepCalm.eot?') format('eot'), url('Files\Fonts\KeepCalm.woff') format('woff'), url('Files\Fonts\KeepCalm.ttf') format('truetype');
}

以下是更改标题 div 类的字体的代码：

.header {
    font-family: KeepCalm;
}

但是，我尝试使用的任何浏览器（chrome、firefox 或 IE）中都没有显示字体。我已经查找了如何修复它，但尚未找到解决方案。

这是我正在使用的字体的链接：Here.

【问题讨论】：

检查您的字体是否正在下载。你的路径可能是错误的。 stackoverflow.com/questions/18900720/…
@EduardoArrudaPimentel 我已经三次检查了路径，但我不确定你检查它是否已下载是什么意思；我正在使用一个本地文件，保存在一个名为 ...\Files\Fonts 的子文件夹中
@AndréDion：这似乎就是答案。
@AndréDion 调试器确实说可下载字体下载失败。你能把我链接到一个教程或其他东西来设置一个网络服务器吗？它会收费吗？对不起，我不是很有经验。
@TacoMakerMan 你可以在你的机器上运行一个网络服务器并在那里提供你的文件，你不需要为外部主机付费。只需谷歌“网络服务器”，您就会获得大量信息。

标签： html css fonts font-face

【解决方案1】：

首先你的src 没有正确格式化尝试用这个来改变它

src: url('/Files/Fonts/KeepCalm.eot?')

注意：始终练习使用相对路径

【讨论】：

我不确定这会发生什么变化，我试过了，但没有任何新变化。您只是在开头添加了一个“/”吧？
没有你的斜线被反转了看看它一定是一个普通的斜线而不是一个反斜线
@winresh14 哦，我明白了。我用常规斜线替换它们，它没有改变任何东西。
检查文件是否存在。您的网站已经上线了吗？
@winresh14 该文件肯定存在，目前还没有，目前只是一个 .html 文件。

【解决方案2】：

假设你的文件夹是这样的：

|-- index.html
|--|Files
   |--|Fonts
      |-- KeepCalm-Medium.eot (Created by http://transfonter.org/)
      |-- KeepCalm-Medium.woff (Created by http://transfonter.org/)
      |-- KeepCalm-Medium.woff2 (Created by http://transfonter.org/)
      |-- KeepCalm-Medium.ttf (Original File)

我创建了这个 html 代码：

<html>
    <head>
        <meta charset="utf-8">
        <title>Stack Overflow Test</title>
        <style type="text/css" media="screen">
            @font-face {
              font-family: 'KeepCalm';
              src:  
                    url('Files/Fonts/KeepCalm-Medium.eot?') format('embedded-opentype'),
                    url('Files/Fonts/KeepCalm-Medium.woff') format('woff'),
                    url('Files/Fonts/KeepCalm-Medium.woff2') format('woff2'),
                    url('Files/Fonts/KeepCalm-Medium.ttf') format('truetype');
            }
            .header {
                font-family: KeepCalm;
            }
        </style>
    </head>
    <body>

    <div class="header">
        Keep Calm
    </div>


    </body>
</html>

而且它有效。如果您有相同的文件夹来假设和命名正确的字体文件，它将起作用。而且您不需要网络服务器。简单的 html，并且有效。

【讨论】：

好的，所以我将 font-face 部分更改为您建议的方式，并将单引号添加到 font-family。它没有做任何事情，所以我也尝试使用您的测试，但他们也没有做任何事情。我不知道为什么。
您可以在公共链接中上传您的字体吗？我会下载它并检查代码。
我添加了指向主要问题的链接供您查看。我将 ttf 文件转换为我使用的所有其他文件格式。

【解决方案3】：

原来我使用“Files\Fonts\”作为字体的路径，虽然因为它是我使用的css文件，它已经在“Files”文件夹中，所以我只需要它更改为“字体\KeepCalm.tff”。愚蠢的错误，但很容易错过。

【讨论】：