如何将字体添加到网站

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) 的位置相同的位置查找字体文件。检查您是否属于这种情况。

希望对您有所帮助。

编辑:::

在您的一条评论中，您给出了 link 站点的托管位置。控制台给我这个错误..

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 类型：

application/font-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");
}

如何将字体添加到网站

How to Add Fonts to a Website

html

css

webfonts