Google字体无法在Google Chrome上呈现

Question 1

我正在建立一个新的WordPress主题（不知道是否相关），并且这个问题一直困扰着我。

我已经从Google Webfonts（包括CSS<head>部分）中加载了Roboto Slab 。在其他所有浏览器上，除了Google Chrome之外，字体都可以正常显示。当我第一次在Google Chrome浏览器中加载网站时，使用该自定义字体的文本根本不会显示（即使字体库将佐治亚州作为后备- "Roboto Slab", Georgia, serif;）。将鼠标悬停在样式链接上或在Inspector中重新触发任何CSS属性后，文本将变为可见。

自从我在一段时间前启动主题以来，我可以清楚地记得它以前运行得很好。这是一些已知的最近的Chrome更新错误吗？

首次加载：

重新应用任何CSS属性后，进入响应视图或将元素悬停：

有人有类似的问题吗？我应该如何进行呢？

谢谢！

Question 2

显然，这是一个已知的Chrome错误。有一个仅css的解决方法可以解决此问题：

body {
    -webkit-animation-delay: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to   { opacity: 1; }
}

似乎只需要告诉Chrome重新粉刷文字

Question 3

如果CSS修复不适用于您

如果第一个额定职位不起作用，请采取以下解决方案：

在以下位置删除“ http：”：

<link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'>

要么

@import url(http://fonts.googleapis.com/css?family=Alfa+Slab+One);

正如David Bain解释的那样，大多数现代浏览器实际上并不需要您指定协议，它们会根据您调用该协议的上下文来“推论”该协议。

Question 4

CSS修复对我不起作用，而且0.5秒的延迟脚本似乎很尴尬。

这个JS片段似乎对我们有用：

<script type="text/javascript">
jQuery(function($) {
    if (/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) {
        $('body').css('opacity', '1.0') 
    }
})
</script>

Question 5

仅在上面尝试过css修复，但没有成功。最后通过创建包含以下内容的样式表（chrome.css）来解决：

body {
 -webkit-animation-delay: 0.1s;
 -webkit-animation-name: fontfix;
 -webkit-animation-duration: 0.1s;
 -webkit-animation-iteration-count: 1;
 -webkit-animation-timing-function: linear;
}

@@-webkit-keyframes fontfix {
 from { opacity: 1; }
 to   { opacity: 1; }
}

并在页面底部用jquery加载它：

<script type="text/javascript">
   $(document).ready(function () {
      $('head').append('<link href="https://stackoverflow.com/chrome.css" rel="stylesheet" />');
   });
</script>

Question 6

我已经合并了上述CSS ...但我还在标头中包含以下javascript：

（请注意，我知道我尚未在下面的代码中自定义字体。但是无论如何，它似乎仍然有助于强制Chrome重新绘制页面上的字体……只要确保在其他地方正确引用了字体即可）

如果将上述CSS与我的...中包含的以下代码结合使用，最糟糕的是，一秒钟左右的延迟后，页面上的所有字体都会显示出来。

希望这对人们有所帮助。干杯。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">

 $(function() { $('body').hide().show(); });
</script>


<script type="text/javascript">

//JavaScript goes here


WebFontConfig = {
  google: { families: ['FontOne', 'FontTwo'] },
    fontinactive: function (fontFamily, fontDescription) {
   //Something went wrong! Let's load our local fonts.
    WebFontConfig = {
      custom: { families: ['FontOne', 'FontTwo'],
      urls: ['font-one.css', 'font-two.css']
    }
  };
  loadFonts();
  }
};

function loadFonts() {
  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);
}

(function () {
  //Once document is ready, load the fonts.
  loadFonts();
  })();

</script>

这是我在上面找到的内容：https : //productforums.google.com/forum/#!topic/chrome/tYHSqc-fqso

Question 7

我用JS解决方案解决了该问题，但还需要使用最新的Google托管的jquery（1.11）进行修复。

Question 8

我只是面临着同样的问题。我是由于这里描述的HTTP / S协议不匹配。

使用网址的https版本。

Question 9

参见Google字体渲染中类似问题的奇怪问题。

解决方案是从Mozilla CDN而不是Google CDN加载所需的字体（我的情况是“ Fira Sans”）。

Question 10

这不是一个实际的解决方案，但是对我来说，它比该线程中的其他所有功能都更好。我改变了字体。我有Fira Sans，现在换成了开箱即用的Roboto。

Question 11

我只是用来从Windows字体中删除roboto字体，而现在一切正常。

可能是因为您的系统上有较旧的字体。我猜。

Question 12

我正在尝试使用梅格的答案，但像其他许多人一样，它也不适合我。

要使用Google字体，请找到此技巧[为步骤添加屏幕截图]。

1）只需突出显示css或标准链接中的网址即可。

2）打开另一个选项卡中的链接，将整个CSS代码（即，字体）复制到CSS文件中并运行。

由于增加了许多http调用，因此无法确定性能，或者只是尝试复制一个字体。

步骤1的图片

步骤2的图片

Question 13

元素已text-rendering: optimizeLegibility设置有可能导致此问题或类似问题。通过autoFoundation 5项目将其更改optimizeLegibility为默认值，从而为我解决了此问题。

Question 14

如果有人仍在努力解决此问题（2019），则Google Fonts CSS生成器脚本似乎存在错误。

我用以下标签加载了字体：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300">

@font-face文件中的每个文件都包含这样的一行：

src: local('Roboto'), local('Roboto-Regular'), local('sans-serif'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');

如您所见，local('sans-serif')放在远程URL之前，这是错误的。这会导致Chrome加载默认的sans-serif字体，而不是请求的字体。

一个简单的解决方法是font-weight将URL的部分从Roboto:400,300到重新排序Roboto:300,400。这导致生成器不包含local('sans-serif')源。

希望它能帮助某人。

Question 15

我只是分享对我有用的东西。您的结果可能会有所不同。

我main.css使用的@import是多种字体，以|（竖线）字符分隔。一直到今天为止。我没有将所有的Google Font导入都保存在主CSS文件中，因为我没有那么多导入。今天，我添加了一个根本无法在Chrome或Firefox中呈现的图片。我尝试使用其他字体-同样的问题。

最后，我@import在另一个CSS文件中制作了一个单独的文件，该文件被加载到站点上的多个页面（navbar_pages.css例如，让我们称其为）-该CSS通过包含在相关页面中<link rel="stylesheet" type="text/css" href="https://stackoverflow.com/css/navbar_pages.css">，就像这样main.css做一样。

由于某种原因，在单独的CSS文件中使用@import可以解决此问题。

我怀疑这是由于在一次@import调用中可以调用的字体数量受到限制。应该进行更多测试以查明原因，但现在有我的解决方法。如果有人有见解，请发表评论。

Question 16

它可能不是灵丹妙药，但可以通过将fontawesome css链接移至页面底部以及上面列出的网络式修复程序来解决此问题。

Question 17

如果人们在尝试所有出色的解决方案之前仍然遇到此问题，请尝试在CSS中使用！important标记，看看是否可以解决该问题，就像对我一样，我不确定该错误是否与旧的Chrome错误。

.faultyText {"Roboto Slab", Georgia, serif !important}

Question 18

我制作的Checkout插件：https : //chrome.google.com/webstore/detail/fontfix/ekgfbmjaehhpbakdbpfmlepngjkaalok

它使用纯JavaScript来使Web重新排列，从而迫使浏览器重新绘制整个页面。