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

网页需要自定义一套字体，需要有正常，细，粗不同的效果，中文字体一般比较大，我比较常用的是使用Forntmin对字体进行压缩，最近在修改一个网页的时候，发现自定义字体情况下，使用blod可以加粗，可是使用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代替，使用字符串的形式会发现，blod有效，而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;
        }

本文地址：@font-face自定义一套字体可以实现font-weight切换不同粗细的字体-七彩资源