html - Google 字体无法在 Google Chrome 上呈现

标签 html css google-chrome google-webfonts

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

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

自从我很久以前开始使用这个主题以来,我可以清楚地记得它之前运行得很好。这是某个已知的近期 Chrome 更新错误吗?

第一次加载:

enter image description here

在我重新应用任何 CSS 属性后,进入响应式 View 或将鼠标悬停在元素上:

enter image description here

有人遇到过类似的问题吗?我该如何处理?

谢谢!

最佳答案

显然这是一个 known Chrome bug .有一个 css-only 解决方法应该可以解决这个问题:

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 重绘文本

关于html - Google 字体无法在 Google Chrome 上呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22011139/

相关文章:

html - 为什么我的列表在添加 div 时停止水平显示?

php - 输入当前登录的用户到表单

javascript - 使用 .html() 在另一个 div 中选择多个 div 文本

html - Bootstrap 输入组字段大小不正确

javascript - Google Chrome 扩展程序持久性

html - Chrome 问题 : Font awesome in ul li a breaks padding

HTML 5 文件系统如何增加持久存储

带有图像映射的 JavaScript 事件传播

javascript - 当用户滚动时停止隐藏在导航栏下的内容

html - 可以调整透明图像的大小吗?