字体系列中的字体显示大小不同

Posted 2023-03-06

【中文标题】字体系列中的字体显示大小不同

【英文标题】：Fonts inside a font family display different in size

【发布时间】：2014-05-05 06:18:54

【问题描述】：

每当我在设计中选择字体时，都会出现这个常见问题（每个设计师都常见），

例如我们为一个段落设置字体系列和字体大小如下，

p 
    font-family: 'Source Sans Pro', Arial, Verdana, sans-serif;
    font-size: 13px;

在 CSS（众所周知）中，当字体系列中的第一种字体不存在时，它会选择第二种字体，如果第二种字体不存在，则选择第三种字体，依此类推。

问题在于 Arial 在 13 像素处大于“Source Sans Pro”，而Verdana 在 13 像素处大于 Arial。 看这张图片：

这是每个设计师在每次考虑设计的字体系列时都会面临的问题。 我希望有一些 CSS 方法或 hack 来告诉浏览器在 13px 处获取“Source Sans Pro”，但如果它不存在，则不要使用Arial 在 13 像素，而不是 在 12 像素处使用 Arial，如果连 Arial 都不存在，在 11 像素处使用 Verdana。 例如font-family-size: 'Source Sans Pro' 13px, Arial 12px, Verdana 11px; （这个规则在 CSS 中没有，这只是我的愿望)

总结：我们可以为整个字体系列（包含多个字体的字体系列）分配一个单一的大小，现在实际上每个字体大小都显示不同于其他字体（更小或更大）在同一字体系列中。

【问题讨论】：

CSS font-size changes when font-family falls back 的可能重复项

@kei ，是的，可能是这样，但我认为这个问题信息量更大，更详细..

也许以后可以使用calc根据像素x-height调整字体大小？

@ƊŗęДdϝulȻʘɗɇ 是的，兄弟，你是对的。

【参考方案1】：

您正在寻找的是font-size-adjust 属性——这个问题几乎完美的解决方案。当然，浏览器支持很糟糕：它只适用于 Firefox。

这是一个示例（在 Firefox 中打开）：http://jsfiddle.net/zL6vL/1/