5.css字体

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

下面的用一个表格总结了文本样式中字体的一些设置方法：

属性名	说明	CSS 版本
font-size	设置字体的大小	1
font-variant	设置英文字体是否转换为小型大写	1
font-style	设置字体是否倾斜	1
font-weight	设置字体是否加粗	1
font-family	设置 font 字体	1
font	设置字体样式复合写法	1 ~ 2
@font-face	设置 Web 字体	3

表格里面的属性名都有一个特点，那就是都以font开头，说明这些属性都是针对与字体，下面来逐一介绍如何使用。

1.font-size

p {
font-size: 50px;
}

解释：这个属性是用来专门设置字体的大小的，除了可以使用自定义的大小之外，还有一些预设的值，有以下表格的值可供参考使用。

值	说明
xx-small	设置字体大小。每个值从小到大的固定值。而具体的数值其实是由浏览器来定义，可能出现浏览器间的差异，所以用的比较少。
x-small
small
medium
large
x-large
xx-large
smaller	设置字体相对于父元素字体的大小
larger
数字+px	使用 CSS 像素长度设置字体大小这里并不限定只能用px，其他度量单位也可以使用
数字+%	使用相对于父元素字体的百分比大小

这里要对smaller和larger进行一下说明，首先，这两个值要生效，要先对其父元素进行字体的大小设置之后，在用父元素作为参照，得出相对的大小。

//先设置父元素字体大小
body {
font-size: 50px;
}
//再设置相对小一些
p {
font-size: smaller;
}

而具体相对小多少，这些也是由浏览器定义的。

2.font-variant

表格里说的很清楚，这个属性只对英文字母有效，有下面的值可供使用。

值	说明
normal	表示如果以小型大写状态，让它恢复小写状态
small-caps	让小写字母以小型大写字母显示

这里先说small-caps，其实就是将所有的小写字母转换为大写，所谓的小型大写，也就是大写以后并不会改变字体的大小，不影响原来就有的大小字母。具体效果如下：

<span>Scolia</span>

未进行设置时：

设置后：

span {
font-variant: small-caps;
}

看到这里，我想你应该知道什么叫小型大写字母了。

继续讲normal这个值，这个值的应用场景是在于父元素已经先设置了small-caps这个值了，但是其子元素我不希望用small-caps这个值的效果显示，此时就可以用normal恢复默认的效果了。

//先让父元素设置小型大写
body {
font-variant: small-caps;
} //让子元素设置恢复小写
span {
font-variant: normal;
}

3.font-style

这个属性是设置字体是否倾斜，有下面的值可供选择。

值	说明
normal	表示让倾斜状态恢复到正常状态
italic	表示使用斜体
oblique	表示让文字倾斜。区别在没有斜体时使用

p {
font-style: italic;
}

解释:normal和上面一样，就不再说明了。这里说下oblique，这个值一般在字体文件没有斜体时使用，一般用户安装的中文字体都是含有斜体的，可能会在其他国家文字上使用，不过使用的不多。

4.font-weight

设置字体是否加粗或变细，有下面的值可以选择：

值	说明
normal	表示让加粗的字体恢复正常
bold	表示让加粗的字体恢复正常
bolder	更粗的字体
lighter	轻细的字体
100 ~ 900 之间的数字	600 及之后是加粗，之前不加粗

p {
font-weight: bold;
}

解释：使用lighter，会让字体比普通效果更细，但是bold和bolder的效果是一样的，浏览器体现不出其中的差别。

5.font-family

设定使用的字体的名称，当然这个字体要用户已经安装了的，不然没效。

p {
font-family: 微软雅黑; /*只声明一个字体，如用户没安装，则无效*/
} p {
font-family: 楷体,微软雅黑,宋体; /*使用备用字体，会依次查找，找的哪个用哪个*/
}

6.font

可以用一个属性，对上面的所有效果进行设置，其有效的值是一样的。

p {
font: 50px 楷体;
}

解释：其格式是这样的：[是否倾斜|是否加粗|是否转小型大写] 字体大小字体名称；[]代表可选，|代表用来分隔选项，并不是要将|写进去。

7.@font-face

为了防止自己使用的字体而客户端没有安装，造成现实效果与设计的不同的情况，可以在服务器提供相应的字体。

@font-face {
font-family: abc; /*为提供的字体起个别名方便引用*/
src: url('BrushScriptStd.otf'); /*字体文件的在服务器的路径*/
}p {
font-size: 50px;
font-family: abc; /*引用时使用别名*/
}

其实css中的字体属性和文本样式属性还是很容易高混的，因为它们的都针对与文字，下面我总结一些字体属性到底可是设置什么:

1.字体大小，特有

2.怪异的大小写，文本样式中也有关于大小写的设置，但对字体设置大小写会出现小型大写字母这种特殊效果

3.文字加粗，特有

4.文字倾斜，特有

5.字体控制，特有

其实总结起来，字体属性和文本样式属性真正作用有所重叠的地方就只有大小写这里，但因为字体等级的大小写的行为很怪异，不符合我们常规期待，所以还算好区分。

而感觉作用的效果来看，文字属性主要是设置一些很基本的东西，而文本样式属性这用于各种效果级的展示。