谷歌字体未在谷歌浏览器上呈现 [英] Google Fonts are not rendering on Google Chrome
问题描述
我正在构建一个新的 WordPress 主题(不知道这是否相关)，这个问题一直困扰着我.
I'm building a new WordPress theme (don't know if that's relevant) and there's this issue that keeps bugging me.
我已经从 Google Webfonts 加载了 Roboto Slab(在 部分包含了 CSS).在所有其他浏览器上，除了 Google Chrome 之外，字体呈现正常.当我第一次在谷歌浏览器中加载网站时，根本不显示使用该自定义字体的文本(即使字体堆栈将 Georgia 作为后备 - Roboto Slab"，Georgia，serif;).在我悬停样式链接或重新触发检查器中的任何 CSS 属性后 - 文本变得可见.
I've loaded up Roboto Slab from Google Webfonts (included the CSS in <head> section). On every other browser out there, font is rendered OK, except Google Chrome. When I first load up the website in Google Chrome, texts using that custom font are NOT displayed AT ALL (even tho font-stack has Georgia as a fallback - "Roboto Slab", Georgia, serif;). After I hover the styled link, or retrigger any CSS property in Inspector - texts become visible.
自从我前段时间开始使用该主题以来，我清楚地记得它之前运行良好.这是最近已知的 Chrome 更新错误吗?
Since I've started the theme some time ago, I can clearly remember that it was working perfectly before. Is this some known recent Chrome update bug?
第一次加载:
在我重新应用任何 CSS 属性后，进入响应式视图或悬停元素:
有人遇到过类似的问题吗?我应该如何处理?
Anyone have similar issues? How should I proceed with this?
谢谢！
推荐答案
显然这是一个 已知的 Chrome 错误.有一个 css-only 解决方法应该可以解决这个问题:
Apparently it's a known Chrome bug. There's a css-only workaround that should solve the problem:
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 重新绘制文本
It seems like Chrome just needs to be told to repaint the text
这篇关于谷歌字体未在谷歌浏览器上呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
