A-A+

@font-face自定义一套字体可以实现font-weight切换不同粗细的字体

2024年08月03日建站相关暂无评论阅读 38 次

网页需要自定义一套字体，需要有正常，细，粗不同的效果，中文字体一般比较大，我比较常用的是使用Forntmin对字体进行压缩，最近在修改一个网页的时候，发现自定义字体情况下，使用bold可以加粗，可是使用lighter无法实现字体变细，找了下问题，发现是在定义字体的时候，不能使用字符串，应该是数值去定义font-weight的原因。比如下面以小米的字体为例，有需要三个字体，正常，加粗，加细的，应该使用下面的方式定义

@font-face {
        font-family: "MiSans";
        src: url('../fonts/min/MiSans-Light.woff') format('woff'),
        url('../fonts/min/MiSans-Light.ttf') format('truetype');
        font-weight: 300;
        font-style: normal;
}
@font-face {
        font-family: "MiSans";
        src:url('../fonts/min/MiSans-Normal.woff') format('woff'),
        url('../fonts/min/MiSans-Normal.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
}
@font-face {
        font-family: "MiSans";
        src: url('../fonts/min/MiSans-Medium.woff') format('woff'),
        url('../fonts/min/MiSans-Medium.ttf') format('truetype');
        font-weight: 700; /*不要用 blod*/
        font-style: normal;
}

三个font-family的名称要一致，才是一套的，最主要的，font-weight这里不能使用light，normal，blod代替，使用字符串的形式会发现，bold有效，而light会无效，如果用数值，就可以正常显示三种粗细的字体，后期使用不同的字体，只需要定义好font-weight


       .light-text {
            font-family: 'MiSans';
            font-weight: 300;
        }

        .normal-text {
            font-family: 'MiSans';
            font-weight: 400;
        }

        .bold-text {
            font-family: 'MiSans';
            font-weight: 700;
        }