CSS字体设置

CSS字体

一.字体类型(font-family)

通过font-family设置字体类型，常见类型宋体，微软雅黑等
例如：

p{
    font-family:微软雅黑;
}

这些常见的类型具体到了某一种字体，接下来说一下通用的类型，也就是从其他角度将这些具体的类型进行了归类

通用字体

1. serif 衬线字体
2. sans-serif 非衬线字体
3. monospace 等宽字体
4. cursive 草书字体
5. fantasy 虚幻字体

注意：后三种字体在不同的浏览器显示效果差异很大，所以不推荐使用

p{
    font-family:serif;
}

对于衬线字体，包含了很多的具体的字体类型，具体使用那个具体类型，与浏览器有关。

设置字体类型时，可以设置多个

有下面两种情况：
1. font-family设置的字体类型某台计算机不支持。

p{
    font-family:不支持的字体;
}

对于设置了不支持的字体，浏览器会使用默认的字体

1. font-family设置的字体类型不支持中文，但是文本中却有中文。

   p{ font-family:arial; } arial是英文字体，所以不支持中文，对于这种情况，对于汉字的样式浏览器会使用默认字体

对于上述的两种情况，可以通过设置多个字体类型来解决。

font-family: 字体1，字体2，字体3;

如果字体1不能满足要求（没有这个字体，或者不支持汉字），则会使用字体2，以此类推，如果都不满足，则会采用默认字体

但是，采用默认的字体结果是不确定的，为了更好的展示网页，将最后一个字体设置为通用字体

font-family: 字体1， 字体2， 通用字体;

即使字体1，字体2都不能用，但是通用字体可以用，这样可以把网页尽可能最完美的显式

二.字体的颜色 (RGB值)

p{
    color: #------;
}

设置color（前景色）来设置字体颜色

三.字体大小(font-size)

对于网页中的每一个字符，都有一个不可见的矩形框，font-size就是修改这个矩形框的大小

p{
    font-size: --px;
}

四.字体的样式 (font-style)

可选值

1.normal 正常（默认值）
2.intalic 斜体
3.oblique 倾斜

对于后两个值，大部分浏览器不作区别，效果往往是相同的。

五.字体的粗细 (font-weight)

可选值

1.normal 正常（默认值） 2.bold 加粗

六.小型大写字母 (font-variant)

可选值

1.normal 正常（默认值） 2.small-caps 小型大写字母

解释一下，小型大写字母就是将文本中的小写字母变成大写字母，但是这些字符的大小会比原来的大写字母小

 

七.使用font一次性设置上述属性

先看这样的写法：

font-variant: small-caps;
font-weight: bold;
font-italic: intalic;
font-size: 50px;
font-family: 微软雅黑

写的很麻烦，所以可以像下面这样简写

font: small-caps bold italic 50px 微软雅黑;

注意，字体类型和字体大小必须写，缺一不可，字体类型必须写在最后，字体大小必须写在倒数第二个，其他属性的顺序则无所谓，其他的属性不写则使用默认值

在设置font时，可以设置行高，如果不设置行高，这里会有一个默认值

p{
    font: 50px/100px 微软雅黑;
}

50px/100px表示字体大小50px，行高100px

由于使用了默认值，所以，这里又有一个陷阱

p{
    line-height: 100px;
    font: 50px 微软雅黑;
}

这里行高首先被设置为100px，接下来设置font时，由于设置字体大小时没有给出行高，所以行高被设置成了一个默认值，则上面的设置被覆盖，所以，应该将行高设置放在font里，或者放在font下面

解决方法1：

p{
    font: 50px 微软雅黑;
    line-height: 100px;
}

解决方法2：

p{
    font: 50px/100px 微软雅黑;
}