CSS 字体与排版深度指南：从基础到高级控制

一、自定义字体：@font-face 详解

在网页设计中，自定义字体能显著提升品牌识别度。@font-face 规则允许我们使用非系统字体。

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/custom-font.woff2') format('woff2'),
       url('fonts/custom-font.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

关键参数解析：

font-family: 定义字体家族名称（后续通过该名称引用）
src: 指定字体文件路径及格式（推荐优先使用WOFF2格式）
font-weight/font-style: 定义字体适用的粗细和样式
font-display: 控制字体加载期间的显示行为

实践建议：

始终提供多种字体格式（WOFF2 + WOFF）以确保兼容性
使用 local() 检查用户本地是否已安装该字体
生产环境应对字体文件进行压缩（可节省30-50%体积）

二、字体属性精细控制

1. font-family 字体栈策略

body {
  font-family: 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

最佳实践：

将最可能使用的字体放在最前面
至少包含一个通用字体族（如sans-serif）
包含空格或特殊字符的字体名需加引号

2. font-weight 的现代用法

/* 数值写法（100-900，步进100） */
.title {
  font-weight: 700; /* 相当于bold */
}

/* 变量字体支持更细粒度控制 */
@font-face {
  font-family: 'VariableFont';
  src: url('font.woff2') format('woff2-variations');
  font-weight: 100 900; /* 定义可变范围 */
}

.subtitle {
  font-weight: 650; /* 仅在可变字体中生效 */
}

3. font-display 加载策略

可选值：

auto：浏览器默认行为（通常等同于block）
block：短暂隐藏文本（3秒后备字体）
swap：立即使用后备字体，加载后替换
fallback：极短阻塞期（约100ms），3秒后备字体
optional：类似fallback，但可能完全不加载自定义字体

场景建议：

关键文本：swap（确保内容可读）
装饰性文本：optional（性能优先）
品牌LOGO：block（确保视觉一致性）

三、文本布局与对齐

1. 多维度对齐方案

.article {
  text-align: justify;  /* 两端对齐 */
  text-align-last: center; /* 最后一行居中 */
  text-justify: inter-word; /* 单词间调整间距 */
}

2. 行高(line-height)的黄金法则

/* 无单位值基于当前字体大小 */
body {
  font-size: 16px;
  line-height: 1.5; /* 实际24px */
}

/* 垂直居中技巧 */
.button {
  height: 40px;
  line-height: 40px; /* 单行文本垂直居中 */
}

专业建议：

正文推荐1.5-1.6的行高比
标题可适当减小到1.2-1.3
使用相对单位以适应不同字体大小

3. 文本溢出处理三剑客

.ellipsis {
  white-space: nowrap;      /* 禁止换行 */
  overflow: hidden;        /* 隐藏溢出 */
  text-overflow: ellipsis; /* 显示省略号 */
}

/* 多行文本截断（非标准但广泛支持） */
.multiline-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3;   /* 限制行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

四、文字装饰艺术

1. text-decoration 现代化用法

.link {
  text-decoration: underline solid #f00 2px;
  /* 简写属性：线型 样式 颜色 粗细 */
  
  text-decoration-skip-ink: auto; /* 避开字母下沿 */
  text-underline-offset: 0.3em;   /* 下划线偏移 */
}

2. 文本阴影的创意应用

/* 基础阴影 */
.title {
  text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

/* 多重阴影实现立体效果 */
.hero-text {
  text-shadow: 
    0 1px 0 #ccc,
    0 2px 0 #bbb,
    0 3px 0 #aaa,
    0 4px 5px rgba(0,0,0,0.6);
}

/* 霓虹灯效果 */
.neon {
  text-shadow: 
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 15px #0073e6,
    0 0 20px #0073e6;
}

五、高级排版方向控制

1. 国际化排版方案

/* 从右到左排版 */
.arabic-text {
  direction: rtl;
  unicode-bidi: bidi-override;
}

/* 垂直排版（中文古籍样式） */
.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

2. writing-mode 的创意布局

应用场景：

表格侧边栏标题
创意文字排列
垂直导航菜单

性能优化专项

字体加载优化

<!-- 预加载关键字体 -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

字体子集化
- 使用工具如pyftsubset仅保留需要的字符
- 中文网站可考虑单独加载简体/繁体子集

可变字体优势

/* 单个文件替代多个粗细文件 */
@font-face {
  font-family: 'VariableFont';
  src: url('font.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 75% 125%;
}

结语：排版设计原则

层次分明：通过字体大小、粗细和颜色建立视觉层次
限制字体数量：单个页面建议不超过3种字体家族
响应式排版：使用相对单位（rem/vw）和媒体查询适配不同设备
可访问性：确保正文颜色对比度至少达到4.5:1

通过掌握这些CSS字体与排版技术，您将能创建出既美观又高性能的网页文本体验。记住，好的排版应该"隐形"——当用户专注于内容而非样式时，才是最佳的设计。

CSS字体与排版完全指南：从@font-face到高级控制