Question

我有一个非常奇怪的问题。

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

但在谷歌浏览器中，字体＆＃34; Comic sans MS＆＃34;而是显示。

在此屏幕截图中，您可以看到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

请注意，我还在浮动导航栏（顶部）上使用其他谷歌字体（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中你的font-family是'goboldregular'而在你的h2标题上你将font-family设置为'gobold', cursive（草书在MS Windows上制作后备字体漫画sans）。您在样式中引用的字体系列名称应与您在font-face声明中设置的名称相同。因此，对于问题的第一部分，您应该更改标题标记上的内嵌样式，以便font-family: 'goboldregular', cursive。

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

原点“https://no-gods-no-masters.com”的重定向已被阻止从跨源资源共享政策加载：否请求中存在“Access-Control-Allow-Origin”标头资源。原因'https://www.no-gods-no-masters.com'因此不是允许访问。

这意味着您的字体没有设置“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 *;
}

Answer 2

Chrome检查器会显示此元素的内联：

element.style {
  text-align: left;
  font-family: 'Gobold', cursive;
  text-shadow: 2px 2px 4px #AAA;
  font-size: 26px;
  padding-left: 5px;
  color: #000;
}

但该字体未加载

<link href='https://fonts.googleapis.com/css?family=Aldrich|Doppio+One|Lemon|Candal' rel='stylesheet' type='text/css'>

你看到的字体不是漫画sans，它是浏览器的默认草书。

我无法在CSS中看到此元素/类的另一个字体加载，无论内联样式始终是级联中的最后一个。除非你用CSS中的！important覆盖它。

您应该在这里发布一些代码，以便我们可以看到您正在使用的更多内容。

Answer 3

像TeoDragovic说的那样：

您有跨域政策问题。但我认为，您有从非www域no-gods-no-masters.com到域www.no-gods-no-masters.com的重定向。这也适用于位于no-www域的字体文件。

只需将www添加到@font-face声明

即可

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

}

谷歌字体未在Chrome中显示

3 个答案: