font-size在像素和em中看起来不一样

时间:2017-09-11 21:10:32

标签: css font-size

我有一个webpage由我制作,我已经把它放在" Frontend Developer"在笔记本电脑图像上发短信两次,这样我就可以比较像素和em的字体大小。

对于上层"前端开发人员"文本,我已经放置Run something: cmd.run: - name: command_which_can_fail; exit 0 而对于较低的"前端开发人员"文字,我已经放font-size: 2.875em

  

我想知道为什么两个文本的字体大小都没有查找   相似吗?虽然46px = 2.875em(字体大小)

这两个文本的CSS代码是:

font-size: 46px

1 个答案:

答案 0 :(得分:4)

em是一个相对单位,意思是当你2.875em时,你的意思是2.875倍,无论字体大小如何。 46px是2.875em ...如果你的基本尺寸是16px。另一个文本以不同的大小显示的事实意味着您的基本大小必须是其他内容。

当您在开发工具中检查元素时,可以查看“计算”选项卡以查看实际渲染的字体大小。在你的情况下,这条线出现在大约40px。

您可以通过在父级上设置字体大小来更改em相对于的基线。在您的情况下,例如,如果您添加:

.frontend-background-image { font-size: 16px; }

它会使数学运算相等,并且会使这两行文本的大小相同。