Google字体不会在Google Chrome上呈现
我正在构build一个新的WordPress主题（不知道这是否相关），并有这个问题不断扰乱我。
我已经从Google Webfonts加载了Roboto Slab（包含CSS中的<head>部分）。 在其他所有的浏览器上，除了谷歌浏览器，字体都可以正常显示。 当我第一次在谷歌浏览器中加载网站时，使用该自定义字体的文本不会全部显示（即使是字体堆栈也有格鲁吉亚作为后备 – "Roboto Slab", Georgia, serif; ）。 hover样式化的链接后，或者在Inspector中重新触发任何CSS属性 – 文本变得可见。
由于我前段时间已经开始了这个主题，所以我可以清楚地记得之前的工作是完美的。 这是一些已知的最近的Chrome更新错误？
第一次加载 ： 截图＃1
在我重新应用任何CSS属性后，进入响应式视图或hover一个元素 ： 截图＃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只是需要被告知重新绘制文本
CSS修复不适合我，也是0.5秒的延迟脚本似乎尴尬。
这JS片段似乎为我们工作：
<script type="text/javascript"> jQuery(function($) { if (/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) { $('body').css('opacity', '1.0') } }) </script>
如果css修复不适合你
如果第一个评级职位不工作，这里是一个解决scheme：
删除“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所解释的，大多数现代浏览器实际上并不要求您指定协议，他们将根据您称之为的上下文“推断”该协议
单独尝试了上面的CSS修复没有成功。 最后通过创build一个包含以下内容的样式表（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>
我已经纳入了上面的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>
以下是我在上面find的地方： https : //productforums.google.com/forum/#!topic/chrome/tYHSqc-fqso
我把它解决了JS解决scheme，但也需要使用最新的谷歌托pipe的jQuery（1.11）来修复它。
我只是面临同样的问题。 我这是由于这里描述的HTTP / S协议不匹配。
使用https版本的URL。
这不是一个实际的解决scheme，但它对我来说比这个线程中的其他任何东西都更好。 我改变了字体。 我有Fira Sans ，现在只是变成了Roboto ，可以直接使用。
我只是用来从我的Windows字体中删除roboto字体，现在所有的东西都能正常工作。
这可能是因为你的系统上有较旧的字体版本。 我猜 。
我试图和梅格的答案一起工作，但是和其他许多人一样，它也不适合我。
对于使用谷歌字体，发现这个技巧[添加屏幕截图的步骤]。
1）只需从CSS或标准链接高亮显示的url。
2）打开另一个选项卡中的链接，将css代码（即font-face）复制到你的css文件中并运行。
不知道有多lesshttp调用被添加，或者只是尝试复制一个字体。
第1步的图像 
第2步的图像 
有可能元素具有text-rendering: optimizeLegibility集合，这可能导致这个或类似的问题。 将其更改为auto修复此问题与默认情况下设置为optimizeLegibility的Foundation 5项目。
在Google Font Rendering中查看类似的问题。
解决scheme是从Mozilla CDN而不是Google CDN加载所需的字体（我的情况是'Fira Sans'）。
它可能不是一个silverlight的子弹，但通过将fontawesome css链接移动到我们网页的底部以及上面列出的networking修补程序来解决我们网站上的问题。
如果在这里尝试所有优秀的解决scheme之前，人们仍然遇到这个问题，请尝试在你的css中使用一个！important标签，看看是否能解决这个问题，就像我这样做，我不确定这个bug是否与旧的Chrome bug。
.faultyText {"Roboto Slab", Georgia, serif !important}
我制作的Checkout插件： https ： //chrome.google.com/webstore/detail/fontfix/ekgfbmjaehhpbakdbpfmlepngjkaalok
它使用纯JavaScript来重新编排网页，强制浏览器重绘整个网页。
