variable_fonts_sample_1.scss

// Set up Roboto for old browsers, only regular + bold
@font-face {
  font-family: Roboto;
  src: url('Roboto-Regular.woff2');
  font-weight: normal;
}
@font-face {
  font-family: Roboto;
  src: url('Roboto-Bold.woff2');
  font-weight: bold;
}
body {
  font-family: Roboto;
}
.super-bold {
  font-weight: bold;
}
// Set up Roboto for modern browsers, all weights
@supports (font-variation-settings: normal) {
  @font-face {
    font-family: 'Roboto';
    src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'),
      url('RobotoFlex-VF.woff2') format('woff2-variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
  }
  .super-bold {
    // 你沒看錯，Roboto Flex 的字重最高可以到 1000，而且是無段調整
    font-weight: 1000;
   }
}