css_font-size单位em/ex/rem_compounding/问题/x-height&ex
reference
-
font-size CSS 属性指定字体的大小。
-
该属性的值会被用于计算em和ex长度单位，
所以定义该值可能改变其他元素的大小。
font-size 属性单的取值：
Em
- If a
font-sizehas not been set on any of the<p>'s ancestors, then1emwill equal the default browserfont-size, which is usually16px. So, by default1emis equivalent to16px, and2emis equivalent to32px. If you were to set afont-sizeof 20px on the<body>element say, then1emon the<p>elements would instead be equivalent to20px, and2emwould be equivalent to40px.
pixels to ems formula:
-
In order to calculate the
emequivalent for any pixel value required, you can use this formula:em = desired element pixel value / parent element font-size in pixelsFor example, suppose the
font-sizeof the<body>of the page is set to16px. If the font-size you want is12px, then you should specify0.75em(because 12/16 = 0.75). Similarly, if you want a font size of10px, then specify0.625em(10/16 = 0.625); for22px, specify1.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:
- 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 default
font-sizeis 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-sizeis 1.6em which is relative to its parent’sfont-size, which is in turn relative to its parent’sfont-size. This is often called compounding.
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
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
-
Like the
emunit, an element’sfont-sizeset using theexunit is computed or dynamic. -
It behaves in exactly the same way, except that when setting the
font-sizeproperty usingexunits, thefont-sizeequals thex-heightof the first available font usedon the page. -
The number value multiplies the element’s inherited
font-sizeand thefont-sizecompounds 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
- 这和把大写字母M的宽度称为一个em的习惯类似。
See the W3C Editor’s Draft for a more detailed description of font-relative length units such as ex.