异常教程

CSS Fonts(字体)（保姆级教程）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在网页设计中，字体不仅是信息传递的载体，更是用户体验的隐形塑造者。无论是优雅的衬线字体，还是简洁的无衬线字体，都能直接影响用户的阅读体验和情感共鸣。本文将以 CSS Fonts(字体) 为核心，从基础语法到高级技巧，逐步讲解如何通过 CSS 控制字体样式，打造视觉与功能兼备的网页内容。无论是编程新手还是中级开发者，都能从中找到适合自己的知识模块，并通过实际案例掌握关键技能。

字体族：选择合适的“视觉衣橱”

font-family 是 CSS 中控制字体的基础属性，它允许开发者为文本指定一个或多个字体选项，形成“字体堆栈”（Font Stack）。

系统默认字体与自定义字体

系统默认字体是浏览器内置的通用字体，例如：

body {
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
}
  • Segoe UI：Windows 系统默认字体，适合现代网页设计。
  • Microsoft YaHei：中文环境下常用字体，保证中文字体的清晰度。
  • sans-serif：后备字体族，当前两项不可用时，浏览器会选择无衬线字体。

自定义字体加载则通过 @font-face 规则实现，例如：

@font-face {
  font-family: "MyCustomFont";
  src: url("fonts/myfont.woff2") format("woff2"),
       url("fonts/myfont.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

此规则定义了一个名为 MyCustomFont 的字体，并指定其文件路径和格式。使用时只需将其加入 font-family 堆栈即可：

h1 {
  font-family: "MyCustomFont", "Microsoft YaHei", sans-serif;
}

字体堆栈的比喻

想象字体堆栈像一个衣柜：

  • 主选服装：你最想穿的那件（如 MyCustomFont）。
  • 备用服装：如果主选不可用，依次选择次选（如 Microsoft YaHei）。
  • 最后底线：如果所有选项都失败，系统会默认提供一件基础款（如 sans-serif）。

字体样式与变体：为文字“化妆”

字体倾斜与斜体（font-style）

font-style 控制文本的倾斜效果，可选值包括：
| 属性值 | 效果描述 |
|----------|------------------------------|
| normal | 常规字体（默认） |
| italic | 应用斜体样式 |
| oblique | 人工倾斜效果（兼容性更强） |

示例：

.emphasize {
  font-style: italic; /* 生成优雅的斜体效果 */
}

字体小大写字母（font-variant）

font-variant 可以改变字母的视觉表现，例如：

.small-caps {
  font-variant: small-caps; /* 将小写字母转为小型大写字母 */
}

此效果常用于标题或强调文本，但需注意：过度使用可能影响可读性。

字体粗细：控制文字的“肌肉感”

font-weight 定义字体的粗细程度，支持数值（100~900）或关键字（如 bold）。

数值与关键字对照表

数值关键字适用场景
100thin极细，用于装饰性文字
400normal默认值，通用场景
700bold粗体，标题或强调内容
900black超粗体，高对比度设计

示例：

h2 {
  font-weight: 700; /* 使用 700 对应的 bold 样式 */
}

注意：并非所有字体都支持所有 font-weight 值，需检查字体文件的可用粗细。

字体大小：平衡视觉与可读性

font-size 控制文本的物理尺寸，常用单位包括：

  • 绝对单位：px（像素），固定大小，适合精细控制。
  • 相对单位：em（相对于父元素）、rem（相对于根元素），适合响应式设计。

响应式字体案例

/* 使用 rem 和媒体查询实现自适应 */
body {
  font-size: 16px; /* 根元素基准 */
}

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

此方法通过调整根元素的 font-size，可批量影响所有相对单位的字体大小。

字体变形：文字的“变身魔法”

text-transform 属性可以改变文本的大小写形式：

.uppercase {
  text-transform: uppercase; /* 全大写 */
}

.capitalize {
  text-transform: capitalize; /* 每个单词首字母大写 */
}

使用场景：标题或表单标签。但需避免在长文本中使用，可能降低可读性。

自定义字体的性能优化

字体格式选择

现代字体文件格式包括：

  • WOFF2：压缩率高，支持现代浏览器，优先选择。
  • TTF/OTF：兼容性较好，但文件较大。
  • SVG：仅用于旧版浏览器，已逐渐淘汰。

加载优化技巧

  1. 按需加载：通过 preload 提前加载关键字体： 
    <link rel="preload" href="fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>
  2. 子集化：仅包含实际使用的字符（如中文网页可排除英文字符），减少文件体积。

可访问性与字体选择

优秀的字体设计需兼顾视觉与功能：

  1. 对比度检查：确保文字与背景的对比度符合 WCAG 标准（如 4.5:1）。
  2. 避免过度装饰：花哨字体仅适用于标题，正文需选择易读性高的字体。
  3. 备用方案：即使使用自定义字体，也需提供可靠的后备字体族。

结论

掌握 CSS Fonts(字体) 的核心技巧，不仅能提升网页的视觉表现，更能优化用户体验和可访问性。从基础的 font-family 到高级的字体加载优化，每一步都体现了设计与技术的平衡。建议读者通过实际项目练习，例如为个人博客设计自定义字体堆栈，或优化现有网站的字体性能。未来，随着可变字体（Variable Fonts）的普及，字体设计将更加灵活高效——现在积累的知识，将成为适应这些变化的坚实基础。

最新发布

查看更多文章