3.文字属性 font

目录

1 字体 font-family

2  字号 font-size

3  文字粗细 font-weight

4  文字样式 font-style

5  行高 line-height

6  统一设置

---

1 字体 font-family

字体是微软雅黑还是黑体这些，它是这样用的

也可以用一些英文字体，word里面那种字体基本都支持

可以在font-family中写多个字体

这样写之后，如果用户无法加载华文彩云字体，那么就会加载微软雅黑字体，如果微软雅黑字体也加载不了，就会使用浏览器默认字体

• 谷歌浏览器默认字体是微软雅黑

一般来讲，字体都是直接给body的，也需要看不同的需求

有时我们会遇到这种字体

上面画红框的字体是宋体，我们用Unicode编码代替了汉字，这样是为了照顾浏览器的兼容性才这样写，包括上面的华文彩云这种也应该这样写或者写英文

2  字号 font-size

它是这样用的

一般也是放在body中使用，不过标题标签如果想改变大小，需要单独设置，我们加一个标题看一下

我们可以看到它明显比100px要大

我们对其设置一下

现在它和100差不多了

3  文字粗细 font-weight

font-weight的可选值为normal,bold,bolder,lighter与数字，我们感受一下

• 数字后不加任何单位

• 数字400与normal效果相同,700与bold效果相同

使用标题标签(h)时，它默认的宽度有的是比较粗的，如果我们不想让他这么粗，可以使用font-weight让他变细 

4  文字样式 font-style

这个主要用来设置文字是否为斜体，他是这样用的

这样文字就变斜了

我们也可以让倾斜标签不倾斜

• em和i是倾斜标签

5  行高 line-height

我们现在觉得每一行文字的空隙都太大了，我们可以改变行高

这样就紧凑了许多

• 我们在这里就简单提一下，后面文本属性中会再次介绍行高的设置

6  统一设置

我们如果觉得每次都要写font-style这种变量名很麻烦，我们可以对自己进行统一设置，顺序为

1. font-style
2. font-weight
3. font-size/line-height
4. font-family

• line-height如果不想设置可以不用写

• 必须按这个顺序，不然就会失效

最多可以少写前两个(文字大小和字体必须存在)，但顺序不能变，比如我们现在不想要倾斜效果

• css中使用斜杠和星号进行屏蔽