在本文中，我们将看几种不同的方式，前端Web开发人员可以使用CSS操作其网页的字体。
网页设计中最大的混乱之一是由font-size属性造成的。
在CSS中，可以使用多个单元，这只会导致设计人员额外头痛。在本文中，我们将阐明这些单位的用法和任何误解。
PX Unit
最常见和最受欢迎的单位是像素(像素)单位。大多数人开始使用像素单元，因为它可以让您 完全控制文字大小。如果未指定字体大小，则正常文本的默认大小(如段落)为16px。
使用像素单元的主要问题在于它们不具有可伸缩性，因此在不同屏幕尺寸下对字体大小进行更改可能具有挑战性。
另外，PX单元与任何事物都没有关系。因此，如果您想要根据屏幕大小更改整个页面的大小，则必须单独更改每个元素的字体大小。
EM单元
该em单位是一个可扩展的字号单位。它与父容器的字体大小有关。一个em(1em)等于当前字体大小。例如，如果父元素的字体大小为16px，则1em等于16px，2em等于32px，依此类推。
如果使用em单位而不是px，使设计响应变得更容易。
但是，有一件事需要关注。使用EMS时，您应该小心嵌套。
例如，假设您创建了一个部分并将其字体大小设置为2ems。现在，您想要在字体大小为1em的部分中添加一个段落。段落的字体大小与该部分的字体大小有关。如果嵌套继续，或者如果它在项目的多个部分中使用，则可能很快会忽略与什么相关的内容，并完全丢失。
现在是时候引进rem单位了。
REM单位
rem单元是另一种可缩放的字体大小，但与em单元不同，它与根元素(HTML)而不是父元素相关。这就是它的名字(root em = rem)。
这意味着，如果您在元素上使用rem单元，则只需调整根字体大小即可快速更改整个项目的字体大小。这种方式快速，简单，并避免了使用em单元时可能遇到的任何嵌套复杂问题。
那么，你应该使用哪个单位？
回答这个问题的最好方法是使用一个例子。
首先，我们将使用px单元。
html { font-size: 100% } //usually 16pxdiv { font-size: 16px; }div>p { font-size: 14px; }
在这里，你可以看到字体大小是为每个元素单独设置的，而且它们之间没有关系。
接下来，我们将使用相同代码段的em单元。
html { font-size: 100% }div { font-size: 0.875em; } // 14pxdiv>p { font-size: 2em; } // 28px
在这个例子中，px和em单位之间的差异很明显。而且，单位 的相对性很明显。只需更改容器div的字体大小，我们就可以看到相应更新的段落字体大小。
最后，使用rem单位。
html { font-size: 100% }div { font-size: 1rem; } // 16pxdiv>p { font-size: 1.5rem; } // 24px
使用rem单元时，显然所有字体大小都与根字体大小有关。尽管div是段落的父级，但div和段落的字体大小都与根相关。
结论
有没有正确或错误的单位。这一切都取决于你的技能水平，项目类型，大小和个人喜好。
如果您想完全控制字体大小，则像素单元适合您。如果您希望在操作网页时比弹性单位或弹力单位更具灵活性，那么这是最佳选择。无论哪种方式，当单位被充分理解时，最好的结果将会实现。
举报/反馈