[CSS] 译文：像素字体大小的风险_html/css_WEB-ITnose

原文：stop maiming bodies:the perils of pixel font-size

作者：Natalia Balska

想象一下，如果你有视力障碍或阅读障碍。浏览器有一个内置的字体大小设置,你可以增加默认字体大小后开始浏览。奇怪的是，大多数网站的文本还是显得很小，所以你回到浏览器设置，并再次增加字体大小。再返回到页面上之后，你发现该设置根本不起作用。

过去几年里，我们已经学会了如何使用并逐步接受相对单位的使用。也就是用 rem或 em而不是使用像素化的 font-size。

立即学习“前端免费学习笔记（深入）”；

许多码农仍然在 html或 body标签中设置了“初始”的 font-size，往往采用 px为单位。如果你还没完全理解相对单位，这会带给你方便，因为所有的 em和 rem都和初始值挂钩。

/* body的字体有一个固定的值 */body { font-size: 14px; } /* h1的字体设置为2em */h1 { font-size: 2em; } 

不幸的是，该初始值不便于某些用户。我之前提到的那个浏览器设置，只设置了基本字体大小。每一个绝对单位（ px， pt， inch等）都会把它覆盖掉。

文心智能体平台

百度推出的基于文心大模型的Agent智能体平台，已上架2000+AI智能体

0

查看详情

/* 模拟浏览器的字体设置 */html { font-size: 18px; }/* 绝对单位会覆盖掉浏览器的设置 */body { font-size: 14px; } 

结果呢，虽然设置了浏览器的字体大小，但用户仍然以 14px 浏览网页，设置再大也没用。

许多网站都是这样：

• Google.com
• Twitter.com
• Facebook.com
• Github.com
• Codepen.io

缩放和字体大小的区别

有一个理由我知道：“缩放是有效的，这不是一回事吗？”

几乎所有的浏览器有缩放的能力，可以扩大整个页面。从技术上讲，它可以扩大各种单位，百分比的除外。对视力障碍者来说这是很好的。

更改浏览器的字体大小，只是改变了基本字体大小。有些人有很好的视力，但有阅读障碍，增加字体大小可以减少症状的严重程度。

正确的方法

绝对单位很令人棘手。但如果我们使用相对单位，比如 % 和 em，浏览器的设置就会有效。默认情况下 1em大约为 16px。所以，如果你确实不用默认字体大小，可以设置 font-size为 .875em或 87.5%这差不多是 14px。

/*这三种字体设置是一样的:    - font-size: 100%;    - font-size: 1em;    - 或者没有设置字体大小属性    */body { font-size: 1em; } /* 如果用户修改浏览器设置,正文和标题文本将相应的规模的变化 */h1 { font-size: 2em; } 

这些网站做的不错：

• Sitepoint.com
• Smashingmagazine.com

结论

虽然绝对单位用在文字排版是行业的普遍做法。可能是因为它是明确的，而相对单位需要深层嵌套元素根据主体元素计算出不同的 font-size。

但这或许考虑不周。为了使视觉受损或那些有阅读障碍更好地浏览网页，我们必须使用相对单位。