如何修复@fontface与默认字体大小 - 如果@fontface没有加载则布局中断

Question

如果某个站点使用@fontface加载2个自定义字体,并且还使用ariel或sans-serif字体作为默认/备份字体,但这两种字体的大小差别很大 - 如何修复@fontface时出现的布局问题字体不加载？

问题是@fontface字体比默认的ariel字体占用更少的空间.因此,如果标题大小为45px并且@fontface字体在div中完美加载.但是如果@fontface字体没有及时加载 - 默认字体加载(45px),并且ariel占用了div的更多空间,导致标题分成2行,从而打破了布局.

那么我们如何控制@fontface样式和默认样式呢？理想情况下,我希望将h2 @fontface样式保持在45px并强制将默认字体加载到30px以获得相同的h2样式.

Answer 1

我建议使用Google Web Font Loader,这会在body元素中添加额外的类,指示字体是否包含:开始加载,加载完成,无法加载.使用这些正文类,您可以适当地调整字体样式.例如,如果加载了@ font-face失败,则可以为回退字体设置较小的字体系列.

Answer 2

您可以使用http://www.fontsquirrel.com/fontface/generator生成固定字体.

使用选项X-height Matching:和Adjust Glyph Spacing

Answer 3

如果您不介意依赖 JavaScript 支持，您可以使用Modernizr之类的东西，如果支持的话，它会向元素添加一个fontface类。然后只需修改 CSS，仅在存在类的情况下使用更好的字体，如下所示：html@font-face

h2 { font:30px/1.2 sans-serif; }
html.fontface h2 { font:45px/1.2 'awesome font', sans-serif; }