不同font-size的字體會出現上下偏差,這是一個蠻令人頭疼的問題。特別是中文字體(英文字體不會出現這種問題)。
<style>
b { font-size:24px; }
span { font-size:50px; }
</style>
<body>
<div><b>Hello<span>World</span></b></div>
<div><b>Hello<span>578</span></b></div>
<div><b>爆款<span>578</span></b></div>
<div><b>爆款<span>價格</span></b></div>
</body>
下面是分別出現的三種情況:




英文字體還好,可中文出現了上下偏差。設置行高也不起作用。現在推薦下面這個方法來處理。
<style>
b { position:absolute; font-size:24px; }
span { position:absolute; font-size:50px; top:-25px; }
</style>
<body>
//這里注意<span>標簽是放在<b>標簽里面
<div><b>爆款<span>578</span></b></div>
</body>

這里通過絕對定位來使文字偏移回來。只需要控制span標簽的top值,就可以讓文字底部對齊。
