第13篇 字形font-style、字体拉伸font-stretch、字距调整font-kerning

255 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第6天,点击查看活动详情

字形 font-style

作用

指定字体的形态为常规【normal】斜体【italic】还是倾斜体【oblique】

默认值、适用元素、继承性和可动画性

默认值为normal,不可动画,可被继承,适用于所有元素。

属性值

  • normal 竖直体,无倾斜
  • italic 斜体,是单独的一种字体,除了倾斜外,外观也与竖直体不同
  • oblique 倾斜体,只是竖直体的倾斜版。
  • initial
  • unset
  • inherit

如果没有斜体,但是有倾斜体,用户代理会使用后者代替前者,但是无倾斜体,有斜体,并不会用斜体代替倾斜体。用户代理可以直接倾斜竖直体得到倾斜体。

字体拉伸 font-stretch

作用

用于将字体变为更瘦体或更胖体。

类似于font-size,适用于调整字体宽度的。不过只有当字体族有对应的加宽或缩窄的字体,否则什么也不会发生。

默认值、适用元素、继承性和可动画性

默认值为normal,不可动画,可被继承,适用于所有元素。

属性值

  • ultra-condensed 极窄
  • extra-condensed 特窄
  • condensed 窄
  • semi-condensed 有一点窄
  • normal 正常值
  • semi-expanded 有一点宽
  • expanded 宽
  • extra-expanded 特宽
  • ultra-expanded 极宽
  • initial
  • unset
  • inherit

属性值从上到下,对应的宽度是从低到高的。

字体拉伸 font-kerning

作用

有些字体定义了字符之间的距离,即字距。而不同的字符组合,字距是不一样的。而该属性就是为了让程序员决定是否取消字距。

属性值

auto、normal或none

  • none就是让用户代理忽略字距信息。
  • normal就是让用户代理正常处理字距信息。
  • auto就是将决定权交给用户代理,让用户代理选择合适的处理方式,当然具体做法由字体决定。

初始值、适用元素、继承性与动画性

初始值为auto,适用于所有元素。有继承性,无动画性。

cookbook

若是使用letter-spacing的同时使用该属性,应该先调整字距然后使用letter-spacing。