font-variant-numeric:ordinal序数效果实例页面

展示

代码

• HTML：

  <p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p>

• CSS：

  @font-face {
      font-family: "Source Sans Pro";
      font-style: normal;
      font-weight: 400;
      src: url("./SourceSansPro-Regular.otf") format("opentype");
  }
  
  .ordinal {
      font-variant-numeric: ordinal;
      font-family: "Source Sans Pro";
  }