扯了一下css的单位和字体

我一直很想知道,当我们说一个字体是12px的时候,这个12px到底是指字体的高度,宽度 还是 对角线长度?

于是我打开ps,打了几个字数了一下,结论就是,当我们提及一个字体为12px的时候,这个字体的 高度约等于 12px的.
12px-ps

从上图可以看出,12px并不是指12格,换个字体也是一样,12px并不意味着字体的高度就会占用12个格.

那一个字体的高度是由什么决定的呢?

我们平常所说的字体大小(font-size) 是根据一个叫做 em 的单位来衡量的.通常呢,字体设计师必须在一个高度范围内对字体进行设计,我们假设这个高度是1000好了,那么这 1000 我们就称之为 1em.对应我们封面的图,我们说设计师拥有的高度范围就是指 升部线(ascender)降部线(descender) 之间的范围.然而为了让字体有特色,字体设计师并不会把类似于bfl这样的字母顶部触碰到 升部线,也不会把类似于pqy这样的字母底部触碰到 降部线.

所以,两个不同的字体即使大小的数字量是同样大的,他们看起来也不一定一样大

所以,为了视觉平衡还需要进行补差,过于纠结考虑字体的大小没有什么意义

em 一开始指的是一个大写M的高度


css 单位

在web开发中,不可避免的就是数字和单位.css中的数据就是由一个合法的数字之后紧随一个单位组成的.当然,如果数据是,0后面可以省略单位.

css的单位分为两种,一种是 绝对长度,另一种是 相对长度

绝对长度(Absolute Lengths)

绝对长度是一种确定的长度,就是说,你说1cm,他就是1cm.他不会根据其他元素的数据变动.

但是绝对长度并不推荐使用于显示在屏幕上,毕竟因为屏幕尺寸分辨率等原因可能会导致1cm没有那么1cm.但是呢,很适用于打印品场合.就是说你要打印这个网页出来,1cm就是1cm.

绝对长度有以下这些:

  • cm (厘米)

  • mm (毫米)

  • in (英尺)

  • px (像素)

  • pt (点)

  • pc (皮卡斯)

他们的对应关系是: 1in = 96px = 72pt = 2.54cm = 6pc

猎奇的我,尝试了一下用以下代码,画一个96px的 <div>,看看它是不是真的是 2.54cm,或者他的转换关系如何.
代码如下:

<!DOCTYPE html>
<html>
<head>
    <style>
        .div1{
            display: inline-block;
            height:96px;
            width: 100px;
            background-color: bisque;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
</body>
</html>

结果,在我的屏幕上用常规的尺子一量,是2.7cm左右.所以,我尝试着找出他们的对应关系.

(我的测试环境是 windows 8.1,chrome,屏幕分辨率1920x1080,屏幕尺寸25英寸)

为了得到结果需要知道一个概念: 点距(dot pitch),他指的是屏幕中像素点与像素点之间的距离.
what is dot pitch
也就是想要得到实际长度的话,可以用 像素长度(px) x 点距(dot pitch) 来计算.

点距一般可以在产品参数中找到,当然,也可以使用尺子去量一下屏幕长宽再去计算,但是一般不用那么麻烦.这里提供一个网站可以计算你的屏幕点距

我屏幕的点距是 0.288mm 左右,所以 96px x 0.288mm ≈ 2.7cm

(不过,一般来说没有考虑的这么仔细啦~自己留个心眼儿知道就行~)


相对长度(Relative Lengths)

相对长度就是会根据某个元素的某个属性值来计算出实际长度的一种长度.他特别适用于适配不同的屏幕大小.

相对长度有以下这些:

  • em (根据字体的font-size变化)

  • ex (根据当前字体的x-height变化,非常少用的单位)

  • ch (根据数字'0'的宽度变化)

  • rem (根据根元素的font-size变化)

  • vw (根据页面的viewport属性获取屏幕宽度的1%)

  • vh (根据页面的viewport属性获取屏幕高度的1%)

  • vmin (根据页面的viewport属性中宽度和高度的最小值者获取屏幕的1%长度)

  • vmax (根据页面的viewport属性中宽度和高度的最大值者获取屏幕的1%长度)

  • % (根据父元素的长度/宽度变化)

上面的介绍是直接在w3c里面翻译摘抄出来的,但是这样的话里面有很多不明确的地方.

em

比如,下面的代码

<!DOCTYPE html>
<html>
<head>
    <style>
        .div1{
            display: inline-block;
            font-size: 50px;
            background-color: red;
        }
        .div2{
            display: inline-block;
            font-size: 20px;
            width: 20em;
            background-color: gray;
        }
    </style>
</head>

<body>
    <div class="div1">
        <div class="div2">hello</div>
    </div>  
</body>
</html>

div2 的宽度,到底是根据div2的font-size属性去计算的,还是根据div1的font-size去计算的.实现的效果如下:
div2的宽度
(div的宽度为400px = 20px x 20em)

结论:当当前元素有设置font-size的时候,当前元素的其他属性会根据当前元素的font-size来计算,否则根据上一个有设置font-size的父元素来计算




rem

rem会根据根元素的font-size属性来变化,即是<html>标签中的font-size属性.
一般浏览器的默认字体大小都是16px .也就是假设有一个元素的高度设置为10rem,那他的实际高度就是16px x 10 = 160px.




vw,vh,vmin,vmax

假设页面中有一个meta标签是这样的

<meta name="viewport" content="width=480px,height=680px">

(viewport都可以写成另一篇新的文章了~这里就不展开讲了)
1vw = 480px /100 = 4.8px,1vh = 680px /100 = 6.8px

上面的viewport中,width和height两个值,比较大的那个值是height,即680px,
1vmax = 680px /100 = 6.8px ,同理, 1vmin = 480px /100 = 4.8px
vmin and vmax

  css 字体 设计