如果某个网站使用@fontface加载2个自定义字体，并且还使用ariel或sans-serif字体作为默认/备用字体，但这两种字体的大小差异很大 - 如何修复出现的布局问题@fontface字体无法加载？
问题是@fontface字体占用的空间比默认的ariel字体少。因此，如果标题大小为45px并且@fontface字体在div中完美加载。但是如果@fontface字体没有及时加载 - 默认字体加载（45px），并且ariel占用了div中更多的空间，导致标题分成2行，从而打破了布局。
那么我们如何控制@fontface样式和默认样式呢？理想情况下，我希望将h2 @fontface样式保持在45px并强制将默认字体加载到30px以获得相同的h2样式。
答案 0 :(得分：7)
我建议使用Google Web Font Loader这会在body元素中添加额外的类，以指示字体是否包含：开始加载，已完成加载，无法加载。使用这些正文类，您可以适当地调整字体样式。例如，如果加载了@ font-face失败，则可以为回退字体设置较小的字体系列。
答案 1 :(得分：5)
您可以使用http://www.fontsquirrel.com/fontface/generator生成固定字体。
使用选项X-height Matching:和Adjust Glyph Spacing
答案 2 :(得分：4)
您可以使用font-size-adjust和Firefox支持的Blink powered browsers。
完全摆脱FOUT Id推荐this method。
如果不支持@font-face，您可以使用this filter来提供javascript替代方案（如Cufón或Typeface.js）。
答案 3 :(得分：2)
您需要使用公制元素来衡量当前使用的字体的实际大小，em＆lt; =＆gt;像素比率。
一般的想法是你有一个使用基本字体大小的隐形元素（如<span> </span>），然后使用javascript来衡量它在渲染页面上占多少（主要是高度）。 / p>
从那里，您可以确定是否需要增加或减少活动字体大小，以使用javascript将其缩放到所需的设计规格。
该技术当然取决于设置单个基本大小和其他所有设置百分比（ala YUI重置/字体样式）否则，您必须通过并重写所有内容而不仅仅是body的样式
参考我在我的书签中找到：http://www.alistapart.com/articles/fontresizing在IE7期间写的，但仍能正常工作。
此技术还解决了“如何使用缩放文本补偿用户/增加字体大小而不破坏页面布局”。
答案 4 :(得分：1)
如果您不介意依赖JavaScript支持，那么您可以Modernizr之类的内容，除其他外，如果{{1}将向fontface元素添加html类支持。然后只修改你的CSS只使用更好的字体，如果类存在，如下所示：
@font-face答案 5 :(得分：1)
看看
http://www.options4.com/options/standards/metrics.html
您会发现所有指标都可供您使用
我个人推荐point系统，如果你想使用固定大小（em太大而你的数字看起来很奇怪）