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

WBOY
Freigeben: 2016-06-21 08:49:16
Original
1910 Leute haben es durchsucht

原文: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; } 
Nach dem Login kopieren

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

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

结果呢,虽然设置了浏览器的字体大小,但用户仍然以 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; } 
Nach dem Login kopieren

这些网站做的不错:

  • Sitepoint.com
  • Smashingmagazine.com

结论

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

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage