CSS3中的字体及相关属性详解

CSS字体属性详解

在网页设计中应用个性化字体，通常有三种主流实现方案。

免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

• 最便捷的方法是调用用户本地已安装的字体，无需额外加载资源。
• 也可以接入第三方在线字体库服务，例如Google Fonts，通常只需一行link标签即可快速引入。
• 此外，您还可以将字体文件托管至自有服务器，通过CSS的@font-face规则进行自定义字体分发。

控制网页字体呈现效果的核心CSS属性主要有以下六项：

font-family（字体族）

font-size（字号）

font-style（字体样式）

font-weight（字重）

font-variant（字体变体）

font（复合简写属性，可一次性设置多个字体样式）

常见疑问：CSS中的“字体”与“文本”属性有何区别？

两者在CSS规范中具有明确的职能划分。

简而言之，“字体”属性定义字符本身的视觉形态，即“字的形体结构”。以英文字体为例，一套完整的字体包含具有统一设计风格的字母、数字及符号集合。根据外观特征，字体主要分为衬线体（serif）、无衬线体（sans-serif）、等宽体（monospace）等类别。每个类别下包含具体的字体族，例如Times、Helvetica。而同一字体族内又可衍生出不同“字型”，用以表现粗细、倾斜等变体，如常规体、粗体、斜体。

“文本”属性则负责控制字符组合后的整体排版布局，例如段落、标题的呈现方式，与具体使用的字体无关。

因此，CSS将这两类属性分开定义：字体属性管理字符的视觉样式——包括字体族、大小、粗细、倾斜；文本属性则调控文字的排列方式——例如行高、字间距、缩进、装饰线等。

核心总结：调整单个字符的视觉样式，应使用字体属性；优化整段文字的版式布局，则需借助文本属性。

字体族（font-family）设置技巧

定义font-family时，强烈建议采用字体回退列表。浏览器将按从左至右的顺序检测并应用第一个可用的字体。

示例：h2 { font-family: times, serif; } 会优先尝试Times字体，若用户系统未安装，则回退至通用的衬线字体。

CSS预设了五个通用字体族关键字，可作为最终的回退保障：

• serif：衬线字体，笔画末端带有装饰性短线，风格经典、稳重，适合正式文本。
• sans-serif：无衬线字体，笔画简洁无装饰，外观现代清晰，常用于网页界面。
• monospace：等宽字体，每个字符宽度相同，非常适合代码展示与终端显示。
• cursive：手写风格字体，模拟自然笔触，常用于营造亲切、艺术感。
• fantasy：装饰性字体，具有强烈风格，多用于标题、海报等需要突出视觉效果的场景。

字体大小（font-size）单位解析

控制字号非常简单，例如：h2 { font-size: 18px; }

常用单位包括px（像素）、em（相对单位）、百分比（%）。其中，浏览器默认的根元素（html）字体大小通常为16px，因此1em在大多数情况下等价于16px。

特别推荐rem单位。它同样是相对单位，但仅相对于HTML根元素的字体大小。这意味着，只需调整根元素的font-size，所有使用rem定义的元素尺寸便会按比例缩放。这种方式极大地简化了全局字号管理，有效避免了使用em时因元素嵌套而产生的复杂计算问题。

字体样式（font-style）应用指南

该属性主要用于控制文字的倾斜效果。其常用值包括：italic（应用字体自带的斜体字型）、oblique（对文字进行机械倾斜变形）、normal（标准样式，常用于重置继承而来的斜体效果）。

字体粗细（font-weight）控制方法

字重的设定非常灵活。既可使用数值（100至900，数值越大字体越粗），也可使用关键字：lighter（更细）、normal（正常）、bold（加粗）、bolder（更粗）。

示例：a { font-weight: bold; } 常用于突出显示链接。

在实际前端开发中，bold和normal是最常使用的两个属性值。

字体变体（font-variant）特殊用法

此属性有一个特殊值：small-caps（小型大写字母）。它会使小写字母显示为尺寸略小的大写字母形式。

示例：blockquote { font-variant: small-caps; }

由于其显示效果较为特殊，应谨慎使用。一个经典的应用场景是配合::first-line伪元素，为段落的首行文本创造独特的排版风格。

字体简写属性（font）使用规范

希望用一行代码设置多个字体样式？font 简写属性正是为此设计。使用时必须遵循两条核心规则：

第一，font-size和font-family的值必须提供，两者缺一不可。

第二，所有属性值必须按照特定顺序书写：font-weight、font-style、font-variant三者顺序不限；紧接着是font-size；最后必须声明font-family。

p:nth-child(2) {
  font: bold italic small-caps 2em sans-serif;
}