PSD字符字重Light、Regular对应CSS font-weight的属性值参考

Web前端开发 / 6899 次阅读

css属性font-weight提供的属性值有normal、bold、bolder、lighter、100~900、inherit，而设计师提供的设计稿字符面板通常是这样的：

css-font-weight.jpg

而且设计师用字体的字重通常不只有一种，如Thin、UltraLight、Light、Regular、Medium、Semibold、bold、Extra Bold、Heavy等，如下图：

css-font-weight-2.jpg

那么如果在网页上引入字体，并设置font-weight属性值的时候，就需要使用数字值了（100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900），下面是数字值字重和英文字重的对照参考：

数值字重 英文字重
100 Thin
200 UltraLight（或Extra Light）
300 Light
400 Regular（或Normal、Book、Roman）
500 Medium
600 SemiBold（或DemiBold）
700 Bold
800 Extra Bold（或Ultra Bold）
900 Black（或Heavy）

引入字体CSS代码参考： 

@font-face{
	font-family:'SourceSansPro';
	src:url('../fonts/SourceSansPro-Light.eot'); /* IE9 Compat Modes */
	src:url('../fonts/SourceSansPro-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('../fonts/SourceSansPro-Light.woff') format('woff'), /* Modern Browsers */
		url('../fonts/SourceSansPro-Light.ttf')  format('truetype'), /* Safari, Android, iOS */
		url('../fonts/SourceSansPro-Light.svg#SourceSansPro') format('svg'); /* Legacy iOS */
	font-style:normal;
	font-weight:300;
}
@font-face{
	font-family:'SourceSansPro';
	src:url('../fonts/SourceSansPro-Regular.eot'); /* IE9 Compat Modes */
	src:url('../fonts/SourceSansPro-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('../fonts/SourceSansPro-Regular.woff') format('woff'), /* Modern Browsers */
		url('../fonts/SourceSansPro-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
		url('../fonts/SourceSansPro-Regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
	font-style:normal;
	font-weight:400;
}
@font-face{
	font-family:'SourceSansPro';
	src:url('../fonts/SourceSansPro-Semibold.eot'); /* IE9 Compat Modes */
	src:url('../fonts/SourceSansPro-Semibold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('../fonts/SourceSansPro-Semibold.woff') format('woff'), /* Modern Browsers */
		url('../fonts/SourceSansPro-Semibold.ttf')  format('truetype'), /* Safari, Android, iOS */
		url('../fonts/SourceSansPro-Semibold.svg#SourceSansPro') format('svg'); /* Legacy iOS */
	font-style:normal;
	font-weight:600;
}
@font-face{
	font-family:'SourceSansPro';
	src:url('../fonts/SourceSansPro-Bold.eot'); /* IE9 Compat Modes */
	src:url('../fonts/SourceSansPro-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('../fonts/SourceSansPro-Bold.woff') format('woff'), /* Modern Browsers */
		url('../fonts/SourceSansPro-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
		url('../fonts/SourceSansPro-Bold.svg#SourceSansPro') format('svg'); /* Legacy iOS */
	font-style:normal;
	font-weight:700;
}