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

每当我在设计中选择字体时,都会出现这种常见问题(每位设计师都会遇到这种问题),

例如,我们按如下方式设置段落的字体系列和字体大小,

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

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

问题在于Arial在13px处比'Source Sans Pro' 大,在13px处Verdana比Arial大

看看这个图像:
在这里输入图像描述

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

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


你正在寻找的是font-size-adjust属性 - 这个问题的近乎完美的解决方案。 当然,浏览器支持是可怕的: 它只适用于Firefox

这里有一个例子(在Firefox中打开):http://jsfiddle.net/zL6vL/1/

链接地址: http://www.djcxy.com/p/19683.html

上一篇: Fonts inside a font family display different in size

下一篇: Confused about the direction of iOS constraints