html - 谷歌字体未在 Chrome 中显示

Question

我有一个很奇怪的问题。

我在我的网站上使用谷歌字体。一切都在 Firefox、Internet Explorer 甚至 Opera 中正确显示。

但在 Google Chrome 中，显示的是字体“Comic sans MS”。

在此屏幕截图中，您可以看到 firefox 和 chrome 显示相同的页面。该字体在 Firefox(左)中工作，但在 Chrome(右)中出现错误 http://gyazo.com/43462de300f4fb358cdf22c77e1955cd

您可以在此处查看该页面: https://www.no-gods-no-masters.com/A-12443978/t-shirt-liberation-animale-vegetarien-vegan-ALF-animal-liberation-front

请注意，我还在 float 导航栏(顶部)上使用了另一种谷歌字体 (Doppio One)。这个在 Chrome 中工作

字体加载到这里:

    @font-face {
    font-family: 'goboldregular';
    src: url('https://no-gods-no-masters.com/scripts/fonts/gobold-webfont.eot');
    src: url('https://no-gods-no-masters.com/scripts/fonts/gobold-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://no-gods-no-masters.com/scripts/fonts/gobold-webfont.woff') format('woff'),
         url('https://no-gods-no-masters.com/scripts/fonts/gobold-webfont.ttf') format('truetype'),
         url('https://no-gods-no-masters.com/scripts/fonts/gobold-webfont.svg#goboldregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Answer 1

您的第一个问题是在@font-face 中您的字体系列是'goboldregular' 并且在您的h2 header 上您将字体系列设置为'gobold', cursive(cursive 正在制作后备字体MS Windows 上的 comic sans)。您在样式中引用的字体系列名称应与您在字体声明中设置的名称相同。因此，对于问题的第一部分，您应该将 header 标签上的内联样式更改为具有 font-family: 'goboldregular', cursive。

第二个问题是，当我进行上述详细更改时，出现以下控制台错误:

Redirect at origin 'https://no-gods-no-masters.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.no-gods-no-masters.com' is therefore not allowed access.

这意味着您的字体没有设置“Access-Control-Allow-Origin”。这可以通过添加以下代码片段来编辑您的 .htaccess 文件(如果您使用的是 Apache 服务器)或 httpd.conf(如果您使用的是 ngix)来解决:

# Apache config
<FilesMatch ".(eot|ttf|otf|woff)">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

# nginx config
if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
    add_header Access-Control-Allow-Origin *;
}