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

bkhjykvo 于 2022-12-15 发布在其他

关注(0)|答案(3)|浏览(142)

我有一个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.

css

来源：https://stackoverflow.com/questions/37175309/using-custom-font-face-in-css-is-not-working-in-any-browser

3条答案

按热度按时间

o2rvlv0m1#

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

|-- 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，和工程。

赞(0）回复(0）举报 2022-12-15

dhxwm5r42#

首先，您的src不正确，请尝试如下更改：