字体根本不起作用答案

【问题标题】：Font-face not working at all字体根本不起作用
【发布时间】：2016-01-03 15:06:48
【问题描述】：

我已经阅读了很多帖子，并使我的字体代码与其他答案中的相同，但它仍然无法正常工作......

@font-face {
    font-family: 'KlavikaLT';
    src: url('Klavika-Light.otf') format('opentype');
}

@font-face {
    font-family: 'KlavikaLTit';
    src: url('Klavika-LightItalic.otf') format('opentype');
}

@font-face {
    font-family: 'KlavikaBD';
    src: url('Klavika-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'KlavikaBDit';
    src: url('Klavika-BoldItalic.otf') format('opentype');
}

@font-face {
    font-family: 'KlavikaRG';
    src: url('Klavika-Regular.otf') format('opentype');
}

.footerleft
{
    font-family: KlavikaLT;
}

.footerright
{
    font-family: KlavikaBDit;
}

这是我使用的示例代码。字体与样式表文件位于同一文件夹中。我在哪里犯了错误？

编辑 1 这很有趣，因为它在我的本地主机上工作并且所有路径都是正确的。不在我的服务器上工作，但我在我的其他网站上的代码中做了同样的事情，它在那里工作......

【问题讨论】：

检查浏览器开发工具中的网络选项卡，看看加载文件是否出错。
尝试添加 ttf、svg、eot、woff 和 woff2 文件。不要停留在一种类型。如果你的浏览器不支持它，你有问题。
加载字体时出现网络选项卡错误（404），但我检查了路径，它是正确的...不知道为什么它不起作用...

标签： css font-face

【解决方案1】：

'KlavikaLT' 不是像 Courier 这样的标准字体。除非您告诉它，否则您的浏览器不知道该字体是什么。

您可以通过以下几种方式告诉浏览器您的字体：

在你的css顶部发布导入：

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

在您的 CSS 上方使用 HTML 导入：

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

或者使用 JavaScript：

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Open+Sans::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

从Google Fonts复制的示例。

如果您使用托管在您自己的服务器上的自定义字体，则可以使用上述语法，但将网址替换为您自己的。每个都应包含@font-face，如下所示：

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2');
}

【讨论】：

如果字体是自定义字体（非 Google），那么您的答案不适用。
当然可以，只需要编写自己的导入文件。我已将那部分包含在我的答案中。
您只添加了一种格式 - woff - 但 OP 可能使用的是旧版浏览器，他/她需要指定所有兼容格式。看我的回答。
woff 支持除 ie8 之外的所有内容，因此确实没有太多理由证明包含其他内容的合理性。此外，为什么不必要地加载所有这些额外的东西......但如果他需要更多，他可以参考你的答案，看看它是如何完成的。

【解决方案2】：

使用这个语法：

<style>
   @font-face {
       font-family: 'KlavikaLT';
       src: url('KlavikaLT.eot');
       src: url('KlavikaLT.eot?#iefix') format('embedded-opentype'),
            url('KlavikaLT.woff') format('woff'),
            url('KlavikaLT.ttf') format('truetype'),
            url('KlavikaLT.svg#KlavikaLT') format('svg');
       font-weight: normal;
       font-style: normal;
   }
   body { font-family: "KlavikaLT", serif; }
  </style>

确保文件路径正确。

这是@font-face的规范：

@font-face {
    [font-family: <family-name>;]?
    [src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?
    [unicode-range: <urange>#;]?
    [font-variant: <font-variant>;]?
    [font-feature-settings: normal|<feature-tag-value>#;]?
    [font-stretch: <font-stretch>;]?
    [font-weight: <weight>];
    [font-style: <style>];
}

【讨论】：

您确实应该在src 的开头包含local('KlavikaLT'),，这样如果在已经存在字体的页面上使用样式表，您就不会再次重新加载文件。
你有local()声明的参考链接吗？我从未听说过它，我可能会从中受益。
它所做的只是在下载新字体之前检查本地系统的字体。我找不到任何实际文档，但这里有几个链接可能会有所帮助：readableweb.com/mo-bulletproofer-font-face-css-syntax、stackoverflow.com/questions/3698319/…
知道了。我稍后会自己测试。

【解决方案3】：

刚刚添加了更多的字体扩展名，例如 .ttf 和 .woff。现在它工作得很好，但不知道为什么 .otf 根本不起作用。干杯！

@font-face
{
    font-family: KlavikaLT;
    src: url('fonts/KlavikaLT.otf') format('opentype'),
         url('fonts/KlavikaLT.ttf') format('truetype'),
         url('fonts/KlavikaLT.woff') format('woff');
}

【讨论】：