css_font-size单位em/ex/rem_compounding/问题/x-height&ex-CFANZ编程社区

文章目录

reference
font-size 属性单的取值：

pixels to ems formula:
特点
compounding 问题

ex补充资料(x-height)

x-height

reference

font-size - CSS: Cascading Style Sheets | MDN (mozilla.org)
font-size - CSS（层叠样式表） | MDN (mozilla.org)
font-size CSS 属性指定字体的大小。
该属性的值会被用于计算em和ex长度单位，所以定义该值可能改变其他元素的大小。

font-size 属性单的取值：

Em

If afont-size has not been set on any of the<p>'s ancestors, then1em will equal the default browserfont-size, which is usually16px. So, by default1em is equivalent to16px, and2em is equivalent to32px. If you were to set afont-size of 20px on the<body> element say, then1em on the<p> elements would instead be equivalent to20px, and2em would be equivalent to40px.

pixels to ems formula:

In order to calculate theem equivalent for any pixel value required, you can use this formula:

em = desired element pixel value / parent element font-size in pixels

For example, suppose the font-size of the <body> of the page is set to 16px. If the font-size you want is 12px, then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px, then specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em (22/16).

特点

一个流行的技巧是设置body元素的字体大小为62.5% (即默认大小16px的62.5%(5/8))，等于10px。
现在你可以通过计算基准大小10px的倍数，在任何元素上方便的使用em单位。

这样有6px = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em。

font-size属性的em和ex单位值相对于父元素的字体大小（不像其他属性，它们指的是相对当前元素的字体大小）。

这意味对于font-size属性来说，em单位和(相对于父元素字体大小)百分比单位的作用是一样的。

compounding 问题

One important fact to keep in mind: em values compound. Take the following HTML and CSS:

html {
  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
}
span {
  font-size: 1.6em;
}

html

<div>
<span>Outer <span>inner</span> outer</span>
</div>

The result is:

Assuming that the browser’s defaultfont-size is 16px,
the words “outer” would be rendered at 16px, but the word “inner” would be rendered at 25.6px.
This is because the inner<span>'sfont-size is 1.6em which is relative to its parent’sfont-size, which is in turn relative to its parent’sfont-size. This is often calledcompounding.
Ems

Using an em value creates a dynamic or computed font size (historically the em unit was derived from the width of a capital “M” in a given typeface.). The numeric value acts as a multiplier of the font-size property of the element on which it is used.

REM

Rems

rem values were invented in order to sidestep the compounding problem. rem values are relative to the root html element, not the parent element. In other words, it lets you specify a font size in a relative fashion without being affected by the size of the parent, thereby eliminating compounding.

The CSS below is nearly identical to the previous example. The only exception is that the unit has been changed to rem.

EX

Ex
Like theem unit, an element’sfont-size set using theex unit is computed or dynamic.
It behaves in exactly the same way, except that when setting thefont-size property usingex units, thefont-size equals thex-height of thefirst available font usedon the page.
The number value multiplies the element’s inheritedfont-size and thefont-size compounds relatively.

ex补充资料(x-height)

x-height

x字高
在西文字体排印学中，x字高，（英语：x-height或corpus size）是指字母的基本高度，精确地说，就是基线（英语：baseline）和主线之间的距离。特别的，它指称一个字体中小写字母x的高度（这也是这个词的语源），而实际上这也和字母a、c、e、m、n、o、r、s、u、v、w和z的高度是一样的。
尽管如此，在现代字体设计领域里，x字高代表了一个字体的设计因素，因此在一些场合，字母x本身并不完全等于x字高。
在西文中，除了上文提到的字母(a、c、e、m、n、o、r、s、u、v、w,x和z)以外，其他小写字母的字高都要比x字高要大，并分为两类，一种是含有降部的字母，字母的笔画向下超过了基线，比如字母y、g、q和p；另一类是含有升部的字母，字母笔画含有向上部分，如l、k、b和d。
x字高和字母主字高（英语：body height）的比例是考察一个字体设计的重要因素。
在西文的具体字体以及排版术语中，x字高通常被称为一个ex