首頁 > web前端 > html教學 > [CSS] 译文:像素字体大小的风险_html/css_WEB-ITnose

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

WBOY
發布: 2016-06-21 08:49:16
原創
1952 人瀏覽過

原文: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。

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板