在CSS中使用自定义@ font-face无法在任何浏览器中使用

Question

So I have a HTML page, linked to a CSS file which is supposed to change the font of a div class called header, to a custom font named KeepCalm. 所以我有一个HTML页面，链接到一个CSS文件，该文件应该将名为header的div类的字体更改为名为KeepCalm的自定义字体。 Here's the code for defining the font-face: 这是定义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');
}

Here is the code to change the font-face of the header div class: 以下是更改标题div类的font-face的代码：

.header {
    font-family: KeepCalm;
}

However the fonts are not showing up in any browser I try, chrome, firefox or IE. 但是，我尝试的任何浏览器，chrome，firefox或IE中都没有显示字体。 I have already looked up how to fix it and have not yet found a solution. 我已经查找了如何解决它并且还没有找到解决方案。

Here is the link to the font I'm using: Here. 这是我正在使用的字体的链接：这里。

Answer 1

Supposing that your folders are like this: 假设您的文件夹是这样的：

|-- 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)

I created this html code: 我创建了这个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>

And it works. 它有效。 If you have the same folders that supposed and named correct the font files it will work. 如果您拥有相同的文件夹，并且命名正确，那么它将起作用。 And you do not need a webserver. 而且您不需要网络服务器。 Simple html, and works. 简单的HTML，并且有效。

Answer 2

First your src is not formatted right try to change it with this 首先你的src没有格式化，试着改变它

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

Note: always practice to use relative paths 注意：始终练习使用相对路径

Answer 3

It turns out that I was using the "Files\\Fonts\\" as the path of the font, although since it was the css file I was using, it was already in the "Files" folder so I just needed it to change to "Fonts\\KeepCalm.tff". 事实证明我使用“Files \\ Fonts \\”作为字体的路径，虽然因为它是我使用的css文件，它已经在“Files”文件夹中，所以我只需要它改为“字体\\ KeepCalm.tff”。 Stupid mistake but it's easy to miss. 愚蠢的错误，但很容易错过。

在CSS中使用自定义@ font-face无法在任何浏览器中使用

问题描述

3 个解决方案

解决方案1
2 2016-05-12 18:10:38

解决方案2
1 2016-05-12 01:43:25

解决方案3
0 已采纳 2016-05-17 14:05:26

在CSS中使用自定义@ font-face无法在任何浏览器中使用

问题描述

3 个解决方案

解决方案1 2 2016-05-12 18:10:38

解决方案2 1 2016-05-12 01:43:25

解决方案3 0 已采纳 2016-05-17 14:05:26

解决方案1
2 2016-05-12 18:10:38

解决方案2
1 2016-05-12 01:43:25

解决方案3
0 已采纳 2016-05-17 14:05:26