Google字体无法在Google Chrome上呈现

问题描述 投票：63回答：16

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

我从Google Webfonts加载了Roboto Slab（在<head>部分包含了CSS）。在其他所有浏览器上，除了谷歌浏览器外，字体呈现正常。当我第一次在谷歌浏览器中加载网站时，使用该自定义字体的文本不会全部显示（即使字体堆栈有格鲁吉亚作为后备 - "Roboto Slab", Georgia, serif;）。在我悬停样式链接或重新触发Inspector中的任何CSS属性后 - 文本变得可见。

自从我前段时间开始这个主题以来，我可以清楚地记得它之前完美无缺。这是最近一些已知的Chrome更新错误吗？

首先加载：a screenshot #1

在我重新应用任何CSS属性后，进入响应式视图或悬停元素：a screenshot #2

有人有类似的问题吗？我该怎么办呢？

谢谢！

html css google-chrome google-webfonts
16个回答
88
投票

显然它是一个known Chrome bug。有一个仅限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重新绘制文本

0
投票

我刚刚从我的Windows字体中删除roboto字体，现在一切正常。

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

0
投票

我试图用梅格的答案，但像许多其他人一样，它对我也没有用。

对于使用谷歌字体，找到了这个技巧[为步骤添加屏幕截图]。

1）只需将css或标准链接中的url视为突出显示。

2）打开另一个选项卡中的链接，在css文件中复制整个css代码（即font-face）并运行。

不确定性能，因为添加了很多http调用，或者只是尝试复制一个字体。

图片为步骤1 enter image description here

图片为步骤2 enter image description here

0
投票

该元素可能具有text-rendering: optimizeLegibility集，这可能导致此问题或类似问题。将它更改为auto为我修复了这个问题的基础5项目，默认情况下将其设置为optimizeLegibility。

0
投票

如果有人仍在努力解决这个问题（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字体而不是请求的字体。

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

希望它可以帮助某人。

-1
投票

它可能不是一个银弹，但通过将fontawesome css链接移动到我们页面的底部以及上面列出的网络修复来解决我们网站上的问题。

-1
投票

如果人们在你尝试所有伟大的解决方案之前仍然遇到这个问题，请尝试在你的css中使用！important标签，看看是否会修复它，就像它对我一样，我不确定这个错误是否与旧的Chrome漏洞。

.faultyText {"Roboto Slab", Georgia, serif !important}
-3
投票

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

它使用纯javascript进行网络重新排列，强制浏览器重绘整个页面。

9
投票

CSS修复对我来说不起作用，0.5秒延迟脚本似乎也很尴尬。

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

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

If the css fix does not work for you

如果first rated post不工作，这是一个解决方案：

删除'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所解释的那样，大多数现代浏览器实际上并不要求您指定协议，它们将根据您调用它的上下文“推断”协议。

6
投票

单独尝试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="/chrome.css" rel="stylesheet" />');
   });
</script>
2
投票

我已经合并了上面的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

1
投票

我用JS解决方案修复了它，但还需要使用最新的google托管jquery（1.11）来修复它。

1
投票

我刚遇到同样的问题。我是因为描述here的HTTP / S协议不匹配。

使用https版本的URL。

1
投票

看到有问题的问题Strange Issue while Google Font Rendering。

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

0
投票

它不是一个实际的解决方案，但它对我来说比这个线程中的其他任何东西都更好。我改变了字体。我有Fira Sans，现在只需改为Roboto，开箱即用。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.