可变字体5个注册变化轴效果实例页面

展示

代码

• HTML：

  <h4>1. weight轴</h4>
  <div><input type="range" min="100" max="900" value="400" data-rel="weight"></div>
  <p class="weight-1" title="font-weight:400">CSS new world</p>
  <p class="weight-2" title="font-variation-settings: 'wght' 400">CSS new world</p>
  
  <h4>2. width轴</h4>
  <div><input type="range" min="35" max="100" value="100" data-rel="stretch"></div>
  <p class="stretch-1" title="font-stretch:100%">CSS new world</p>
  <p class="stretch-2" title="font-variation-settings: 'wdth' 100">CSS new world</p>
  
  <h4>3. Italic轴</h4>
  <div><input type="range" min="0" max="1" value="0" data-rel="italic"></div>
  <p class="italic-1" title="font-style:normal">CSS new world</p>
  <p class="italic-2" title="font-variation-settings: 'ital' 0">CSS new world</p>
  
  <h4>4. Slant轴</h4>
  <div><input type="range" min="0" max="12" value="0" data-rel="oblique"></div>
  <p class="oblique-1" title="font-style:oblique 0deg">CSS new world</p>
  <p class="oblique-2" title="font-variation-settings: 'slnt' 0">CSS new world</p>
  
  <h4>5. Optical size轴</h4>
  <div><input type="range" min="10" max="72" value="36" data-rel="optical"></div>
  <p class="optical-1" title="font-optical-sizing:auto">CSS new world</p>
  <p class="optical-2" title="font-variation-settings: 'opsz' 36">CSS new world</p>

• CSS：

  @font-face {
      font-family: "Amstelvar VF";
      src: url("./AmstelvarAlpha-VF.woff2") format("woff2-variations");
      font-weight: 100 900;
      font-stretch: 30% 100%;
      font-style: normal;
  }
  @font-face {
      font-family: "Roboto VF";
      src: url("./Roboto-VF.woff2") format("woff2-variations");
      font-weight: 100 900;
      font-stretch: 75% 100%;
      font-style: oblique 0deg 12deg;
  }
  @font-face {
      font-family: "Jost VF";
      src: url("./jost-VF.woff2") format("woff2-variations");
      font-weight: 300 900;
      font-stretch: 75% 150%;
  }
  p {
      font-family: "Amstelvar VF";
  }
  .oblique-1,
  .oblique-2 {
      font-family: "Roboto VF";
  }
  .italic-1,
  .italic-2 {
      font-synthesis: none;
      font-family: "Jost VF";
  }