@font-face 在 CSS 中不工作

Question

我在 CSS 代码中使用了这一行：

@font-face {
    font-family: 'myFont';
    src: url('myserver/Fonts/tiza-webfont.ttf');
}

然后是特定标题的这个：

#h1{
  font-family: 'myFont';
}

我尝试了很多字体链接，甚至尝试添加一些自定义链接，例如 "Comic Sans"，但字体没有改变。

我的HTML是：

<head>
<link rel="stylesheet" type="text/css" href="bbb.css">
</head>

<div id="table">
            <ul>
                <li><img id="icons" src="icon.jpg" alt="" /><h1> OPA: <strong> {Query.OPA} </strong></h1></li>
            </ul>
</div>

我检查了控制台，现在一切正常。我也尝试在不同的浏览器上查看网站。

Answer 1

尝试包含 here 中的所有字形。仅包含 ttf 并不适用于所有浏览器。更改您的样式表以反映类似这样的内容，这是标准方式：

@font-face {
    font-family: 'myFont';
    src: url('tiza-webfont.eot');
    src: url('tiza-webfont.eot?#iefix') format('embedded-opentype'),
         url('tiza-webfont.woff') format('woff'),
         url('tiza-webfont.ttf') format('truetype'),
         url('tiza-webfont.svg#TizaRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

并确保将此 CSS 文件添加到与所有字体文件相同的目录中。并在这里使用 CSS 到 link。

所以如果你有字体文件（ttf、svg、woff等）在目录：myserver/Fonts/，那么你需要添加CSS 文件如 tiza.css in myserver/Fonts/tiza.css.

确保以上 CSS 可以通过网络浏览器通过 HTTP 公开访问，例如：

http://mydomain/myserver/Fonts/tiza.css

并将其包含在您的 HTML 中，例如：

<link rel="stylesheet" href="http://mydomain/myserver/Fonts/tiza.css" />

最重要的是，您必须确保清除控制台上的任何 404 或 4xx 错误。像这样的东西使它不起作用：

@font-face 在 CSS 中不工作

@font-face not working in CSS

css

font-face