低调的css3属性font-size-adjust

在我们日常的项目中经常会用到不同的字体来达到我们想要的效果，可是某些情况下不同字体的大小在相同的px下显示的大小是不同的

<div id="div1">Text 1</div>
<div id="div2">Text 2</div>
<div id="div3">Text 3</div>
<div id="div4">Text 4</div>

div#div1 {
    font-family: Comic Sans Ms;
    font-size: 16px;
}
div#div2 {
    font-family: Tahoma;
    font-size: 16px;
}
div#div3 {
    font-family: Arial;
    font-size: 16px;
}
div#div4 {
    font-family: Times New Roman;
    font-size: 16px;
}

在火狐下的显示效果如下

可以看到同样是16px的字体显示到浏览器中缺大小不一，可能会是原来安排好的页面布局产生混乱，这是最令人难过的事情了。那么：

div#div1 {
    font-family: Comic Sans Ms;
    font-size: 16px;
    font-size-adjust: 0.50;
}
div#div2 {
    font-family: Tahoma;
    font-size: 16px;
    font-size-adjust: 0.54;
}
div#div3 {
    font-family: Arial;
    font-size: 16px;
    font-size-adjust: 0.54;
}
div#div4 {
    font-family: Times New Roman;
    font-size: 16px;
    font-size-adjust: 0.49;
}

给每个css中添加了不同的font-size-adjust值，现在在浏览器中的显示效果如我们所愿（默认按照最后一个字体的大小显示）：

aaarticlea/png;base64,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" alt="" />

在看font-size-adjust这个主角之前，我们先看这个属性的值 -- aspect，什么是aspect呢？举例：Verdana 的 aspect 值是 0.58（意味着当字体尺寸为 100px 时，它的 x-height 是 58px ）。每一种字体都有自己的默认aspect值。

font-size-adjust 属性就是为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。字体的小写字母 "x" 的高度与 "font-size" 高度之间的比率被称为一个字体的 aspect 值。当字体拥有高的 aspect 值时，那么当此字体被设置为很小的尺寸时会更易阅读。   --来自W3C

浏览器对于aspect值的计算方法：c=(a/b) s  a:表示实际使用字体的aspect值，b表示修改前字体的aspect值，s表示指定的字体尺寸，c为浏览器最后显示的尺寸。所以当我们在我们的页面中使用了与页面原始不同的字体时，我们可以利用font-size-adjust来调整这个外来字体的大小，使他看起来和页面原始字体的大小一样，这样就不会对页面的布局产生不可预告的影响了。

最后，还有更多的未知等待探索，还是那句话，小角色有时候会变成大英雄！