font-optical-sizing属性与可变字体实例页面

展示

代码

• HTML：

  <p class="optical-sizing" title="font-optical-sizing:auto">CSS new world</p>
  <p class="no-optical-sizing" title="font-optical-sizing:none">CSS new world</p>

• CSS：

  @font-face {
      font-family: "Amstelvar VF";
      src: url("./AmstelvarAlpha-VF.woff2") format("woff2-variations");
  }
  p {
      font-size: 2rem;
      font-family: "Amstelvar VF";
  }
  .no-optical-sizing {
      font-optical-sizing: none;
  }