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:指定默认字体。正常文字宽度
• 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
<div class="ultra stretch"> this is text with the font extremely expanded</div>
<div class="stretch"> this is text with the font stretched</div>
<div class="normal"> this is text without font stretching</div>
<div class="condensed"> this is text with the font condensed</div>
<div class="ultra condensed"> this is text with the font extremely condensed</div>

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;}