字体大小 像素

Artwork by SitePoint/

SitePoint /

Imagine you’re visually impaired or have a reading disability. The browser comes with a font size setting built in, so you increase the default font size and you start browsing. Oddly, the text on most sites still seems small, so you go back to the browsers settings and increase font size to huge. You return to the website you were on and… nothing. The setting has no effect.

假设您有视力障碍或阅读障碍。 浏览器内置了一个字体大小设置，因此您可以增加默认字体大小并开始浏览。 奇怪的是，大多数站点上的文本似乎仍然很小，因此您需要返回浏览器设置并将字体大小增加到很大。 您返回到所访问的网站，然后……什么都没有。 该设置无效。

Past few years, we have learned how to use and gradually accepted relative units for typographic content. Instead of using pixels for properties like font-size, most values are rem or ems.

在过去的几年中，我们学习了如何使用和逐渐接受印刷内容的相对单位。 多数值是rem或em ，而不是像font-size这样的属性使用像素。

Many developers still set an ‘initial’ font-size on the html or body tag, often using px as unit. If you don’t fully understand (and appreciate) relative units, this might be convenient for you, as all em and rem are now relative to that initial value.

许多开发人员仍在html或body标签上设置“初始” font-size ，通常以px为单位。 如果您不完全了解(并欣赏)相对单位，这对您可能会很方便，因为所有em和rem现在都相对于该初始值。

/* A body containing a font-size with absolute value */body { font-size: 14px; }/* The h1 will be 2em relative to 14px */h1 { font-size: 2em; }

Unfortunately, that initial value isn’t convenient for some users. You see, that browser setting I mentioned earlier, only sets the base font size. Every absolute unit (px, pt, inch, etc.) you use, overwrites that.

不幸的是，该初始值对于某些用户而言并不方便。 您会看到，我之前提到的浏览器设置仅设置基本字体大小。 您使用的每个绝对单位( px ， pt ， inch等)都会覆盖该单位。

/* Fictional browser setting */html { font-size: 18px; }/* The absolute unit in the body overwrites the browser setting */body { font-size: 14px; }

As a result, users who change the browser’s font size setting will still see text in 14px, even though they explicitly set the font size to something larger.

如此一来，即使用户将浏览器的字体大小设置显式设置为较大，更改浏览器字体大小设置的用户仍将看到14px文本。

Many sites, even high-profile ones, are guilty of this sin:

许多站点，甚至备受瞩目的站点，都对这种罪恶有罪：

缩放和字体大小之间的区别 (The Difference Between Zooming and Font Size)

One of the arguments I get is: “Zooming works, isn’t that the same thing?”

我得到的论据之一是：“缩放有效，是不是一回事？”

Pretty much all browsers have the ability to zoom in, which enlarges the entire page. Technically, it enlarges every unit, except for percentages. This is great for the visual impaired, like users suffering visual acuity (clarity). Most visual acuity can be corrected using glasses, but in too many cases, it can’t.

几乎所有浏览器都具有放大功能，可以放大整个页面。 从技术上讲，它会放大每个单位(百分比除外)。 这对于视力障碍者非常有用，例如遭受视敏度(清晰度)的用户。 大多数视力可以使用眼镜来矫正，但在很多情况下不能。

Changing the browser’s font size, however, exclusively changes the base font size. Some people have perfect vision, but have a reading disorder, like Dyslexia. In fact, 3-7% of the population suffer from Dyslexia, but up to 20% can experience its symptoms. Increasing font size can decrease the symptoms’ severity. Why should they zoom into a page, when they have the ability change the font size only?

但是，更改浏览器的字体大小仅会更改基本字体大小。 有些人拥有完美的视力，但有阅读障碍，例如诵读困难症。 实际上，有3-7％的人口患有阅读困难，但多达20％的人会出现这种症状。 增大字体大小可以降低症状的严重程度。 当他们只能更改字体大小时，为什么要放大页面？

正确的方式 (The Right Way)

Absolute units are the bad guys here. If we use relative units, like % and em, the browser’s settings are respected. By default, 1em is approximately 16px. So, if you really want to use a non-default font size, you can set font-size to .875em or 87.5% for 14px.

绝对单位是这里的坏人。 如果我们使用相对单位，例如%和em ，那么将遵守浏览器的设置。 默认情况下， 1em约为16px 。 因此，如果您确实要使用非默认字体大小，则可以将font-size设置为.875em或14px 87.5% 。

/*These are equivalent:- font-size: 100%;- font-size: 1em;- absent font-size property*/body { font-size: 1em; }/* If the users changes the browser setting, both the body text and h1 text will scale accordingly */h1 { font-size: 2em; }

Sites doing it right:

正确执行的网站：

结论 (Conclusion)

Absolute units for typographic properties is a common practice in the industry. Probably because it’s explicit, whereas relative units require some digging to find out why a deeply nested element may have a different computed font-size than an element in the body.

印刷属性的绝对单位是业界的惯例。 可能是因为它是显式的，而相对单位则需要进行一些挖掘，以找出为什么深层嵌套的元素与实体中的元素可能具有不同的计算font-size 。

The problem is that it is a major accessibility flaw. To make the web great for the visual impaired or those with a reading disability, we have to use relative units.

问题在于这是可访问性的主要缺陷。 为了使网络适合视障人士或阅读障碍者，我们必须使用相对单位。

翻译自:

字体大小 像素