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;
}
热门专题
热门推荐
在现代化仓储物流管理中，实现实时、精准的库存可视化是提升运营韧性与效率的核心环节。近日，知名定制化第三方物流服务商Romark Logistics宣布了一项重要技术升级：在其位于哈兹尔顿的仓储基地正式部署由Dexory提供的AI驱动仓储可视化平台DexoryView。此举标志着Romark Logi
今天，谷歌正式将我们带入了一个新的阶段：AI智能体时代。其推出的Gemini Spark，被定义为一款能够全天候运行的个人AI助手。它的核心使命很明确——接管我们日益复杂的数字生活，并实实在在地替我们处理一些工作。 这款助手的“大脑”是最新发布的Gemini 3 5 Flash模型，而协调其行动的“
近日，《自然》杂志同期发表了两项突破性研究，展示了两种旨在革新科研工作流的AI系统。一款来自谷歌，名为Co-Scientist，强调人机深度协作；另一款由非营利机构FutureHouse开发，其系统更进一步，能对特定生物实验数据进行自动化评估与分析。 尽管谷歌表示其系统架构同样适用于物理学探索，但两
谷歌近期对其“氛围编程”平台进行了重要升级。现在，开发者可以直接在谷歌AI Studio中，通过自然语言对话来构建安卓原生应用。 具体操作流程非常直观：用户只需用日常语言描述自己的应用构思，平台内置的安卓模拟器便会实时生成应用预览。若想在实际设备上测试，只需将安卓手机连接至电脑，即可直接安装体验。更
今天，科大讯飞旗下孵化的AI硬件品牌未来智能，正式发布了其创新产品——viaim讯飞智能体耳机。这款产品的核心突破在于，将先进的办公AI Agent能力，集成到一款日常可佩戴的耳机设备中。它不仅超越了传统录音转写功能，更实现了长期记忆存储、多模型灵活调用与智能复盘分析，目标清晰：将耳机从单纯的音频播