上一篇
html字体对照
HTML中通过`
标签（已弃用）或CSS的font-family`属性设置字体，如宋体（SimSun）、黑体（SimHei）、微软雅黑（Microsoft YaHei）
HTML字体基础标签与CSS属性对照
| 类别 | HTML标签 | CSS属性 | 说明 |
|---|---|---|---|
| 字体类型 | <font face="Arial"> | font-family: Arial; | HTML标签已废弃，推荐使用CSS属性，CSS可定义多个备选字体（如：font-family: Arial, sans-serif;）。 |
| 字体大小 | <font size="4"> | font-size: 16px; | HTML标签的size值为1-7，对应固定像素值；CSS支持精确单位（px/em/rem/%）。 |
| 字体颜色 | <font color="#333"> | color: #333; | HTML标签已废弃，CSS属性更灵活，支持命名色、十六进制、RGB/RGBA等格式。 |
| 字体粗细 | <b>（物理样式） | font-weight: bold; | HTML标签为物理样式，CSS属性逻辑更清晰，支持数值（100-900）或关键字。 |
| 字体样式 | <i>（斜体） | font-style: italic; | CSS属性可组合使用（如：font-style: oblique;）。 |
字体加载与引入方式对比
| 方式 | 本地字体 | 网络字体（@font-face） | Google Fonts（外链） |
|---|---|---|---|
| 语法示例 | @font-face { src: url('font.woff2'); } | @font-face { ... } + 配合font-family | <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> |
| 适用场景 | 自定义字体文件（需服务器支持） | 跨域加载特殊字体 | 快速引用主流字体（依赖CDN） |
| 性能优化 | 可设置unicode-range限制字符范围 | 支持字体格式压缩（如.woff2） | 异步加载（rel="preconnect"） |
字体兼容性与跨平台问题
| 问题 | 现象 | 解决方案 |
|---|---|---|
| 字体未显示 | 指定字体名称错误或系统未安装 | 检查字体名称拼写； 提供通用备选字体（如 sans-serif）；使用网络字体。 |
| 移动端适配 | 像素密度差异导致模糊 | 使用rem单位；启用 viewport缩放；选择支持HiDPI的字体格式（如.woff2）。 |
| 中文字体兼容性 | 部分英文字体不支持中文 | 优先使用中文友好的字体（如PingFang SC）；通过 unicode-range加载中文字符。 |
相关问题与解答
问题1：为什么CSS设置了font-family但字体没有生效？
解答：
可能原因：
- 字体名称拼写错误（如
Arial误写为Arial）； - 系统未安装指定字体，且未提供备选方案；
- 字体文件路径错误（使用
@font-face时）。
解决方法：
- 检查字体名称是否准确；
- 在
font-family中添加通用字体族（如serif/sans-serif）； - 确认字体文件路径或网络链接有效。
问题2：如何优化网页字体加载速度？
解答：
优化策略：
- 精简字体文件：使用子集工具（如Font Squirrel）仅保留所需字符；
- 压缩字体格式：优先使用
.woff2格式（体积小、支持广泛）； - 异步加载：通过
rel="preconnect"或rel="preload"提前加载关键字体； - 限制字符范围：通过
unicode-range仅加载必要字符（如中文网站
