有一定實踐經驗的前端開發者都了解：在網頁中，如果改變了字體類型，則頁面中使用該字體類型的文字大小都有可能發生變化，從而可能導致原來設定好的頁面布局產生混亂。我們還是給個例子來得直觀：
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 font-size-adjust屬性</title>
<style type="text/css">
/*定義整體樣式*/
div{font-size:16px;}
#div1{font-family:Times New Roman;}
#div2{font-family:Arial}
#div3{font-family:Comic Sans MS}
#div4{font-family:Calibri}
#div5{font-family:Verdana}
</style>
</head>
<body>
<div id="div1">welcome to lvyestudy !</div>
<div id="div2">welcome to lvyestudy !</div>
<div id="div3">welcome to lvyestudy !</div>
<div id="div4">welcome to lvyestudy !</div>
<div id="div5">welcome to lvyestudy !</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
從上面預覽效果，我們可以看出，即使是設置了相同的font-size屬性值，但是由於字體類型font-family屬性的不同，字體的在浏覽器顯示的“實際大小”同樣會不一樣。這樣在實際開發中，就很可能會因為文字大小的變換而導致原來的頁面布局發生混亂。
在CSS3中，我們可以使用font-size-adjust屬性來在字體類型（font-family）改變的情況下而保持字體大小（實際大小）不變。
語法：
font-size-adjust:屬性值;
說明：
font-size-adjust屬性取值為一個“aspect值”。下面給大家講解一下什麼叫aspect值？
字體的小寫字母“x”的高度（即x-height）與該字體“font-size”高度之間的比率被稱為一個字體的aspect值。
aspect =（x-height）/（font-size）
從上面的公式我們可以知道，如果某一個字體類型的aspect值比較大的話，那麼當font-size屬性值相同的情況下， x-height比較大，因此該字體類型在浏覽器效果會顯得比較大。
例如，Times New Roman字體類型的aspect值為0.46，則意味著當字體大小為100px時，它的x-height為46px。而Verdana字體類型的aspect值為0.58，則意味著當字體大小為100px時，它的x-height為58px。因此，我們得出在font-size屬性值相同情況下，Verdana字體類型在浏覽器效果會比New Times Roman字體類型的大。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 font-size-adjust屬性</title>
<style type="text/css">
/*定義整體樣式*/
div{font-size:16px;}
#div1{font-family:Times New Roman;}
#div2{font-family:Verdana}
</style>
</head>
<body>
<div id="div1">welcome to lvyestudy !</div>
<div id="div2">welcome to lvyestudy !</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
不比不知道，一比嚇一跳！相同的font-size值，由於字體類型font-family不同，在浏覽器顯示效果居然差別這麼大！如果網站換字體類型的話，布局想不亂都不行。
下表為一些常用的西方字體的aspect值：
c = (a/b)s
說明：
a：表示原來字體類型的aspect值；
b：表示現在字體類型的aspect值；
s：表示原來字體類型的font-size值；
c：表示現在字體類型的font-size值；
上面公式其實很好理解，我們知道aspect值的計算公式是：
aspect =（x-height）/（font-size）
由於想要前後字體類型在浏覽器的實際大小都相同，也就是x-height相同。我們用aspect1和font-size1表示“原來字體類型”的aspect值和font-size屬性值，用aspect2和font-size2表示“現在字體類型”的aspect值和font-size屬性值，由此得到2條公式：
aspect1 =（x-height）/（font-size1） aspect2 =（x-height）/（font-size2）
從上面兩條公式，我們得到：
（aspect1）/（aspect2）=（font-size2）/（font-size1）
自此，公式已經生成，不用再說大家都理解“c = (a/b)s”這條最終公式了吧？
如果想將“fontsize:16px;”的Times New Roman字體修改為Verdana字體，並且浏覽器顯示的字體大小仍然保持“fontsize:16px;”的Times New Roman字體的大小，需要執行以下步驟：
計算方法很簡單，如果你的數學是體育老師教的，沒辦法理解的話，那我就沒話說了。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 font-size-adjust屬性</title>
<style type="text/css">
#div1
{
font-size:16px;
font-family:Times New Roman;
font-size-adjust:0.46;
}
#div2
{
font-size:13px;
font-family:Verdana;
font-size-adjust:0.58;
}
</style>
</head>
<body>
<div id="div1">welcome to lvyestudy !</div>
<div id="div2">welcome to lvyestudy !</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
通過使用font-size屬性與font-size-adjust屬性，字體從Times New Roman修改為Verdana後，在浏覽器中的字體大小都沒有改變。那有人又有新的疑惑了，字體大小是沒變了，但是上面的單詞間距怎麼不一樣呢？其實每種字體的單詞間距和字母間距都是不一樣的，這個我們可以使用word-spacing屬性和letter-spacing屬性來設置。
font-size-adjust屬性可能在國內網站中很少用到，但是在英文網站的開發中我們經常碰到！對於想要建立英文網站的前端工程師，font-size-adjust屬性是絕對必要知識之一。
參考：本文部分參考來自《HTML5和CSS3權威指南（第2版）》陸凌牛著，機械工業出版社出版
疑問1、CSS定義的字體在不同的浏覽器中大小不一樣，如何處理？
例如使用font-size:14px定義的宋體文字，在IE下實際高度為16px，下空白是3px，在Firefox浏覽器下實際高是17px、上空1px、下空3px。其解決辦法是在文字定義時設定line-height屬性，並確保所有文字都有默認的line-height值。