利用混合字体-节省字体大小

参考https://www.cnblogs.com/xiaoyuxy/p/12038699.html#part_five

引入字体

@font-face {
font-family: 'MPLUS1';
font-display: block;
src: url('../fonts/MPLUS1-VariableFont_wght.ttf'); //该字体是由同一个字体的不同形式的字体 混合压缩得到
}

 

使用字体

const NavsWrapper = styled.div`
font-family: 'MPLUS1';
font-size: 14px;
font-variation-settings: 'wght' 400; //关键
line-height: 20px;
.aaa {
font-family: 'MPLUS1';
font-size: 30px;
font-variation-settings: 'wght' 400;//关键
line-height: 40px;
}
.bbb {
font-family: 'MPLUS1';
font-size: 62px;
font-variation-settings: 'wght' 800;//关键
line-height: 90px;
}
`