第12篇 字重font-weight、字号font-size与字号调整font-size-adjust

赵晟鼎
948 阅读7分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情 以下属性的属性值都可以为 inital、inherit、unset

字重 font-weight

继承性与动画性

可继承，不可动画

初始值

normal

适用元素

适用于所有元素

作用

用于指定文 字的字重，一般字重越重，字体越黑、越粗。

属性值

具体值

属性值为100到900的数字，每个数字之间的间隔为100，无单位。除此之外还有normal、bold、bolder、lighter这几个关键字，其中normal和b old分别对应400、700。其他数字并不与关键字对应。

每个数字对应的权重至少和前面的数字具有相同的字重。所以100-400可能是一样的字重。

image.png

简单来说就是lighter和bolder会分为三档。

bolder的档分别为400【normal】、700【bold】和900。

  • 但凡原来继承值比400低的【不包括400】，在此处使用bolder之后，属性的计算值就变为了400。
  • 原来的继承值在600以下的【不包括600】，在400及400以上的，在使用了bolder之后，属性的计算值变为了700；
  • 剩余的情况的计算值为900.

lighter的情况和bolder类似，三档分别为：100、400、700：

  • 但凡继承值比600小的【不包括600】，使用lighter之后，计算值为100；
  • 600及600以上，800以下【不包括800】的，使用lighter之后，计算值为400；
  • 剩余情况，计算值为700；

回退机制

此处引用自MDN，因足够清楚故不作解释。

如果指定的权重值不可用，则使用以下规则来确定实际呈现的权重：

  • 如果指定的权重值在 400和 500之间（包括400和500）：

    1. 按升序查找指定值与500之间的可用权重；
    2. 如果未找到匹配项，按降序查找小于指定值的可用权重；
    3. 如果未找到匹配项，按升序查找大于500的可用权重。

  • 如果指定值小于400，开始按降序查找小于指定值的可用权重。如果未找到匹配项，按升序查找大于指定值的可用权重（先尽可能的小，再尽可能的大）。

  • 如果指定值大于500，按升序查找大于指定值的可用权重。如果未找到匹配项，按降序查找小于指定值的可用权重（先尽可能的大，再尽可能的小）。

字号 font-size

作用

指定字体的大小。因为该属性的值会被用于计算 em 和 ex 长度单位，定义该值可能改变其他元素的大小。

适用元素

所有元素

继承性和动画性

可继承，可动画【仅限数字关键字】

初始值

medium

属性值

属性值可以使用以下几种数值：

  • 关键字：xx-small, x-small, small, medium, large, x-large, xx-large，larger, smaller
  • <length>值：以px、em、rem、ex、cap、ch、ic、lh、rlh、vh、vw、vi、vb、vmin、vmax、px、cm、mm、Q、in、pc、pt作为单位的数或插值，具体请看值与单位。
  • <percentage>值：表示父元素字体大小的百分比数。、

其中： xx-small, x-small, small, medium, large, x-large, xx-large：

该套绝对大小关键字定义相对于用户的默认字体大小 (medium)。与展示 HTML 的 <font size="1"> 到 <font size="7">（用户默认字体大小 <font size="3">）类似，但不相同。注意： <font size="3">与medium等效，xx-small不等于<font size="1">。

larger, smaller：

比父元素的字体大或小，使用与上面的关键字的相近缩放比率。

渲染机制

该属性与渲染结果之间的关系由字体设计者决定。font-size属性的作用实际上是为字体的em框提供一个尺寸。

em边框与字体中字符的边界没有关系，其实它指的是在没有行距【line-height】的情况下两条基线之间的距离。字体的大小完全有可能超过em框，所以显示出来的字体不可能完全是指定的大小。

字号继承带来的问题

百分比或相对单位导致的问题

继承时，元素继承的是计算后的绝对单位的值。

但是这样就会出现下方的问题：

<p>
    字样1
    <p>
        字样2
        <p>
            字样3
        </p>
    </p>
</p>

p {
    font-size: 1.2em;
}

以上代码会导致字体越来越大，因为每次继承父节点的计算值之后，又会由font-size变大到原来的1.2倍

关键字和等宽文本的奇怪问题

如果用户没有改浏览器文本的默认字号，字号使用关键字书写，在子元素继承时可能和我们期望的大小一样，但也可能不是。

因为浏览器在继承时，是继承的关键字，为了计算出具体字号，浏览器会查看用户的偏好设置。有的标签在浏览器的偏好设置里的默认medium字号是不一样的。而由于继承到的就是关键字，关键字对应的字号却和父节点对应的字号不一样，所以可能导致一段文本中字体忽大忽小。

而这样的问题大多出现在包裹在p中的span中。

解决方案

以下css可以解决大部分浏览器的问题

p { 
    font-size: medium;
}
span {
    /*以下两行是关键点*/
    font-family: monospace, serif;
    font-size: 1em;
}

由于不改偏好设置的话，浏览器一般是等宽字体，这样做段落实际的字号就会根据实际值的100%来计算。不再根据medium计算了。

对于为什么要使用font-family: monospace, serif;在下请教了老师，以下为老师原话：

image.png

CookBook

最好使用用户默认字体大小的相对大小，避免使用除了 em 或 ex 的绝对大小单位。但是如果一定要使用绝对大小的话，px 是众多单位中最好的选择，因为它的含义不会随着操作系统所认为的屏幕分辨率的大小（通常是不对的）改变而改变。

自动调整字号 font-size-adjust

初始值

none

可继承性和动画性

都有

作用

字号和字体中字母x的高度会影响字体的清晰程度，x高度除以字号得到的值叫做高宽比值。

随着字号减小，高宽比值越高，越清晰。

而该属性就是用于改变字体族的高宽比值的。调整公式如下

font-size计算值 = font-size调整前的值 * (font-size-adjust值 / 字体的高宽比值)

应用场景

由于字体间外观的差异，一个字体在某个字号可能清晰，但是另一个字体在该字号下可能就不是很清晰了。

当文档的所用字体并不是创作人员首选的字体时，可以通过调整字体宽高比值来使得字体更清晰。

属性值

<number>或none或auto

  • none表示进制调整字号。
  • auto表示不需要我们指定，由用户代理自己去调整。但是前提是用户代理可以获知字体的宽高比值。若是使用@font-face【该规则用于指定字体文件自定义字体族，专栏后面讲】，如果字体文件中包含宽高比值，用户代理会自动获取并计算。如果没有的话，用户代理可能会自己计算，也不一定，具体看用户代理的底层实现。
  • <number>直接指定宽高比。
avatar
文章
阅读
粉丝