1. 字体相关的样式

  • color用来设置字体颜色
  • font-size字体的大小
  • font-family字体族（字体的格式）

font-family

  • serif 衬线字体
  • sans-serif 非衬线字体
  • monospace 等宽字体
  • cursive 手写体
  • fantasy 梦幻字体

上述字体不是表示具体的某种字体，而是字体的分类

1.1 font-style属性

font-style属性指定文本的字体样式。

值 描述
normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。
inherit 规定应该从父元素继承字体样式。

1.2 font-size属性

font-size 属性设置文本的大小。

能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。

请务必使用正确的HTML标签，就<h1> - <h6>表示标题和<p>表示段落：

字体大小的值可以是绝对或相对的大小。

绝对大小：

  • 设置一个指定大小的文本

  • 不允许用户在所有浏览器中改变文本大小

  • 确定了输出的物理尺寸时绝对大小很有用

相对大小：

  • 相对于周围的元素来设置大小

  • 允许用户在浏览器中改变文字大小

默认大小和普通文本段落一样，是16像素（16px=1em）。

1.3 font-weight属性

font-weight 属性设置文本的粗细

值 描述
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
100、200、300…… 定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold。
inherit 规定应该从父元素继承字体的粗细。

1.4 font-variant属性

font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小

font-variant 属性主要用于定义小型大写字母文本

值 描述
normal 默认值。浏览器会显示一个标准的字体。
small-caps 浏览器会显示小型大写字母的字体。
inherit 规定应该从父元素继承 font-variant 属性的值。

1.5 font属性

font 简写属性在一个声明中设置所有字体属性。

可设置的属性是（按顺序）： “font-style font-variant font-weight font-size/line-height font-family”（字体风格、字体异体、字体粗细、字体大小、字体类型）

font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。

2. @font-face

我们除了可以使用系统自带的字体样式外，还可以在服务器端自定义字体位置
@font-face可以将服务器中的字体直接提供给用户去使用。其基本语法格式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
@font-face {
    /* 指定字体名字 */
    font-family: 'myFont1';
    /* 服务器中字体路径 */
    src: url('/font/ZCOOLKuaiLe-Regular.woff'),
        url('/font/ZCOOLKuaiLe-Regular.otf'),
        url('/font/ZCOOLKuaiLe-Regular.ttf') format('truetype');/* 指定字体格式，一般不写 */
}
p {
    font-size: 30px;
    color: salmon;
    font-family: myFont1;
}