logo标签列表

如何修复@fontface与默认字体大小的问题——如果@fontface未加载，则布局会破裂

cssfontsfont-facefont-size
15
如果一个网站使用@fontface加载2种自定义字体，同时使用ariel或sans-serif字体作为默认/备用字体，但两种字体的大小非常不同 - 当@fontface字体未加载时会出现布局问题，该如何解决？
问题在于@fontface字体占用的空间比默认的ariel字体要小。因此，如果标题的大小为45px并且@fontface字体能够完美地加载到div中。但是，如果@fontface字体不能及时加载，则默认字体将代替它（大小为45px），并且ariel占用了更多的div空间，导致标题分成两行，从而破坏布局。
那么我们怎么控制@fontface样式和默认样式呢？理想情况下，我希望保持h2 @fontface样式为45px，并强制默认字体以30px的相同h2样式加载。
好问题！太巧了，我昨天也要发布完全相同的问题 - 最终我只使用Arial Narrow作为备用字体，因为它不会破坏我的布局。很想看看对此的回应。 - Thomas Shields
6个回答
7
我建议使用Google Web Font Loader，它会向body元素添加额外的类，指示字体是否已开始加载、已完成加载或无法加载。使用这些body类，您可以适当地调整字体样式。例如，如果@font-face加载失败，则可以将字体系列设置为回退字体较小。
哇，太棒了！谢谢！我会再等一会儿看看是否还有更好的答案，如果没有的话就颁发奖励。 - Thomas Shields
5
4
2
您需要使用度量元素来衡量当前实际使用的字体大小，一个em <=> 像素比例。一般的想法是，您有一个不可见的元素，它使用基础字体大小（如< span > ），然后使用javascript测量它在呈现页面上的占用空间（主要是高度）。从那里，您可以确定是否需要增加或减小活动字体大小以通过javascript将其缩放到所需的设计规格。当然，这种技术取决于设置单个基本大小并将其他所有内容设置为百分比（ala YUI重置/字体样式）。否则，您必须逐个重新编写所有内容，而不仅仅是< body >的样式。我在书签中发现了这个参考链接：http://www.alistapart.com/articles/fontresizing，虽然是在IE7时代编写的，但仍然有效。这种技术还解决了“如何补偿用户缩放文本/增加字体大小而不破坏页面布局”的问题。
1

如果您不介意依赖JavaScript支持，您可以使用Modernizr等工具，其中包括将fontface类添加到html元素中，如果支持@font-face。然后只需重新设计CSS，以仅在存在该类时使用更好的字体，如下所示：

h2 { font:30px/1.2 sans-serif; }
html.fontface h2 { font:45px/1.2 'awesome font', sans-serif; }
这里的缺点是，通常浏览器确实支持@font-face，但在字体加载之前（或者由于网络错误等原因没有加载），布局会出现问题。 - Thomas Shields
我正在尝试使用字体大小百分比和 em 进行实验，但是我发现填充/边距会有所不同。因此，我可以使文本在两者之间适当显示，但间距相差很大。 - Tigger
@Tigger：然后对于每组规则使用不同的边距/填充值。你可以根据@font-face是否被支持来创建完全不同的布局。 - Marcel
那么 Thomas，你觉得呢？使用默认字体来满足最低要求以避免破坏布局，但仍然缺乏好看的边距是否可以呢？因为整个页面的重点是加载@fontface字体。嗯...听起来不错，直到我打出来才意识到用户可能会在页面上停留相当长的时间 - 尽管我在看到问题时会刷新页面 - 但普通用户可能不会这样做。 - Tigger
@Tigger，我个人认为，如果更改字体完全破坏了布局，那么你做错了。如果旧版浏览器的“默认”字体破坏了填充/边距，请考虑使用text-align。即使浏览器支持@font-face，页面在加载字体时看起来也很丑陋，除非您有一个不错的默认字体可以使用。这是至关重要的。分段加载的页面是不好的。它需要在显示时就看起来很好。而且你是对的，普通用户不会刷新页面来修复由网络错误引起的破损字体。 - Thomas Shields
2
@marcel - 非常感谢你为那些不支持 @fontface 的浏览器提供了很好的解决方案，正如 Thomas Shields 所说。但是我的浏览器支持它，有时候页面加载时字体没有显示出来，导致我的布局混乱。我认为 JavaScript 无法解决加载问题，因为这与浏览器支持无关。 - Tigger
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接