网页需要自定义一套字体，需要有正常，细，粗不同的效果，中文字体一般比较大，我比较常用的是使用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; }