font-variant-alternates:stylistic()函数实例页面

展示

代码

• HTML：

  <p>CSS selector &amp; new world</p>
  <p class="stylistic">CSS selecsor &amp; new world</p>

• CSS：

  @font-face {
      font-family: "Exo";
      font-style: normal;
      font-weight: 400;
      src: url(../images/exo-bold.woff2) format("woff2");
  }
  
  @font-feature-values Exo {
      @stylistic {
          any-style: 1;
      }
  }
  p {
      font-family: Exo;
  }
  .stylistic {
      font-variant-alternates: stylistic(any-style);
  }
  
  @supports not (font-variant-alternates:normal) {
      .stylistic {
          font-feature-settings: "salt" 1;
      }
  }