css - 如何修复@fontface 与默认字体大小 - 如果@fontface 未加载，布局会中断

Question

如果网站使用@fontface 来加载 2 种自定义字体，并且还使用 ariel 或 sans-serif 字体作为默认/备用字体，但是这两种字体的大小非常不同 - 如何解决出现的布局问题@fontface 字体没有加载？

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

那么我们如何同时控制@fontface 样式和默认样式。理想情况下，我想将 h2 @fontface 样式保持在 45px，并强制默认字体以 30px 加载相同的 h2 样式。

Answer 1

我建议使用 Google Web Font Loader这会向 body 元素添加额外的类，指示字体是否具有:开始加载、完成加载、无法加载。使用这些主体类，您可以适本地调整字体样式。例如，如果 @font-face 加载失败，您可以将后备字体的字体系列设置得更小。