设置字体颜色,使用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,“温软雅黑”