css_font-size单位em/ex/rem_compounding/问题/x-height&ex

文章目录

reference

font-size 属性单的取值：

Em

  • If a font-size has not been set on any of the <p>'s ancestors, then 1em will equal the default browser font-size, which is usually 16px. So, by default 1em is equivalent to 16px, and 2em is equivalent to 32px. If you were to set a font-size of 20px on the <body> element say, then 1em on the <p> elements would instead be equivalent to 20px, and 2em would be equivalent to 40px.
pixels to ems formula:

  • In order to calculate the em 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:

  • 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-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>'s font-size is 1.6em which is relative to its parent’s font-size, which is in turn relative to its parent’s font-size. This is often called compounding.

  • 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

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 the em unit, an element’s font-size set using the ex unit is computed or dynamic.

  • It behaves in exactly the same way, except that when setting the font-size property using ex units, the font-size equals the x-height of the first available font used on the page.

  • The number value multiplies the element’s inherited font-size and the font-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

    • 这和把大写字母M的宽度称为一个em的习惯类似。

See the W3C Editor’s Draft for a more detailed description of font-relative length units such as ex.

posted @   xuchaoxin1375  阅读(7)  评论(0)  编辑  收藏  举报  
相关博文：
· pixel(css pixel & device pixel)&resolution&css pixel(像素和分辨率)
· html_css_尺寸调整/调整图片样式(img/max-widht/object-fit)
· CSS 中 px、rem 与 em
· Em 和 Rem 的基本使用
· css中的px、em、rem的区别----整理
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示