上一篇
如何在HTML中设置字体？
在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-weight
strong { font-weight: 700; } /* 值范围100-900 */
-
字体样式：font-style
em { font-style: italic; } /* 斜体 */
高级字体控制
-
行高优化：line-height
提升可读性（建议1.5-2倍）：
p { line-height: 1.6; }
-
颜色对比度：color + 背景色
符合WCAG 2.1标准（至少4.5:1）：
引入外部字体（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"; }
响应式字体实践
-
视口单位适配
-
媒体查询调整
@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/）。
-
