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
Ultra-condensed text
Extra-condensed text
Condensed text
Semi-condensed text
Normal 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 属性将不起作用。