CSS3中的字体及相关属性详解
来源：互联网 2026-04-14 16:07:02如何在网页中使用字体：三种来源与CSS控制属性 为网页添加特定字体，主要有三种实现途径。 本地字体：直接调用用户电脑已安装的字体，加载效率最高。 在线字体服务：引用第三方托管字体，如Google Fonts，通常只需一行link标签。 自托管字体：将字体文件置于自有服务器，通过CSS的@font-f
如何在网页中使用字体：三种来源与CSS控制属性
为网页添加特定字体，主要有三种实现途径。
- 本地字体：直接调用用户电脑已安装的字体，加载效率最高。
- 在线字体服务：引用第三方托管字体，如Google Fonts，通常只需一行link标签。
- 自托管字体：将字体文件置于自有服务器，通过CSS的@font-face规则加载。
控制网页字体呈现的核心是CSS的六个属性：
长期稳定更新的攒劲资源： >>>点此立即查看<<<
font-family（字体族）
font-size（字号）
font-style（字体样式）
font-weight（字重）
font-variant（字体变体）
font（简写属性）
字体与文本的区别
字体（Font）与文本（Text）在CSS中职责分明。
字体指字符的视觉设计，即“字的形态”。一套字体包含特定风格的字母、数字、符号集合，按外观分为衬线体、无衬线体、等宽体等类别。每个字体族（如Times、Helvetica）下还可包含不同字型（如常规体、粗体、斜体）。
文本指由字符构成的段落、标题等内容本身，与采用何种字体无必然关联。
CSS属性也因此分立：字体属性控制字符本身的样式（字体族、大小、粗细）；文本属性控制字符的排版布局（行高、间距、缩进、装饰）。
简单概括：调整单个字的外观用字体属性，优化整段文字的版式用文本属性。
CSS字体族（font-family）详解与通用字体族
定义font-family时，建议提供字体栈列表。浏览器将从左至右匹配，直至找到用户系统可用的字体。
例如：h2 { font-family: times, serif; } 会优先使用Times字体，若不可用则回退至通用衬线体。
CSS预置了五个通用字体族关键字作为最终备选方案：
- serif：衬线字体，笔画末端有装饰线，风格传统、稳重。
- sans-serif：无衬线字体，笔画简洁，外观现代。
- monospace：等宽字体，字符宽度一致，适用于代码显示。
- cursive：手写风格字体。
- fantasy：装饰性艺术字体。
CSS字体大小（font-size）设置指南与rem单位优势
设置字号示例：h2 { font-size: 18px; }
常用单位包括px（像素）、em（相对单位）、百分比（%）。默认情况下，浏览器根元素字体大小为16px，因此1em通常等同于16px。
重点介绍rem单位：其大小仅相对于HTML根元素（html标签）的字体尺寸。修改根元素字号即可全局控制所有使用rem的元素，有效规避了多层级嵌套时em单位计算复杂的问题，非常适合进行全局响应式字号管理。
CSS字体样式（font-style）控制斜体显示
该属性主要用于控制斜体效果，可选值包括：
italic：调用字体自带的斜体字型。
oblique：将文字进行机械倾斜。
normal：常规样式，常用于取消继承的斜体效果。
CSS字体粗细（font-weight）设置方法与常用值
字重设置方式灵活：可使用数值（100-900，数值越大越粗），也可使用关键字：lighter（更细）、normal（正常）、bold（加粗）、bolder（更粗）。
应用示例：a { font-weight: bold; } 常用于突出显示链接。
实际开发中最常使用的值为bold与normal。
CSS字体变体（font-variant）功能与应用场景
该属性提供了一个特殊值：small-caps（小型大写字母），可将小写字母显示为缩放后的大写字母形式。
示例：blockquote { font-variant: small-caps; }
由于其显示效果特殊，需谨慎使用。一种经典用法是结合::first-line伪元素，为段落首行创造独特的排版风格。
CSS字体简写属性（font）使用规则与语法
使用font简写属性可一次性声明多个字体样式，但必须遵循两条核心规则：
1. font-size与font-family的值必须提供，不可或缺。
2. 属性值必须按顺序书写：font-weight、font-style、font-variant（三者顺序可调）→ font-size → font-family。
p:nth-child(2) {
font: bold italic small-caps 2em sans-serif;
}
侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述
