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

Posted 2023-03-06

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

【英文标题】：How to fix @fontface vs. default font size - layout breaks if @fontface doesn't load

【发布时间】：2011-09-06 11:32:10

【问题描述】：

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

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

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

【问题讨论】：

好问题！和狂野，我昨天要发布同样的问题 - 我最终只是使用 Arial Narrow 作为备用字体，因为它没有破坏我的布局。有兴趣看到对此的回应。

【参考方案1】：

如果您不介意依赖 javascript 支持，您可以使用 Modernizr 之类的东西，除此之外，如果支持 @font-face，它将向 html 元素添加 fontface 类。然后只需重新设计您的 CSS 以仅在该类存在时使用更好的字体，如下所示：

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

【讨论】：

这里的缺点是浏览器通常确实支持@font-face，但直到字体加载（或者如果它不是因为网络错误等） ) 布局已损坏。

我正在尝试字体大小百分比和 em，但我看到填充/边距不同。所以我可以让文本本身在两者之间很好地播放，但间距很远。

@Tigger：然后为每组规则使用不同的边距/填充值。您基本上可以根据是否支持 @font-face 来制作完全不同的布局。

那么托马斯 - 你怎么看？是否可以让默认字体简单地满足不破坏布局但仍然缺乏好看的边距的最低要求，因为重点是使用@fontface字体加载页面？嗯...在我输入之前听起来不错，但现在我意识到这个人可能会在页面上坐很长时间 - 尽管我在看到问题时刷新页面 - 典型用户可能不会。

@marcel - 对不支持 @fontface 的浏览器进行了很好的修复，就像 Thomas Shields 所说的那样。但是我的浏览器支持它，并且每隔一段时间页面加载时没有字体并且我的布局混乱。我认为 javascript 不会解决加载问题，因为它与浏览器支持无关。

【参考方案2】：

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

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

【参考方案3】：

您可以使用Firefox 和Blink powered browsers 支持的font-size-adjust。

要完全摆脱 FOUT，我推荐 this method。

如果不支持 @font-face，您可以使用 this filter 提供 javascript 替代品（如 Cufón 或 Typeface.js）。

【参考方案4】：

我会推荐使用 Google Web Font Loader 这会向 body 元素添加额外的类，以指示字体是否已：开始加载、完成加载、无法加载。使用这些 body 类，您可以适当地调整字体样式。例如，如果 @font-face 加载失败，您可以将字体系列设置为较小的备用字体。

【讨论】：

哇，太棒了！谢谢！如果没有更好的结果，我会暂时保留这个开放的答案并奖励赏金。

【参考方案5】：

您需要使用度量元素来衡量当前使用的字体的实际大小，即 em 像素比。

一般的想法是你有一个不可见的元素，它使用基本字体大小（如<span> </span>），然后使用 javascript 来测量它在渲染页面上占用了多少（主要是高度）。

从那里，您可以确定是否需要增加或减少活动字体大小以使用 javascript 将其缩放到所需的设计规范。

当然，该技术取决于设置一个基本大小，并以百分比设置其他所有内容（ala YUI 重置/字体样式）否则，您必须经历并重写所有内容，而不仅仅是 body 的样式。

我在书签中找到的参考：http://www.alistapart.com/articles/fontresizing 在 IE7 时代写的，但仍然可以正常工作。

此技术还解决了“如何通过缩放文本/增加字体大小而不破坏页面布局来补偿用户”。

【参考方案6】：

看看

http://www.options4.com/options/standards/metrics.html

您会发现所有指标都可供您使用

如果你想使用固定大小，我个人推荐point 系统（em 太大而且你的数字看起来很奇怪）