League Mono变量字体拉伸面实例页面

展示

代码

• HTML：

  <table width="300">
   <caption><small>不同font-stretch值LeagueMonoVariable字体的拉伸效果</small></caption>
   <thead>
    <tr>
     <th scope="col" align="left" width="70%">关键字值</th>
     <th scope="col" align="left">效果</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td><code>ultra-condensed (50%)</code></td>
     <td class="ultra-condensed">e</td>
    </tr>
    <tr>
     <td><code>extra-condensed (62.5%)</code></td>
     <td class="extra-condensed">e</td>
    </tr>
    <tr>
     <td><code>condensed (75%)</code></td>
     <td class="condensed">e</td>
    </tr>
    <tr>
     <td><code>semi-condensed (87.5%)</code></td>
     <td class="semi-condensed">e</td>
    </tr>
    <tr>
     <td><code>normal</code> (100%)</td>
     <td class="normal">e</td>
    </tr>
    <tr>
     <td><code>semi-expanded (112.5%)</code></td>
     <td class="semi-expanded">e</td>
    </tr>
    <tr>
     <td><code>expanded (125%)</code></td>
     <td class="expanded">e</td>
    </tr>
    <tr>
     <td><code>extra-expanded (150%)</code></td>
     <td class="extra-expanded">e</td>
    </tr>
    <tr>
     <td><code>ultra-expanded (200%)</code></td>
     <td class="ultra-expanded">e</td>
    </tr>
   </tbody>
  </table>

• CSS：

  @font-face {
    src: url("../images/LeagueMonoVariable.ttf");
    font-family: "LeagueMonoVariable";
    font-style: normal;
    font-stretch: 1% 500%; /* Chrome浏览器必须 */
  }
  td {
      font-family: "LeagueMonoVariable";
      font-size: 2rem;
      text-align: center;
      line-height: 1;
  }
  .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;
  }