css - 带有 'width: auto' 的自定义字体和元素

Question

我在当前元素中使用众所周知的“Open Sans”字体系列，但我面临以下问题。

我有按钮和其他元素 width: auto，所以在加载页面时，这些元素的宽度将由浏览器计算，直到“Open Sans”字体实际从 Google Fonts 加载，然后重新计算它们的大小，产生令人讨厌的效果。

这是一个演示: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 }
}