不同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值,就可以讓文字底部對齊。