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

Question

所以我有一个 HTML 页面，linked 到一个 CSS 文件，该文件应该更改 div class 的字体header，更改为名为 KeepCalm 的自定义字体。这是定义 font-face:

的代码

@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');
}

这是更改 header div class 的 font-face 的代码：

.header {
    font-family: KeepCalm;
}

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

这是我使用的字体 link：Here.

Answer 1

首先你的src格式不正确尝试用这个

来改变它

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

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

Answer 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，并且有效。

Answer 3

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

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

Using custom @font-face in CSS is not working in any browser

html

css

fonts

font-face