Question

想要为网站添加字体。

CSS文件：

@font-face {
    font-family: smFont;
    src: url(optima-regular-webfont.woff);

}

.smFont {
    font-family: smFont;
}

HTML文件：

About <strong class="smFont">The Company</strong>

我有上述但字体不对。我的代码错了吗？

Answer 1

当您想要添加自己的字体而不是普通系统字体时，您必须使用@ font-face对字体进行防弹。你已经开始做正确的道路了。但是你还必须为各种浏览器集成包括不同的字体字体类型，例如chrome，safari，FF等。不同的字体类型包括woff，ttf，eot，svg等。

你可以参考this link，这是Paul Irish的精彩文章。这解释了定义网页字体类型的过程。

现在，在加载字体时遇到麻烦的另一个原因是字体文件本身没有正确加载。当为字体文件提供的源URL不正确时，会发生这种情况。

在您的情况下，src: url(optima-regular-webfont.woff);代码行指示服务器在与加载页面文件（html）相同的栏中查找字体文件。检查是否适合您。

希望这有帮助。

修改:::

在您的一条评论中，您已经提供了托管网站的链接。控制台给我这个错误..

Failed to load resource: the server responded with a status of 404 (Not Found) http://sarahmyra.com/beta2/css/optima-regular-webfont.woff Failed to load resource: the server responded with a status of 404 (Not Found) http://sarahmyra.com/beta2/css/Optima_Medium.ttf

现在请检查字体文件的路径。

Answer 2

通常使用WOFF文件，这是因为您的服务器未设置为服务它们。

您可能需要添加MIME类型：

应用/字体WOFF

您正在使用的任何服务器（IIS，Apache等）。

对于您正在使用的Apache，您需要将此行添加到.htaccess文件中：

AddType application/font-woff            .woff

Answer 3

确保您的路径正确，如果您在访问网站时查看控制台，则可以看到对字体文件的失败请求。

当它们位于父目录中时，它目前正在针对它们的/ css /目录。因此，只需将CSS更改为以下内容即可解决问题。

@font-face {
    font-family: smFont;
    src: url("../optima-regular-webfont.woff");
}

如何向网站添加字体

3 个答案: