@font-face 没有在网页上加载字体答案

【问题标题】：@font-face not loading fonts on webpages@font-face 没有在网页上加载字体
【发布时间】：2014-11-19 13:28:04
【问题描述】：

我正在本地开发一个网站，因此我在 Windows 8 上的 WAMP 服务器正在提供这些页面。该站点将托管在安全服务器上，因此出于安全原因，我不能在源代码中使用fonts.google.com CDN。我想使用 @font-face 指令将字体嵌入到 .css 文件中，但字体无法在任何浏览器中正确显示。如果我包含托管 CDN 链接，将显示字体。我已经阅读了几篇关于 SO 的帖子，但我没有阅读过任何一篇回答我的特定问题的帖子。以下是我的代码以及我为解决此问题所采取的步骤：

在 main.css

中定义

@font-face {
  font-family: 'Open Sans', sans-serif;
  src: url('../csfonts/OpenSans.ttf') format('truetype'); 
}

@font-face {
  font-family: 'Lato', sans-serif;
  src: url('../csfonts/Lato.ttf') format('truetype'); 
}

在 custom.css 文件中的 CSS 中使用

    body {
      font-family: 'Open Sans', sans-serif;
}

在 Chrome 控制台中，main.css 和 custom.css 都在 Network 窗口中加载，但字体未显示。我检查了console Elements 窗口中应该使用 Open Sans 字体的元素，在 Styles 面板中显示 Open Sans 字体是覆盖helvetica 字体。然而，字体看起来像Helvetica，而不是 Open Sans。我还检查了我的 HTML 中链接文件的cascade 顺序以及它们的路径，main.css 是页面上最后一个链接样式表（在custom.css 下方），所以main.css 应该优先正确的？

我还检查了this SO thread，认为我可能必须create and edit an .htaccess file（youtube 视频），我做到了。在httpd.conf文件中找到了如下指令，但是我还没有修改过，也不知道要修改什么才能看懂。

#
# The following lines prevent .htaccess and .htpasswd files from being 
# viewed by Web clients. 
#
<Files ".ht*">
    Require all denied
</Files>

在我创建的 .htaccess 文件中，我放置了以下内容 (taken from this SO thread)：

<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

我将此文件保存在WAMP 上的www 文件夹中。然后我从我的页面中删除了 CDN 链接，并刷新了浏览器。字体仍然不显示。它似乎默认为 helvetica 或一些无衬线字体。

谁能告诉我我做错了什么以及如何解决这个问题？谢谢。

【问题讨论】：

标签： html css .htaccess wamp font-face

【解决方案1】：

您应该加载字体的每种格式，以确保您的自定义字体适用于每个浏览器，如下所示：

@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: 'Open Sans';
    src: url('../csfonts/OpenSans.eot'); /* for IE6 and before */
    src: url('../csfonts/OpenSans.eot?#iefix') format('embedded-opentype'), /* for IE7 and IE8 */
         url('../csfonts/OpenSans.woff') format('woff'), /* for every decent browser (yes, IE9 included) */
         url('../csfonts/OpenSans.otf') format('opentype'), /* for every decent browser but in older versions (FF3, Chrome4, etc.) */
         url('../csfonts/OpenSans.svg') format('svg'); /* for iOS */
}

调用顺序很重要！长话短说：当浏览器找到它理解的一行时，它会加载字体并停止读取你的规则调用。而且因为有很多浏览器和版本，你至少需要 5 行代码来保证兼容性。

在一张图片中总结：

【讨论】：

谢谢。我认为它应该是这样的。在Google Fonts 上，当您选择“添加到集合”时，不会生成您列出的代码行——只有一个链接和 CSS 规则，没有 @font-face 指令，只有 .ttf 类型。下载的压缩包包含：OpenSans-Bold.ttfOpenSans-BoldItalic.ttfOpenSans-ExtraBold.ttfOpenSans-ExtraBoldItalic.ttfOpenSans-Italic.ttfOpenSans-Light.ttfOpenSans-Regular.ttfOpenSans-SemiBold.ttfOpenSans-SemiboldItalic.ttf你列出的代码是从哪里生成的？
下载 zip 仅包含 ttf 字体，因为您应该安装它们。你对CSS Tricks上的font-face规则有一个很好的解释
谢谢。是的，我已经在本地安装了字体。它们位于我用来定义规则的csfonts 路径中。在我在这里发布之前，我还阅读了关于 CSS 技巧的那篇文章。这篇文章没有告诉我如何获取您发布的代码。我按照使用说明从google fonts 获得了字体。这些字体是.ttf 类型。我不是要重复自己，但是根据您上面的代码，您使用什么来生成该代码？我无法想象我应该手动将.ttf 文件类型更改为.otf、.woff、.eot 和.svg？谢谢。
好吧，代码不是从任何地方“生成”的，我写的。如果您拥有的唯一格式是ttf，那么您应该从众多在线服务之一转换字体（只是谷歌“转换字体”，我不知道一个是否比另一个更好）
我确定你看到我昨天已经回答了我的问题并找到了一个生成器。请看我上面的回答。谢谢。

【解决方案2】：

尝试添加 jquery 和这段代码来强制字体（当然你需要连接到互联网）：

<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script type="text/javascript"> 
    jQuery(window).ready(function(){
        WebFont.load({
          custom: {
            families: ['Open Sans'],
          }
        });
    });
</script>

享受您的代码！

【讨论】：

【解决方案3】：

经过更多谷歌搜索，我找到了我正在寻找的答案。如果其他人有兴趣，我会在这里发布。在先进行大量研究后，我向 SO 发帖寻求答案。有很多关于这个主题的帖子，但是，我读到的没有一个回答我的问题——我在输入标题并阅读它们时点击了很多链接。以下是我正在寻找的easy解决方案。生成并打包为 .zip 文件的 webkit 包含字体以及有关如何在您的网站上安装、配置和运行它们的所有说明。希望这对其他人有帮助。它帮助了我。我们曾经都是新手，或者可能已经忘记了如何做某事。干杯。

WebFont Generator at Fontsquirrel

【讨论】：