wordpress - @font-face 文本在 Chrome 中刷新时不可见...但并非总是如此？

Question

我的 WordPress 网站在这里:http://pangalactic.co/

使用 Chrome 时，用户发现有时 Logo 下方的文本以及与网站页面相关的文本( Logo 右侧)对他们来说是不可见的。如果他们尝试在 Chrome 中刷新，它仍然不可见。但是，如果他们单击站点 Logo 进行刷新，则文本会再次出现。相关的@font-face文本如下...

@font-face {
font-family: 'BebasNeueRegular';
src: url("fonts/bebas-neue/BebasNeue-webfont.eot");
src: url("fonts/bebas-neue/BebasNeue.otf");
src: url("fonts/bebas-neue/BebasNeue-webfont.eot?#iefix") format("embedded-opentype"),     url("fonts/bebas-neue/BebasNeue-webfont.woff") format("woff"), url("fonts/bebas-    neue/BebasNeue-webfont.ttf") format("truetype"), url("fonts/bebas-neue/BebasNeue-    webfont.svg#BebasNeueRegular") format("svg");
font-weight: normal;
font-style: normal; 
}

Answer 1

使用bug report Paul Irish linked to中建议的以下技巧为我工作:

.classes-affected-by-issue
{
    -webkit-animation-duration: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0.1s;
}

@-webkit-keyframes fontfix{
    from{   opacity: 1; }
    to{ opacity: 1; }
}

它强制 Chrome 重新绘制字体，这似乎可以解决问题。

密切关注错误报告，了解何时可以从生产服务器中删除此代码。

此问题已于 35.0.1867.2 canary 关闭。但请保留代码，直到您的客户端更新到此版本。