1.2 现代HTML字体相关元素

标题元素：

~

不同级别的标题

文本语义元素：

加粗强调

斜体强调

小号文本

预格式文本：

保留空格和换行的文本

二、CSS字体系统详解

2.1 CSS字体属性全家福

属性

说明

示例值

font-family

字体族

“Microsoft YaHei”, sans-serif

font-size

字号

16px / 1.2rem

font-weight

字重

normal / bold / 700

font-style

样式

italic / oblique

font-variant

变体

small-caps

line-height

行高

1.5 / 24px

font

简写

italic bold 16px/1.5 “Arial”

2.2 核心字体属性详解

2.2.1 font-family 字体族

通用字体族分类：

1. Serif（衬线体）：Times New Roman, 宋体

2. Sans-serif（无衬线体）：Arial, 微软雅黑

3. Monospace（等宽字体）：Courier New, Consolas

4. Cursive（手写体）：Comic Sans MS

5. Fantasy（艺术体）：Impact

最佳实践：

body {

font-family: "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB",

"Microsoft YaHei", sans-serif;

}

2.2.2 font-size 字号单位

单位类型

说明

特点

px

像素

绝对单位

em

相对父元素

复合计算

rem

相对根元素

推荐使用

%

百分比

相对父元素

vw/vh

视窗单位

响应式设计

响应式字体示例：

html {

font-size: 16px; /* 基准值 */

}

h1 {

font-size: 2rem; /* 32px */

}

@media (max-width: 768px) {

html {

font-size: 14px;

}

}

2.2.3 font-weight 字重控制

常用值：

- 关键词：normal(400), bold(700)

- 数值：100-900（整百数）

中文字体注意：

多数中文字体仅支持normal和bold两种字重

2.2.4 line-height 行高规范

推荐值：

- 正文：1.5-1.8

- 标题：1.2-1.5

- 代码：至少1.5

p {

line-height: 1.6; /* 无单位表示倍数 */

}

2.3 Web字体技术

2.3.1 @font-face 规则

@font-face {

font-family: 'MyCustomFont';

src: url('font.woff2') format('woff2'),

url('font.woff') format('woff');

font-weight: 400;

font-style: normal;

font-display: swap; /* 字体加载策略 */

}

2.3.2 字体格式比较

格式

特点

兼容性

WOFF2

压缩率最高

现代浏览器

WOFF

广泛支持

IE9+

TTF/OTF

原始格式

部分支持

EOT

IE专用

IE6-11

2.3.3 字体服务

Google Fonts（免费）

Adobe Fonts（付费）

字蛛（中文字体压缩工具）

三、字体应用最佳实践

3.1 字体栈设计原则

/* 西文字体栈 */

font-family: -apple-system, BlinkMacSystemFont,

"Segoe UI", Roboto, Oxygen-Sans,

Ubuntu, Cantarell, sans-serif;

/* 中文字体栈 */

font-family: "PingFang SC", "Hiragino Sans GB",

"Microsoft YaHei", "WenQuanYi Micro Hei",

sans-serif;

3.2 性能优化方案

字体子集化：仅包含使用的字符

preload预加载：

FOUT/FOIT控制：

@font-face {

font-display: swap;

}

3.3 动态字体加载

const font = new FontFace('MyFont', 'url(myfont.woff2)');

font.load().then(() => {

document.fonts.add(font);

});

四、高级字体技术

4.1 可变字体（Variable Fonts）

@font-face {

font-family: 'VariableFont';

src: url('font.woff2') format('woff2-variations');

font-weight: 100 900;

font-stretch: 75% 125%;

}

h1 {

font-variation-settings: "wght" 650, "wdth" 110;

}

4.2 字体特性控制

p {

font-feature-settings: "kern" 1, "liga" 1;

/* 启用连字和字距调整 */

}

五、常见问题解决方案

5.1 跨平台字体一致性

解决方案：

1. 使用Web安全字体

2. 提供多平台字体栈

3. 使用CDN字体服务

5.2 中文字体优化

特殊处理：

1. 简体/繁体适配

2. 按需加载字体包

3. 使用系统默认中文字体

5.3 字体版权问题

合规方案：

1. 使用开源字体（思源系列）

2. 购买商业授权

3. 使用字体服务API

结语

掌握HTML和CSS字体技术需要理解字体渲染原理、熟悉各种属性特性，并能在性能与视觉效果间取得平衡。随着可变字体等新技术的发展，网页排版正迎来更多可能性。建议开发者：

1. 建立标准化字体系统

2. 持续关注新特性

3. 在实际项目中多测试验证

本文共约2700字，涵盖了字体技术的核心知识点和应用方案。具体实施时请根据项目需求选择合适的解决方案。

“`

注：实际字符数可能因格式略有差异，如需精确控制，建议在Markdown编辑器中检查最终输出。