Question

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

.header {
    font-family: KeepCalm;
}

以下是更改标题div类的font-face的代码：

from sklearn.ensemble import RandomForestClassifier

clf = RandomForestClassifier(n_estimators=100)
# Training data features, skip the first column 'Crime Category'
train_features = train[:, 1:]

# 'Crime Category' column values
train_target = train[:, 0]

clf = clf.fit(train_features, train_target)
score = clf.score(train_features, train_target)
"Mean accuracy of Random Forest: {0}".format(score)

然而，在我尝试的任何浏览器，chrome，firefox或IE中都没有显示字体。我已经查找了如何修复它并且还没有找到解决方案。

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

Answer 1

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

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

首先，您的src格式不正确，请尝试使用此

进行更改

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

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

Answer 3

事实证明我正在使用＆＃34; Files \ Fonts \＆＃34;作为字体的路径，虽然因为它是我使用的css文件，它已经在＆＃34; Files＆＃34;文件夹，所以我只需要它改为＆＃34;字体\ KeepCalm.tff＆＃34;。愚蠢的错误，但很容易错过。

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

3 个答案: