自定义字体和元素'width：auto'

Question

我在当前项目中使用着名的“Open Sans”字体系列，我遇到了以下问题。

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

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