font-stretch常见字体的拉伸面实例页面

展示

代码

• HTML：

  <table width="300">
   <caption><small>不同font-stretch值Arial, Helvetica Neue字体的拉伸效果</small></caption>
   <thead>
    <tr>
     <th align="left" width="60%">关键字值</th>
     <th align="left">效果</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td><code>ultra-condensed</code></td>
     <td class="ultra-condensed">e</td>
    </tr>
    <tr>
     <td><code>extra-condensed</code></td>
     <td class="extra-condensed">e</td>
    </tr>
    <tr>
     <td><code>condensed</code></td>
     <td class="condensed">e</td>
    </tr>
    <tr>
     <td><code>semi-condensed</code></td>
     <td class="semi-condensed">e</td>
    </tr>
    <tr>
     <td><code>normal</code></td>
     <td class="normal">e</td>
    </tr>
    <tr>
     <td><code>semi-expanded</code></td>
     <td class="semi-expanded">e</td>
    </tr>
    <tr>
     <td><code>expanded</code></td>
     <td class="expanded">e</td>
    </tr>
    <tr>
     <td><code>extra-expanded</code></td>
     <td class="extra-expanded">e</td>
    </tr>
    <tr>
     <td><code>ultra-expanded</code></td>
     <td class="ultra-expanded">e</td>
    </tr>
   </tbody>
  </table>

• CSS：

  .ultra-condensed {
      font-stretch: ultra-condensed;
  }
  .extra-condensed {
      font-stretch: ultra-condensed;
  }
  .condensed {
      font-stretch: condensed;
  }
  .semi-condensed {
      font-stretch: semi-condensed;
  }
  .ultra-expanded {
      font-stretch: ultra-expanded;
  }
  .extra-expanded {
      font-stretch: ultra-expanded;
  }
  .expanded {
      font-stretch: expanded;
  }
  .semi-expanded {
      font-stretch: semi-expanded;
  }