Css 字体大小在像素和em中看起来不一样

我有一个由我制作的，我在笔记本电脑图像上放置了两次前端开发者文本，这样我就可以比较字体大小（像素和em）

对于上层前端开发人员文本，我输入了字体大小：2.875em，而对于下层前端开发人员文本，我输入了字体大小：46px

我想知道为什么两个文本的字体大小都不合适 相像的虽然46px=2.875em字体大小

这两个文本的CSS代码为：

.frontend-background-image p:nth-child(1) {
    font-size: 2.875em;
    color: white;
    text-align: center;
    padding-top: 8%;
    padding-left: 5%;
}

.frontend-background-image p:nth-child(2) {
    color: white;
    text-align: center;
    padding-left: 5%;
    font-size: 46px;
}

em是一个相对单位，也就是说当你使用2.875em时，你的意思是2.875倍的字体大小。46px是2.875em…如果基本尺寸是16px。另一个文本以不同的大小显示，这意味着您的基本大小必须是其他大小

在dev工具中检查元素时，可以查看“computed”选项卡以查看实际呈现的字体大小。在你的例子中，这条线的输出速度大约是40px

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

.frontend背景图像{字体大小：16px；}

它将使数学相等，并使这两行文本大小相同。

em是一个相对单位，这意味着当你为2.875em时，你的意思是开始时字体大小的2.875倍。46px是2.875em…如果基本尺寸是16px。另一个文本以不同的大小显示，这意味着您的基本大小必须是其他大小

在dev工具中检查元素时，可以查看“computed”选项卡以查看实际呈现的字体大小。在你的例子中，这条线的输出速度大约是40px

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

.frontend背景图像{字体大小：16px；}

---

这将使数学上的结果相等，并且将使这两行文本的大小相同。

Link break你可以使用JSFIDLE还是使用代码部分运行它？@MohamedAdel Check now Link break你可以使用JSFIDLE还是使用代码部分运行它？@MohamedAdel Check now它工作了，但在其他一些情况下，如果我使用em而不是像素，字体大小是不一样的。像素显示出与em不同的大小。我如何解决这个问题？@在HomeMail的文本Frontend Developer中，我在Line78字体大小：1.750em时面临同样的问题；css文件的格式。是否需要删除字体大小：1.2em；在第73行工作？我对rem/em很陌生。rem/em让我很困惑。我应该用像素来表示字体大小吗？如果你想在开始时保持简单，像素是最简单的。如果您避免将ems堆叠在元素及其子元素上，这也是最简单的。如果你搜索“css sizing px em”，你可以找到关于这个主题的大量信息和有用的指南。css Tricks可能在这个主题上有一个很好的参考页。它很有效，但在其他一些情况下，如果我使用em而不是像素，字体大小是不一样的。像素显示出与em不同的大小。我如何解决这个问题？@在HomeMail的文本Frontend Developer中，我在Line78字体大小：1.750em时面临同样的问题；css文件的格式。是否需要删除字体大小：1.2em；在第73行工作？我对rem/em很陌生。rem/em让我很困惑。我应该用像素来表示字体大小吗？如果你想在开始时保持简单，像素是最简单的。如果您避免将ems堆叠在元素及其子元素上，这也是最简单的。如果你搜索“css sizing px em”，你可以找到关于这个主题的大量信息和有用的指南。css技巧可能在这个主题上有一个很好的参考页。