【发布时间】：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 中没有，这只是我的愿望)
总结：我们可以为整个字体系列（包含多个字体的字体系列）分配一个单一的大小，现在实际上每个字体大小都显示不同于其他字体（更小或更大）在同一字体系列中。
【问题讨论】：
-
@kei ，是的，可能是这样，但我认为这个问题信息量更大，更详细..
-
也许以后可以使用
calc根据像素x-height调整字体大小？ -
@ƊŗęДdϝulȻʘɗɇ 是的，兄弟，你是对的。
标签： css fonts font-face font-size webfonts