Google字体不会在Google Chrome上呈现

我正在构建一个新的WordPress主题(不知道这是否与此相关),并且这个问题会一直困扰着我。

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

自从我刚开始讨论这个主题以来,我可以清楚地记得它之前的工作很完美。 这是最近发生的Chrome更新错误吗?

第一次加载 :屏幕截图#1

在我重新应用任何CSS属性之后,进入响应式视图或悬停一个元素 :截图#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修复不适合你

如果第一个评级职位不工作,这里是一个解决方案:

删除'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所解释的,大多数现代浏览器实际上并不要求你指定协议,他们将根据你称之为的上下文“推断”协议

链接地址: http://www.djcxy.com/p/66459.html

上一篇: Google Fonts are not rendering on Google Chrome

下一篇: Getting Google web fonts to display font