CSS字体完全指南
编程小白的超详细CSS字体属性详解，轻松掌握文字美化技巧
你好！如果你是编程小白，这份指南将用最简单的方式解释CSS中字体相关的各种属性。
字体是网页设计的灵魂，好的字体选择能让你的网站美观又专业。CSS提供了丰富的字体控制属性，让我们一起来探索吧！
下面我将所有字体属性分成几个类别，每个属性包含：是什么、怎么用、示例效果。让我们开始学习！
基础字体属性
font-family – 字体系列
设置文本使用的字体。可以指定多个字体作为备选，用逗号分隔。浏览器会优先使用第一个，如果没有则尝试下一个。
/* 设置字体 */
font-family: ‘Roboto’, Arial, sans-serif;
/* 意思：优先使用Roboto，如果没有就用Arial，还没有就用系统默认无衬线字体 */
font-family: ‘Roboto’, Arial, sans-serif;
/* 意思：优先使用Roboto，如果没有就用Arial，还没有就用系统默认无衬线字体 */
效果
这是默认字体效果
这是特殊字体效果 (Lobster)
字体名称如果是多个单词（如Times New Roman），需要加引号
font-size – 字体大小
设置文字的大小。常用单位：px（像素）、em（相对于父元素）、rem（相对于根元素）、%（百分比）。
font-size: 16px; /* 固定大小 */
font-size: 1.2rem; /* 相对于根元素字体大小 */
font-size: 150%; /* 相对于父元素字体大小 */
font-size: 1.2rem; /* 相对于根元素字体大小 */
font-size: 150%; /* 相对于父元素字体大小 */
效果
默认大小 (1rem)
放大字体 (2rem)
字体样式属性
font-weight – 字体粗细
设置文字的粗细程度。常用值：normal（正常）、bold（加粗）、也可以使用100-900之间的数字（100最细，900最粗）。
font-weight: bold; /* 加粗 */
font-weight: 400; /* 正常粗细 */
font-weight: 700; /* 相当于bold */
font-weight: 400; /* 正常粗细 */
font-weight: 700; /* 相当于bold */
效果
正常粗细 (400)
细体文字 (300)
粗体文字 (700)
不是所有字体都支持所有粗细值，需要确保字体文件包含对应粗细
font-style – 字体样式
设置文字的风格。常用值：normal（正常）、italic（斜体）、oblique（倾斜体）。
font-style: italic; /* 斜体 */
font-style: oblique; /* 倾斜体（类似斜体） */
font-style: oblique; /* 倾斜体（类似斜体） */
效果
正常样式 (normal)
斜体文字 (italic)
font-variant – 字体变体
设置字母的大小写变体。主要使用：small-caps（小型大写字母） – 所有字母显示为大写，但小写字母显示为缩小版大写字母。
font-variant: small-caps; /* 小型大写字母 */
效果
正常文本: Hello World and CSS Fonts
小型大写: Hello World and CSS Fonts
高级字体属性
line-height – 行高
设置行与行之间的高度（行间距）。可以使文本更易读。值可以是数字（相对于当前字体大小）、绝对单位（px）或百分比。
line-height: 1.6; /* 推荐值：1.5-1.8 */
line-height: 30px; /* 固定行高 */
line-height: 30px; /* 固定行高 */
效果（增大行高）
默认行高：CSS中的行高(line-height)属性控制文本行间的垂直距离。合适的行高能显著提高文本可读性。通常设置为字体大小的1.5倍左右效果最佳。
增大行高：CSS中的行高(line-height)属性控制文本行间的垂直距离。合适的行高能显著提高文本可读性。通常设置为字体大小的1.5倍左右效果最佳。
font – 字体缩写
用一个属性设置多个字体属性。顺序：font-style font-variant font-weight font-size/line-height font-family
/* 完整写法 */
font-style: italic;
font-weight: 700;
font-size: 1.5rem;
line-height: 1.6;
font-family: ‘Roboto’, sans-serif;
/* 缩写写法（等效） */
font: italic 700 1.5rem/1.6 ‘Roboto’, sans-serif;
font-style: italic;
font-weight: 700;
font-size: 1.5rem;
line-height: 1.6;
font-family: ‘Roboto’, sans-serif;
/* 缩写写法（等效） */
font: italic 700 1.5rem/1.6 ‘Roboto’, sans-serif;
效果
这是一个使用了字体缩写属性的示例文本。一句简洁的代码就能设置多个字体属性。
缩写属性中，font-size和font-family是必需的，其他可以省略
@font-face – 自定义字体
允许你使用自定义字体文件（如.ttf/.otf/.woff）。可以加载本地文件或通过URL引用。
/* 引入自定义字体 */
@font-face {
font-family: ‘MyCustomFont’;
src: url(‘fonts/myfont.woff2’) format(‘woff2’);
}
/* 使用自定义字体 */
body {
font-family: ‘MyCustomFont’, sans-serif;
}
@font-face {
font-family: ‘MyCustomFont’;
src: url(‘fonts/myfont.woff2’) format(‘woff2’);
}
/* 使用自定义字体 */
body {
font-family: ‘MyCustomFont’, sans-serif;
}
效果（使用Google Fonts）
这个文本使用了自定义字体 “Pacifico”。通过@font-face，你可以使用任何特殊字体增强设计感。
推荐使用WOFF2格式，它压缩率高，加载快。Google Fonts提供了数百种免费字体