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

Question

每当我在设计中选择字体时，就会出现这个常见的问题(每个设计人员都很常见)，

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

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

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

问题是，Arial在13 px上大于“Source”，Verdana在13 px大于Arial。

看看这张图片：

​

这就是每个设计师面对的问题，每一次他们认为字体家族的设计。

我希望有一些CSS方法或黑客，我们告诉浏览器在13 if ，上使用'Source‘，但如果它不存在，那么在13 if时不要使用Arial，而在12 if上使用Arial，如果Arial不存在，那么在11 if时使用。

例如，字体-家庭大小:源Sans Pro‘13 my，Arial 12 my，Verdana 11 my；( CSS中没有这个规则，这只是我的愿望)

摘要:我们可以为整个字体系列(包含多个字体的字体系列)分配一个单一大小，现在在实际中，每个字体大小显示的字体大小与同一字体系列中的其他字体不同(小或大)。

Answer 1

您正在寻找的是font-size-adjust属性--这个问题几乎是一个完美的解决方案。当然，浏览器支持是很糟糕的：--它只在火狐上工作。

下面是一个示例(在火狐中打开)：http://jsfiddle.net/zL6vL/1/