欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-03-30 10:46:38
...
原文:Stop Maiming Bodies:The Perils of Pixel Font-Size

作者:Natalia Balska

Stop Maiming Bodies:The Perils of Pixel Font-Size

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

过去几年里,我们已经学会了如何使用并逐步接受相对单位的使用。也就是用 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等)都会把它覆盖掉。

/* 模拟浏览器的字体设置 */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。

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