css3引入字体与字重

950 阅读1分钟

最近发现自己写的样式总是一塌糊涂,及时很像了,也总是差点意思,仔细对照发现,原来是字体字重电脑上只有三种导致设计失去美感

首先跟大家介绍一下字体与字重(第四声)

一种完善的字体通常有好几个子重

如下表:

100 - 淡体 Thin ( Hairline ) 

200 - 特细 Extra-light ( ultra-light ) 

300 - 细体 Light 350 - 次细 Demi-Light 

400 - 标准 Regular ( normal / book / plain ) 

500 - 适中 Medium 

600 - 次粗 Demi-bold / semi-bold 

700 - 粗体 Bold 

800 - 特粗 Extra-bold / extra 

900 - 浓体 Black ( Heavy ) 

950 - 特浓 Extra-black ( Ultra-black )

但是对于我们开发来说,字重不是绝对的是可以自定义的

只需要简单的理解成 一个数字对应的是一种字体的粗细 就行

接下来是使用方法,以苹方字体为例

下面是我文件名对应的字体粗细

PingFang Heavy.ttf (苹方特粗体) 

PingFang Bold.ttf (苹方粗体) 

PingFang Medium.ttf (苹方中黑体) 

PingFang Regular.ttf (苹方常规体) 

PingFang Light.ttf (苹方细体) 

PingFang ExtraLight.ttf (苹方特细体)

1、首先引入字体到css文件

2、在css样式中使用

3、效果图