Web 字体

CSS3 的 Web 字体功能彻底改变了网页设计的字体使用方式。通过 @font-face 规则，我们可以在网页中使用自定义字体，不再局限于用户系统安装的字体。这为网页设计提供了无限的创意可能性和品牌一致性。

@font-face 规则概述

@font-face 规则用于在网页中定义和加载自定义字体。它允许我们指定字体的来源、格式、样式和权重，然后在 CSS 中像使用系统字体一样使用这些自定义字体。

基本语法

@font-face {
  font-family: 'FontName';
  src: url('font.woff2') format('woff2'),
       url('font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

参数说明

• font-family：字体名称
• src：字体文件来源和格式
• font-weight：字体粗细
• font-style：字体样式
• font-stretch：字体拉伸
• unicode-range：Unicode 范围
• font-display：字体显示策略

字体格式

主要字体格式

WOFF2（Web Open Font Format 2.0）

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
}

• 最新的字体格式
• 文件体积最小
• 加载速度最快
• 现代浏览器支持

WOFF（Web Open Font Format）

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff') format('woff');
}

• 广泛支持的格式
• 文件体积较小
• 加载速度较快
• 兼容性好

TTF（TrueType Font）

@font-face {
  font-family: 'MyFont';
  src: url('myfont.ttf') format('truetype');
}

• 传统的字体格式
• 文件体积较大
• 兼容性最好
• 适合旧版浏览器

EOT（Embedded OpenType）

@font-face {
  font-family: 'MyFont';
  src: url('myfont.eot');
}

• IE 专用格式
• 文件体积较大
• 仅支持 IE 6-11
• 用于兼容性

字体格式选择

/* 推荐的字体格式组合 */
@font-face {
  font-family: 'MyFont';
  src:
    url('myfont.woff2') format('woff2'),
    url('myfont.woff') format('woff'),
    url('myfont.ttf') format('truetype');
}

字体加载

基本字体加载

/* 加载单个字体文件 */
@font-face {
  font-family: 'Open Sans';
  src: url('opensans.woff2') format('woff2');
}

/* 加载多个字体文件 */
@font-face {
  font-family: 'Open Sans';
  src:
    url('opensans-regular.woff2') format('woff2'),
    url('opensans-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Open Sans';
  src:
    url('opensans-bold.woff2') format('woff2'),
    url('opensans-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

字体显示策略

/* auto - 浏览器默认行为 */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: auto;
}

/* block - 字体加载前隐藏文本 */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: block;
}

/* swap - 使用后备字体，加载后替换 */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

/* fallback - 使用后备字体，超时后放弃 */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: fallback;
}

/* optional - 字体加载失败不影响显示 */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: optional;
}

字体样式设置

font-family

/* 使用自定义字体 */
body {
  font-family: 'Open Sans', 'Microsoft YaHei', sans-serif;
}

/* 标题字体 */
h1, h2, h3 {
  font-family: 'Roboto', sans-serif;
}

/* 代码字体 */
code, pre {
  font-family: 'Fira Code', 'Courier New', monospace;
}

font-weight

/* 定义不同粗细的字体 */
@font-face {
  font-family: 'MyFont';
  src: url('myfont-light.woff2') format('woff2');
  font-weight: 300;
}

@font-face {
  font-family: 'MyFont';
  src: url('myfont-regular.woff2') format('woff2');
  font-weight: 400;
}

@font-face {
  font-family: 'MyFont';
  src: url('myfont-bold.woff2') format('woff2');
  font-weight: 700;
}

/* 使用不同粗细 */
.light-text {
  font-weight: 300;
}

.normal-text {
  font-weight: 400;
}

.bold-text {
  font-weight: 700;
}

font-style

/* 定义不同样式的字体 */
@font-face {
  font-family: 'MyFont';
  src: url('myfont-italic.woff2') format('woff2');
  font-style: italic;
}

@font-face {
  font-family: 'MyFont';
  src: url('myfont-oblique.woff2') format('woff2');
  font-style: oblique;
}

/* 使用不同样式 */
.italic-text {
  font-style: italic;
}

.oblique-text {
  font-style: oblique;
}

font-stretch

/* 定义不同拉伸的字体 */
@font-face {
  font-family: 'MyFont';
  src: url('myfont-condensed.woff2') format('woff2');
  font-stretch: condensed;
}

@font-face {
  font-family: 'MyFont';
  src: url('myfont-expanded.woff2') format('woff2');
  font-stretch: expanded;
}

/* 使用不同拉伸 */
.condensed-text {
  font-stretch: condensed;
}

.expanded-text {
  font-stretch: expanded;
}

实际应用案例

1. 网站字体配置

/* 字体定义 */
@font-face {
  font-family: 'Inter';
  src:
    url('inter-regular.woff2') format('woff2'),
    url('inter-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src:
    url('inter-medium.woff2') format('woff2'),
    url('inter-medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src:
    url('inter-bold.woff2') format('woff2'),
    url('inter-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 字体使用 */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

h1, h2, h3 {
  font-weight: 700;
}

.button {
  font-weight: 500;
}

2. 中文字体配置

/* 中文字体定义 */
@font-face {
  font-family: 'Noto Sans SC';
  src:
    url('noto-sans-sc-regular.woff2') format('woff2'),
    url('noto-sans-sc-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans SC';
  src:
    url('noto-sans-sc-bold.woff2') format('woff2'),
    url('noto-sans-sc-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 字体使用 */
body {
  font-family: 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', sans-serif;
}

.title {
  font-weight: 700;
}

3. 图标字体

/* 图标字体定义 */
@font-face {
  font-family: 'Font Awesome';
  src: url('fontawesome.woff2') format('woff2'),
       url('fontawesome.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* 图标使用 */
.icon {
  font-family: 'Font Awesome';
  font-style: normal;
  font-weight: normal;
  font-feature-settings: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-home::before {
  content: "\f015";
}

.icon-user::before {
  content: "\f007";
}

4. 代码字体

/* 代码字体定义 */
@font-face {
  font-family: 'Fira Code';
  src:
    url('firacode-regular.woff2') format('woff2'),
    url('firacode-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 代码使用 */
code, pre, .code {
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.6;
}

5. 品牌字体

/* 品牌字体定义 */
@font-face {
  font-family: 'BrandFont';
  src:
    url('brand-regular.woff2') format('woff2'),
    url('brand-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BrandFont';
  src:
    url('brand-bold.woff2') format('woff2'),
    url('brand-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 品牌使用 */
.logo {
  font-family: 'BrandFont', sans-serif;
  font-weight: 700;
  font-size: 24px;
}

.headline {
  font-family: 'BrandFont', sans-serif;
  font-weight: 400;
  font-size: 32px;
}

字体性能优化

1. 使用合适的字体格式

/* 推荐 - 使用现代字体格式 */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
}

/* 不推荐 - 使用过时的字体格式 */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.ttf') format('truetype');
}

2. 使用 font-display 策略

/* 推荐 - 使用 swap 策略 */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

/* 不推荐 - 不使用 font-display */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
}

3. 子集化字体

/* 推荐 - 使用子集化字体 */
@font-face {
  font-family: 'MyFont';
  src: url('myfont-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 中文字符 */
@font-face {
  font-family: 'MyFont';
  src: url('myfont-chinese.woff2') format('woff2');
  unicode-range: U+4E00-9FFF;
}

4. 使用后备字体

/* 推荐 - 提供后备字体 */
body {
  font-family: 'MyFont', 'Arial', sans-serif;
}

/* 不推荐 - 不提供后备字体 */
body {
  font-family: 'MyFont';
}

浏览器兼容性

Web 字体在所有现代浏览器中都有良好的支持：

• WOFF2：Chrome 36+, Firefox 39+, Safari 10+, Edge 14+
• WOFF：Chrome 6+, Firefox 3.6+, Safari 5.1+, Edge 12+
• TTF：Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 12+
• EOT：IE 6+

最佳实践

1. 使用现代字体格式

/* 推荐 - 使用 WOFF2 */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
}

/* 不推荐 - 使用 TTF */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.ttf') format('truetype');
}

2. 提供合适的后备字体

/* 推荐 - 提供完整的后备字体 */
body {
  font-family: 'MyFont', 'Arial', 'Helvetica', sans-serif;
}

/* 不推荐 - 后备字体不完整 */
body {
  font-family: 'MyFont';
}

3. 使用 font-display 策略

/* 推荐 - 使用 swap 策略 */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

/* 不推荐 - 不使用 font-display */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
}

4. 优化字体加载

/* 推荐 - 优化字体加载 */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0000-00FF;
}

/* 不推荐 - 不优化字体加载 */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.ttf') format('truetype');
}

总结

CSS3 Web 字体功能为网页设计提供了强大的字体控制能力：

主要功能：

• @font-face 规则：加载自定义字体
• 字体格式：WOFF2、WOFF、TTF、EOT
• 字体加载：多种加载策略
• 字体样式：family、weight、style、stretch
• 字体显示：font-display 策略

实际应用：

• 网站字体配置
• 中文字体使用
• 图标字体
• 代码字体
• 品牌字体

最佳实践：

• 使用现代字体格式
• 提供合适的后备字体
• 使用 font-display 策略
• 优化字体加载
• 子集化字体
• 考虑性能影响

优势：

• 无限的字体选择
• 保持品牌一致性
• 提升设计质量
• 增强用户体验
• 支持多语言

注意事项：

• 字体文件大小
• 加载性能
• 浏览器兼容性
• 版权问题
• 可访问性

掌握 CSS3 Web 字体功能，能够让我们在网页中使用自定义字体，创建更加独特和专业的网页设计，大大提升网页的视觉效果和品牌形象。