首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Google字体不能在Google Chrome上渲染

Google字体不能在Google Chrome上渲染
EN

Stack Overflow用户
提问于 2014-02-25 18:20:12
回答 17查看 100.6K关注 0票数 70

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

我已经从Google Webfonts加载了Roboto Slab (包括<head>部分的CSS )。在所有其他浏览器上,除了Google Chrome之外,字体都可以正常显示。当我第一次在Google Chrome中加载网站时,使用该自定义字体的文本根本不显示(甚至字体堆栈都将Georgia作为备用"Roboto Slab", Georgia, serif;)。在我悬停已设置样式的链接,或重新触发Inspector -Texts中的任何CSS属性后,它将变得可见。

因为我在一段时间前开始了这个主题,我可以清楚地记得它以前工作得很完美。这是最近一些已知的Chrome更新错误吗?

首先加载

在我重新应用任何CSS属性之后,进入响应视图或悬停一个元素

有谁有类似的问题吗?我该怎么做呢?

谢谢!

EN

回答 17

Stack Overflow用户

回答已采纳

发布于 2014-02-26 04:46:16

很明显是个known Chrome bug。有一个只有css的解决方案,应该可以解决这个问题:

代码语言:javascript
复制
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重新绘制文本就可以了

票数 89
EN

Stack Overflow用户

发布于 2014-12-10 00:10:35

如果css修复对您无效

如果first rated post不工作,这里有一个解决方案:

删除:中的“http:”

代码语言:javascript
复制
<link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'> 

代码语言:javascript
复制
@import url(http://fonts.googleapis.com/css?family=Alfa+Slab+One);

正如David Bain所解释的,大多数现代浏览器实际上并不需要你指定协议,它们会根据你调用协议的上下文“推断”出协议

票数 10
EN

Stack Overflow用户

发布于 2014-03-25 22:30:30

CSS修复对我不起作用,0.5秒的延迟脚本看起来也很笨拙。

下面这段JS代码似乎对我们很有效:

代码语言:javascript
复制
<script type="text/javascript">
jQuery(function($) {
    if (/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) {
        $('body').css('opacity', '1.0') 
    }
})
</script>
票数 9
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/22011139

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档