在HTML中设置字体主要使用CSS样式，通过font-family定义字体类型，font-size调整大小，font-weight控制粗细，以及color设置颜色，
文本。在HTML中设置字体主要通过CSS实现,确保页面美观且符合可访问性标准，以下是详细方法：
基础字体设置（CSS属性）
-
字体类型：
font-family
定义字体栈（优先使用第一个可用字体）：p { font-family: "Microsoft YaHei", "Segoe UI", Arial, sans-serif; }建议包含通用字体族（如
sans-serif）作为回退 -
字体大小：
font-size
推荐使用相对单位：body { font-size: 16px; } /* 基础大小 */ h1 { font-size: 2rem; } /* 相对根元素缩放 */ p { font-size: 1em; } /* 相对父元素缩放 */ -
字体粗细：
font-weightstrong { font-weight: 700; } /* 值范围100-900 */ -
字体样式：
font-styleem { font-style: italic; } /* 斜体 */
高级字体控制
-
行高优化：
line-height
提升可读性（建议1.5-2倍）：
p { line-height: 1.6; } -
颜色对比度：
color+ 背景色
符合WCAG 2.1标准（至少4.5:1）：body { color: #333; /* 深灰色 */ background: #fff; /* 白色背景 */ }
引入外部字体（Web Fonts）
-
Google Fonts（推荐）
在<head>中添加：<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">
CSS调用：
body { font-family: 'Noto Sans SC', sans-serif; } -
自托管字体
使用@font-face：@font-face { font-family: "MyFont"; src: url("myfont.woff2") format("woff2"); } div { font-family: "MyFont"; }
响应式字体实践
-
视口单位适配
h1 { font-size: calc(1.5rem + 1vw); } /* 随视口宽度变化 */ -
媒体查询调整
@media (max-width: 768px) { body { font-size: 14px; } /* 移动端减小字号 */ }
关键注意事项
-
可访问性优先
- 避免纯图片文字
- 禁用
font-style:oblique（部分屏幕阅读器不识别） - 最小字号≥12px（移动端≥16px）
-
性能优化
- 中文字体使用
subset（子集化） - 添加
font-display: swap;防止布局偏移
- 中文字体使用
-
兼容性方案
body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; /* 系统级适配 */ }
常见问题解决
- 字体不生效：检查字体路径/拼写，确保CSS优先级
- 加载闪烁：预加载关键字体
<link rel="preload"> - 跨平台差异：使用
-webkit-font-smoothing优化Mac渲染
引用说明：本文方法遵循W3C CSS规范（www.w3.org/TR/css-fonts-3/），Google Fonts文档（developers.google.com/fonts），及Web可访问性指南（www.w3.org/WAI/standards-guidelines/wcag/）。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/31292.html
