CSS 为什么 '微软雅黑'字体上下间距会靠下呢

html-css014

CSS 为什么 '微软雅黑'字体上下间距会靠下呢,第1张

字体默认是按基线对齐的，基线并不是字体的最底边，而是在小写字母g那个小圆圈的下边（读小学的时候用来写字母的作业本，那四条线的第三条线就是基线）。而中文字体由于是方块字，不存在英文字体“出头出脚”的问题，所以基线其实就是底边，但是为了保证汉字与英文并列时能够保持一致和美观，中文字体也仍然是有基线的，而且不同的字体其基线与底边的距离也可能各不相同，“微软雅黑”的基线位置比其他中文字体要高一些，导致字体会往下偏移，但这不一定是bug，可能是微软想让中英混排的时候显得更美观吧。你可以自己在“测试”两个字的后面加一些字母和数字去试试看。

想要将css文字下移几个px的方法是有很多的也很简单，一般常见的方法是将文字放在div标签里，然后对div进行样式属性的配置。这样的好处是使文字被外层的div保护着，不会被外部干扰，可以单独进行更多的配置。以下演示具体步骤：

1、首先打开HTML文件编辑器，然后新建一个HTML文件并HTML文件的基本标签元素。

2、添加完基本标签元素后在body标签里添加一个div元素，然后在div元素里添加想要展示的文字。

3、接下来对div元素进行样式属性的设置，这里使用行外式的配置方法，也可以使用行内式，外部式都可以，假定要下移10个px单位，核心代码是margin-top：10px；

4、保存后运行，效果如图：