Html 谷歌字体未在谷歌浏览器上呈现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22011139/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Fonts are not rendering on Google Chrome
提问by enodekciw
I'm building a new WordPress theme (don't know if that's relevant) and there's this issue that keeps bugging me.
我正在构建一个新的 WordPress 主题（不知道这是否相关），这个问题一直困扰着我。
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.
我已经从 Google Webfonts 加载了 Roboto Slab（在<head>部分中包含了 CSS ）。在其他所有浏览器上，除了 Google Chrome 之外，字体都可以正常呈现。当我第一次在谷歌浏览器中加载网站时，使用该自定义字体的文本根本不会显示（即使字体堆栈有 Georgia 作为后备 - "Roboto Slab", Georgia, serif;）。在我悬停样式链接或重新触发检查器中的任何 CSS 属性后 - 文本变得可见。
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?
由于我前段时间开始使用该主题，我可以清楚地记得它之前运行良好。这是最近一些已知的 Chrome 更新错误吗？
First load: a screenshot #1
第一次加载： 截图 #1
After I reapply any of the CSS properties, get into responsive view or hover an element: a screenshot #2
在我重新应用任何 CSS 属性后，进入响应式视图或悬停元素： 屏幕截图 #2
Anyone have similar issues? How should I proceed with this?
有人有类似的问题吗？我应该如何处理这个问题？
Thanks!
谢谢！
回答by Meg
Apparently it's a known Chrome bug. There's a css-only workaround that should solve the problem:
显然这是一个已知的 Chrome 错误。有一个 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; }
}
It seems like Chrome just needs to be told to repaint the text
似乎只需要告诉 Chrome 重新绘制文本
回答by kjetilh
The CSS fix didn't work for me, also the 0.5 sec delay script seems awkward.
CSS 修复对我不起作用，0.5 秒延迟脚本似乎也很尴尬。
This JS snippet seems to work for us:
这个 JS 片段似乎对我们有用：
<script type="text/javascript">
jQuery(function($) {
if (/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) {
$('body').css('opacity', '1.0')
}
})
</script>
回答by JohnAndrews
If the css fix does not work for you
如果 css 修复对您不起作用
In case the first rated postis not working, here is a solution:
如果第一个评分的帖子不起作用，这里有一个解决方案：
remove the 'http:' in:
删除“http:”中的：
<link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'>
or
或者
@import url(http://fonts.googleapis.com/css?family=Alfa+Slab+One);
As explained by David Bain, most modern browsers don't actually require that you specify the protocol, they will "deduce" the protocol based on the context from which you called it
正如David Bain所解释的，大多数现代浏览器实际上并不要求您指定协议，它们会根据您调用它的上下文“推导出”协议
回答by Andrew
Tried the css fix alone above with no success. Finally resolved by creating a style sheet (chrome.css) containing:
单独尝试了上面的 css 修复，但没有成功。最后通过创建包含以下内容的样式表 (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; }
}
And loading it with jquery at the bottom of the page:
并在页面底部使用 jquery 加载它：
<script type="text/javascript">
$(document).ready(function () {
$('head').append('<link href="/chrome.css" rel="stylesheet" />');
});
</script>
回答by Nate
I've incorporated the above CSS ... but I ALSO am including the following javascript in my header:
我已经合并了上面的 CSS ......但我也在我的标题中包含以下 javascript：
(Note, I know I haven't customized the fonts in the code below. But regardless, it still seems to help in forcing Chrome to repaint the fonts on the page ... just make sure your fonts are properly referenced elsewhere)
（注意，我知道我没有在下面的代码中自定义字体。但无论如何，它似乎仍然有助于强制 Chrome 重新绘制页面上的字体......只需确保您的字体在其他地方正确引用）
With the CSS mentioned above used in conjunction with the below code included in my ... at worst, all fonts on my page will show up after a second or so of delay.
将上面提到的 CSS 与包含在我的...中的以下代码结合使用，最坏的情况是，我页面上的所有字体将在一秒钟左右的延迟后显示出来。
Hope this helps people. Cheers.
希望这可以帮助人们。干杯。
<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>
Here's where I found the above: https://productforums.google.com/forum/#!topic/chrome/tYHSqc-fqso
这是我找到上述内容的地方：https: //productforums.google.com/forum/#!topic/chrome/tYHSqc-fqso
回答by Conor O Kelly
I got it fixed with the JS solution, but also needed to use the latest google hosted jquery (1.11) to get it fixed.
我用 JS 解决方案修复了它，但还需要使用最新的谷歌托管 jquery (1.11) 来修复它。
回答by Sebastiaan Ordelman
See similar problem in question Strange Issue while Google Font Rendering.
请参阅Google Font Rendering问题奇怪问题中的类似问题。
Solution is in loading the desired font (I my case 'Fira Sans') from the Mozilla CDN instead of Google CDN.
解决方案是从 Mozilla CDN 而不是 Google CDN 加载所需的字体（我的情况是“Fira Sans”）。
回答by eMad
回答by jimuty
i just used to delete roboto font from my windows fonts and every thing work right now.
我只是用来从我的 Windows 字体中删除机器人字体，现在一切正常。
it is maybe beacause you have older version of font on your system . i guess .
这可能是因为您的系统上有旧版本的字体。我猜 。
回答by Akshay
I was trying to work with Meg's answer,but like many others it didn't work for me either.
我试图与梅格的答案一起工作，但与许多其他人一样，它对我也不起作用。
For using Google Font,found this trick[Adding Screenshots for steps].
对于使用谷歌字体，发现了这个技巧[为步骤添加屏幕截图]。
1) Just take the url from the css or standard link as highlighted.
1) 只需从突出显示的 css 或标准链接中获取 url。
2) Open the link in another tab, copy whole css code(i.e. font-face) in your css file and run.
2) 在另一个选项卡中打开链接，将整个 css 代码（即 font-face）复制到 css 文件中并运行。
Not sure about performance as many http calls are getting added, or just try copying one font-face.
由于添加了许多 http 调用，因此不确定性能，或者只是尝试复制一种字体。
Image for step 1
步骤 1 的图像
Image for step 2
步骤 2 的图像
