不同大小的字体底部对齐

最新推荐文章于 2022-09-15 11:20:42 发布

weixin_30667649

最新推荐文章于 2022-09-15 11:20:42 发布

阅读量922

点赞数

文章标签： javascript 游戏移动开发 ViewUI

原文链接：http://www.cnblogs.com/wdz-freddy/p/8033683.html

版权

不同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值，就可以让文字底部对齐。

转载于:https://www.cnblogs.com/wdz-freddy/p/8033683.html

weixin_30667649

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
不同大小的字体底部对齐

不同font-size的字体会出现上下偏差，这是一个蛮令人头疼的问题。特别是中文字体(英文字体不会出现这种问题)。<style> b { font-size:24px; } span { font-size:50px; }</style><body><div><b>Hello&lt...
复制链接

扫一扫