Alice-Ti

Appearance

通过@font-face引用字体文件较大 ​

使用 font-display 属性

css
font-display: swap;

它的加载方式是，页面加载中的时候，用默认字体进行显示，等字体加载完成后，页面字体会 自动更新，并且不会阻塞页面渲染和操作，所以第二位的字体尽量找比较接近的系统字体做替代显示

css
// OPPOSans
@font-face {
    font-family:'OPPOSans';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local('OPPOSans'),
            url('https://************/fonts/OPPOSans-L.woff') format('woff'),
            url('https://************/fonts/OPPOSans-L.ttf') format('ttf');
}

设置字体顺序的地方需要把 新字体 放在第一位：

css
body {
  font-family: 'OPPOSans',Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}