CodePen Embed - font-variant-numeric example

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

<p lang="es-cl" class="ordinal">1a, 2a</p>

<p class="fraction">1/2 or 2/4</p>

@font-face {
  font-family: "Source Sans Pro";
  src: url("https://assets.codepen.io/32795/SourceSansPro-Regular.ttf")
    format("opentype");
  font-weight: 400;
  font-style: normal;
}

/*
 
*/

* {
  font-size: 1.25em;
}

.ordinal {
  font-variant-numeric: ordinal;
  font-family: "Source Sans Pro";
}

.zero {
  font-variant-numeric: slashed-zero;
  font-family: "Source Sans Pro";
}

.fraction {
  font-variant-numeric: diagonal-fractions;
  font-family: "Source Sans Pro";
}

Run Pen

This Pen is owned by Carlos Araya on CodePen.

See more by @caraya on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.