CSS 字体拉伸

CSS 字体拉伸

CSS font-stretch 属性用于加宽或缩窄网页上的文本。例如,

body {

font-family: Arial, sans-serif;

}

p.normal {

font-stretch: normal;

}

p.condensed {

font-stretch: condensed;

}

浏览器输出

在此,font-stretch: condensed 会缩窄字符的宽度。

css-font-stretch-syntax CSS 字体拉伸语法

font-stretch 属性具有以下语法,

font-stretch: normal | semi-condensed | condensed | extra-condensed | ultra-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded

CSS font-stretch 的可能值显示在下表中

字体样式值

描述

normal

字体样式的默认值,字体显示为正常宽度

semi-condensed

字体比正常宽度稍微窄一些

condensed

字体比 semi-condensed 窄

extra-condensed

字体比 condensed 窄

ultra-condensed

字体比 extra-condensed 窄

semi-expanded

字体比正常宽度宽一些

expanded

字体比 semi-expanded 宽

extra-expanded

字体比 expanded 宽

ultra-expanded

字体比 extra-expanded 宽

percentage

介于 50% 和 200%(含)之间的值不允许负值。

font-stretch 示例

HTML

CSS

Using font-stretch

Ultra-condensed text

Extra-condensed text

Condensed text

Semi-condensed text

Normal text

Semi-expanded text

Expanded text

Extra-expanded text

Ultra-expanded text

body {

font-family: Arial, Helvetica, sans-serif;

}

/* sets font-stretch to Ultra-condensed*/

p.ultra-condensed {

font-stretch: ultra-condensed;

}

/* sets font-stretch to Extra-condensed*/

p.extra-condensed {

font-stretch: extra-condensed;

}

/* sets font-stretch to Condensed */

p.condensed {

font-stretch: condensed;

}

/* sets font-stretch to Semi-condensed */

p.semi-condensed {

font-stretch: semi-condensed;

}

/* sets font-stretch to Normal */

p.normal {

font-stretch: normal;

}

/* sets font-stretch to Semi-expanded */

p.semi-expanded {

font-stretch: semi-expanded;

}

/* sets font-stretch to Expanded */

p.expanded {

font-stretch: expanded;

}

/*sets font-stretch to Extra-expanded */

p.extra-expanded {

font-stretch: extra-expanded;

}

/* sets font-stretch to Ultra-expanded */

p.ultra-expanded {

font-stretch: ultra-expanded;

}

浏览器输出

在上例中,输出显示了根据不同的 font-stretch 值而具有不同宽度的文本。

注意:如果当前字体不支持 condensed 和 expanded 字面量,font-stretch 属性将不起作用。

相关阅读