• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • 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;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    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-settingsfont-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
    <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;}
    
    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

    上篇:font-family

    下篇:font-kerning