font-stretch

版本：CSS3

font-stretch 属性为字体定义一个正常或经过伸缩变形的字体外观，这个属性并不会通过伸展/缩小而改变字体的几何外形，如font-feature-settings和font-variant属性，它仅仅意味着当有多种字体可供选择时，会为字体选择最适合的大小。

实例

/* keyword values */
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;

/* global values */
font-stretch: inherit;
font-stretch: initial;
font-stretch: unset;

浏览器支持

IE9以上以及其他浏览器都支持font-stretch

语法:

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

设置或检索对象中的文字是否横向拉伸变形。

• 文字的拉伸是相对于浏览器显示的字体的正常宽度。
• 对应的脚本特性为fontStretch。

1. 已支持font-stretch，但显示效果与正常文字并无不同。

font-stretch属性为字体定义一个正常或经过伸缩变形的字体外观，这个属性并不会通过伸展/缩小而改变字体的几何外形，如font-feature-settings和font-variant属性，它仅仅意味着当有多种字体可供选择时，会为字体选择最适合的大小。

注意：
如果字体提供多个面，font-stretch则选择最适合该属性值的一个面。例如，在OS X上，除了较常见的Bold，Regular，Italic和BoldItalic面外，“ Helvetica Neue”字体还建议使用缩略的第二组面，即缩略字符：Condensed。浏览器支持font-stretch将使用冷凝面的值ultra-condensed，以semi-condensed及用于其它正常表面（normal和所有展开的值）。
如果字体没有压缩或扩展的外观，如Mac OS上的默认“ Times New Roman”，font-stretch则不会有任何可见效果，因为在所有情况下都将使用唯一合适的外观。

默认值	normal
适用于	所有元素
继承性	有
动画性	是
计算值	指定值

取值:

• normal:指定默认字体。正常文字宽度
• semi-condensed,condensed,extra-condensed,ultra-condensed小于默认字体。
  1. semi-condensed:比正常文字宽度窄1个基数。
  2. condensed:比正常文字宽度窄2个基数。
  3. extra-condensed:比正常文字宽度窄3个基数。
  4. ultra-condensed:比正常文字宽度窄4个基数。
• semi-expanded,expanded,extra-expanded,ultra-expanded大于默认字体的值。
  1. semi-expanded:比正常文字宽度宽1个基数。
  2. expanded:比正常文字宽度宽2个基数。
  3. extra-expanded:比正常文字宽度宽3个基数。
  4. ultra-expanded:比正常文字宽度宽4个基数。

实例

HTML
 this is text with the font extremely expanded
 this is text with the font stretched
 this is text without font stretching
 this is text with the font condensed
 this is text with the font extremely condensed
CSS
.ultra.stretch{font-stretch: ultra-expanded;}
.stretch {font-stretch: expanded;} 
.normal {font-stretch: normal;}
.condensed {font-stretch: condensed;}
.ultra.condensed {font-stretch: ultra-condensed;}
div{font-stretch:expanded;}

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com