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

【问题标题】：@font-face Text is invisible in Chrome on refresh... but not always?@font-face 刷新时文本在 Chrome 中是不可见的......但并非总是如此？
【发布时间】：2014-03-23 18:28:40
【问题描述】：

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

在使用 Chrome 时，用户有时会发现徽标下方的文字以及与网站页面相关的文字（徽标右侧）对他们来说是不可见的。如果他们尝试在 Chrome 中刷新，它仍然是不可见的。但是，如果他们单击站点徽标进行刷新，则文本会再次出现。相关的@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; 
}

【问题讨论】：

对我来说很好。可能是您的缓存故障。尝试 ctrl f5 ，或尝试更改 CSS 版本，或使用 !important 声明。
感谢您的检查，我可以确认您使用的是 Chrome 吗？我有其他朋友也在使用 Chrome，他们报告了同样的事情。是的，我们很久以前就尝试过 ctrl F5 :) 不确定您对更改 CSS 版本的意思。至于 !important 声明，我明白它的作用，但不明白我应该把它放在哪里......？
我也在 chrome 上，@krembo99 引用的!important 标签可能与font-family 声明一起放置。 CSS 版本你可以see here
好的，我可以看到添加是如何工作的......但是在哪里添加呢？我正在查看可能的嫌疑人，但没有看到类似的东西可以覆盖？
我相信可能是这个bug：code.google.com/p/chromium/issues/detail?id=336476

标签： wordpress font-face

【解决方案1】：

根据 Chromium 错误报告，这似乎是在加载字体时更改样式表时发生的。就我而言，导致问题的原因是在页面底部插入社交分享按钮的脚本。该脚本导致页面的样式表发生更改。

让它对我有用的 hack 是：

$(document).ready(function(e) {
    setTimeout(function() {
        $('body').width($('body').width()+1).width('auto');
    }, 500);
});

这将强制调整正文大小，以便重绘字体。这假设您使用的是 jQuery，并且 body 的 css 宽度应该是“auto”。出现字体问题时会导致页面短暂闪烁，但之后至少会显示字体。

希望这将在版本 35 中得到修复。

【讨论】：

【解决方案2】：

使用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 起已关闭。但请保留代码，直到您的客户端更新到此版本。

【讨论】：

body 代替 .classes-affected-by-issue 将无条件工作。 :)