当前位置：首页 > 行业动态 > 正文

html5字体选择

admin
行业动态
2025-05-03
2723

HTML5字体选择可用CSS@font-face或引用在线库，配合font

HTML5字体选择与应用详解

基础字体设置

通过CSS设置字体
使用font-family属性指定字体优先级列表，浏览器按顺序匹配可用字体：
```
body {
  font-family: "Arial", sans-serif; / 首选Arial，若无则用无衬线默认字体 /
}
```
通用字体分类
| 类别 | 示例字体 | 用途 |
|—————|—————————|————————–|
| 无衬线体 | Arial, Helvetica, sans-serif | 现代简洁界面 |
| 衬线体 | Times New Roman, Georgia, serif | 正式文档 |
| 等宽字体 | Courier New, monospace | 代码、表格 |
| 手写体 | Comic Sans MS, cursive | 个性化设计（慎用） |

Web字体引入（@font-face）

语法结构

@font-face {
  font-family: 'CustomFont'; / 自定义字体名称 /
  src: url('font.woff2') format('woff2'), / 优先现代格式 /
       url('font.woff') format('woff'),    / 兼容旧版浏览器 /
       url('font.ttf') format('truetype'); / 最终兜底方案 /
  font-weight: normal;
  font-style: normal;
}

字体文件格式对比
| 格式 | 优点 | 缺点 | 浏览器支持 |
|————|————————–|————————–|————————–|
| WOFF2 | 极小体积（约30%压缩） | IE≤11不兼容 | Chrome+, Firefox+, Edge+ |
| WOFF | 广泛支持 | 体积较大 | IE9+, Safari5+ |
| TTF | 兼容性最佳 | 未压缩，体积大 | 全平台支持 |
| SVG | 支持彩色字体 | 仅部分浏览器支持 | IE10+, Safari6+ |
| EOT | IE专用 | 其他浏览器不支持 | IE4+ |

字体加载优化

预加载关键字体

<link rel="preload" href="fonts/main.woff2" as="font" type="font/woff2" crossorigin>

使用字体服务

Google Fonts：通过链接引入

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Adobe Fonts：提供专业设计字体库

字体子集化
使用工具（如Font Squirrel）提取所需字符范围，减少文件体积。

高级应用场景

字体图标

.icon {
  font-family: 'IconFont'; / 图标字体库 /
  content: 'e900'; / Unicode编码 /
  speak: none; / 防止屏幕阅读器朗读 /
}

渐变色文本

h1 {
  font-size: 80px;
  background: linear-gradient(to right, #ff0000, #0000ff);
  -webkit-background-clip: text; / 裁剪背景到文字形状 /
  -webkit-text-fill-color: transparent; / 隐藏原文字颜色 /
}

浏览器兼容性处理

场景	解决方案
IE9不支持WOFF2	添加WOFF/TTF格式作为降级方案
字体加载闪烁	使用`font-display: swap`强制先渲染文本再替换
跨域字体资源	将字体文件部署至同源服务器，或配置CORS头`Access-Control-Allow-Origin:`