字体样式

设置字体颜色，使用color来设置文字的颜色，
color：前景色，就是文字的颜色
设置文字的大小,浏览器中一般默认的文字大小都是16px
font-size设置的并不是文字本身的大小
在页面中，每个文字都是处在一个看不见的框中的
我们设置的font-size实际上是设置格的高度，并不是字体的大小
一般情况下文字都要比这个格要小一些。也有时会比格大。
根据字体不同，显示效果也不同。
font-size:20px;

通过font-family可以指定文字的字体
当采用某种字体时，如果浏览器支持则使用该字体
如果不支持，则使用默认字体
该样式可以同时指定多个字体，根据逗号分开
当采用多个字体时，浏览器会优先使用前面的字体，如果前边没有在尝试下一个。

font-family：微软雅黑

font-style:(设置斜体等等)
font-weight（设置字体的粗细程度，bold加粗）
font-variant：small-caps（设置小型大写字母）
每一个都要写太麻烦，在css中还未我们提供了一个样式叫font
使用该样式可以同时设置字体相关的所有样式
可以将字体的样式的值，统一写在font样式中，不同的值之间使用空格分开
使用font设置字体样式时，斜体加粗大小字母，没有顺序要求，甚至可写可不写
如果不写则使用默认值，但是要求文字的大小和字体必须写
而且字体必须是最后一个
大小必须是倒数第二个样式。
实际上使用简写有比较好的性能

字体的分类
在网页中将字体分为五大类：
serif（衬线字体）
sans-serif（非衬线字体）
monospace（等宽字体）
cursive（草书字体）
fantasy（虚幻字体）
可以将字体设置为这些大的分类，当设置为大的分类以后，浏览器会自动选择指定的字体并应用样式。

行高
在css并没有为我们提供一个直接设置行间距的方式
我们只能通过设置行高来简介的设置行间距，行高越大行间距越大
使用line-height来设置行高
行间距 = 行高-字体大小
通过设置lineheight可以间接设置行高，
可以接受的值：
1、直接接收一个大小px
2、可以指定一个百分数，则会相对于字体大小去计算行高
3、可以直接传一个数值，则行高会设置字体大小相应的倍数
对于单行文本来说，可以将行高设置为和父元素高度一致，这样可以使单行文本在父元素中垂直居中
在font里面也可以设置行高：就是在字体大小后面添加/行高，来指定行高，该值是可选的，如果不指定，会使用默认值。所以line-heiht一定要在font后面，要不然font的行高使用默认值覆盖前面的line-height。
font：30px/30px，“温软雅黑”

猜你喜欢