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

Question

我在本地开发网站，因此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都在网络窗口中加载，但字体未显示。我已经检查了应该使用Open Sans字体的console 元素窗口中的元素，并且在样式面板中显示了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>

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

有人能让我知道我做错了什么以及如何解决这个问题？感谢。

Answer 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行才能确保兼容性。

总结一张图片：

Answer 2

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

WebFont Generator at Fontsquirrel

Answer 3

尝试添加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>

享受您的代码！