网站源码分享网站搜索量查询
在网页设计中，字体的使用对于提升用户体验和页面美观性至关重要。CSS 提供了一系列字体属性，用于控制文本的显示效果。以下是对 CSS 字体属性的详细学习笔记。
一、字体系列（font-family）
1. 字体系列的分类
在 CSS 中，字体系列分为两类：
-
通用字体系列：拥有相似外观的字体系统组合，如 "Serif"、"Sans-serif"、"Monospace" 等。
-
特定字体系列：一个特定的字体系列，如 "Times New Roman"、"Arial"、"Courier New" 等。
2. 常见字体系列对比
表格
复制
| 通用字体系列 | 字体系列 | 说明 |
|---|---|---|
| Serif | Times New Roman<br>Georgia | Serif 字体中字符在行的末端拥有额外的装饰 |
| Sans-serif | Arial<br>Verdana | "Sans" 意为无，这些字体在末端没有额外的装饰 |
| Monospace | Courier New<br>Lucida Console | 所有的等宽字符具有相同的宽度 |
3. 设置字体系列
font-family 属性用于设置文本的字体系列。建议设置多个字体名称作为“后备”机制，以防浏览器不支持第一种字体。如果字体系列名称包含多个单词，需要用引号括起来。
示例：
css
复制
p {font-family: "Times New Roman", Times, serif;
}二、字体样式（font-style）
font-style 属性用于指定文本的字体样式，主要有以下三个值：
-
normal：正常显示文本 -
italic：以斜体字显示文本 -
oblique：文字向一边倾斜（与斜体类似，但支持度较低）
示例：
css
复制
p.normal {font-style: normal;
}p.italic {font-style: italic;
}p.oblique {font-style: oblique;
}三、字体大小（font-size）
font-size 属性用于设置文本的大小。字体大小的值可以是绝对大小或相对大小。
1. 绝对大小
-
设置一个指定大小的文本
-
不允许用户在所有浏览器中改变文本大小
-
在确定输出的物理尺寸时非常有用
示例：
css
复制
h1 {font-size: 40px;
}h2 {font-size: 30px;
}p {font-size: 14px;
}2. 相对大小
-
相对于周围的元素来设置大小
-
允许用户在浏览器中改变文字大小
默认情况下，浏览器中普通文本段落的字体大小是 16 像素（16px = 1em）。
示例：
css
复制
h1 {font-size: 2.5em; /* 40px / 16 = 2.5em */
}h2 {font-size: 1.875em; /* 30px / 16 = 1.875em */
}p {font-size: 0.875em; /* 14px / 16 = 0.875em */
}3. 使用百分比和 em 组合
为了在所有浏览器中实现一致的文本大小调整，可以将 <body> 元素的默认字体大小设置为百分比，然后使用 em 单位设置其他元素的字体大小。
示例：
css
复制
body {font-size: 100%;
}h1 {font-size: 2.5em;
}h2 {font-size: 1.875em;
}p {font-size: 0.875em;
}四、字体粗细（font-weight）
font-weight 属性用于指定字体的粗细。常见的值包括：
-
normal：正常粗细 -
bold：加粗 -
bolder：更粗 -
lighter：更细 -
数字（100 到 900）：数字越大，字体越粗
示例：
css
复制
p.normal {font-weight: normal;
}p.bold {font-weight: bold;
}p.bolder {font-weight: bolder;
}p.lighter {font-weight: lighter;
}五、小型大写字体（font-variant）
font-variant 属性用于指定文本是否以小型大写字体显示。主要值包括：
-
normal：正常字体 -
small-caps：小型大写字体
示例：
css
复制
p.normal {font-variant: normal;
}p.small-caps {font-variant: small-caps;
}六、字体简写属性（font）
font 属性允许在一个声明中设置所有的字体属性，包括 font-style、font-variant、font-weight、font-size、line-height 和 font-family。
示例：
css
复制
p {font: italic small-caps bold 16px/30px Georgia, serif;
}