自定义字体和元素与'width: auto'

Question

我在当前的项目中使用了众所周知的"Open Sans"字体系列，我遇到了以下问题。

我有按钮和其他带有width: auto元素，因此在加载页面时，这些元素将具有浏览器计算的宽度，直到实际从Google字体加载" Open Sans"字体，然后重新计算它们的大小，从而产生烦人的效果。

这是一个演示：http://jsbin.com/IkifUhUL/1（多次刷新页面以查看其运行情况）。

在不指定这些元素的宽度的情况下，是否有解决此问题的方法？

任何提示表示赞赏！

Answer 1

为此，您可以使用Google Web Font loader API。 https://github.com/typekit/webfontloader

基本上，这将允许您隐藏文本，直到加载字体，然后您可以在加载时显示文本。

类似的东西

WebFontConfig = {
   loading: function() { // While waiting to load code here },
   fontactive: function(familyname, fvd) { // Once loaded code here }
}