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

Question

每当我在设计中选择字体时,都会出现这种常见问题(对于每个设计师来说都很常见),

例如,我们为段落设置字体系列和字体大小,如下所示,

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

在CSS(众所周知)中,当字体系列中的第一个字体不存在时,它选择第二个字体,如果第二个字体不存在则转到第三个字体,依此类推.

问题是Arial比13 px的'Source Sans Pro' 大,而Verdana比Arial大13 px.

看看这张图片:

这是每个设计师每次想到设计的字体系列时都面临的问题.
我希望有一些CSS方法或黑客通过它我们告诉浏览器采用13px的'Source Sans Pro',但如果它不存在而不是在13px 采用Arial,而是采用Arial在12px,如果甚至Arial没有比以11px的Verdana为中心.
例如font-family-size:'Source Sans Pro'13px,Arial 12px,Verdana 11px; (这条规则不适用于CSS,它只是我的愿望)

简介:我们可以为整个字体系列(包含多个字体的字体系列)分配单个大小,现在实际上每个字体大小显示与同一字体系列中的其他字体不同(更小或更大).

Answer 1

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

\n\n

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

\n