Appearance
字体格式详解
了解不同字体格式,选择合适的发布格式。
主流字体格式
TTF (TrueType Font)
开发时间:1980年
发布时间:1991年
开发者:Apple & Microsoft
兼容性:★★★★★特点:
- 通用性最强
- 所有平台支持
- 文件体积适中
- 推荐日常使用
适用场景:
- 系统字体安装
- 办公软件使用
- 通用分发
OTF (OpenType Font)
开发时间:1990年代
开发者:Adobe & Microsoft
兼容性:★★★★★特点:
- 现代标准格式
- 支持高级排版特性
- 跨平台支持好
- 推荐专业使用
高级特性:
- 连字(Ligatures)
- 上下文替换
- 多语言支持
WOFF/WOFF2 (Web Open Font Format)
开发时间:2010年代
用途:Web专用
兼容性:★★★★特点:
- 专为网页优化
- 压缩率高(WOFF2更高)
- 快速加载
- 网页字体必选
体积对比:
TTF: 1000 KB
WOFF: 600 KB (-40%)
WOFF2: 450 KB (-55%)EOT (Embedded OpenType)
状态:已过时
用途:IE 浏览器
建议:不再使用SVG Font
状态:已废弃
建议:不要使用格式选择建议
场景1:系统安装字体
推荐:TTF 或 OTF
兼容性最好场景2:网页使用
推荐:WOFF2 (首选) + WOFF (备用)
代码示例:css
@font-face {
font-family: 'MyFont';
src: url('font.woff2') format('woff2'),
url('font.woff') format('woff');
}场景3:移动应用
iOS: TTF/OTF
Android: TTF/OTF场景4:商业分发
推荐:OTF
包含版权信息
支持高级特性格式转换工具
FontForge
File → Generate Fonts
选择目标格式Online Font Converter
网址:convertio.co/font-converter
上传 → 选择格式 → 下载FontTools (命令行)
bash
pip install fonttools brotli
ttf2woff2 font.ttfGlyphs
File → Export
自动生成多种格式格式对比表
| 格式 | 体积 | 兼容性 | Web | 系统 | 推荐度 |
|---|---|---|---|---|---|
| TTF | 中 | ★★★★★ | 支持 | 推荐 | ★★★★★ |
| OTF | 中 | ★★★★★ | 支持 | 推荐 | ★★★★★ |
| WOFF | 小 | ★★★★ | 推荐 | 不支持 | ★★★★ |
| WOFF2 | 极小 | ★★★ | 首选 | 不支持 | ★★★★★ |
| EOT | 大 | ★ | IE专用 | 不支持 | ★ |
元数据设置
必填信息
Font Name: 字体名称
Version: 版本号
Copyright: 版权声明
Designer: 设计师
License: 授权协议推荐填写
Description: 字体描述
Vendor URL: 官网链接
Designer URL: 设计师链接文件命名规范
标准命名
FontFamily-Weight.format
示例:
MyHandwriting-Regular.ttf
MyHandwriting-Bold.otf
MyHandwriting-Light.woff2避免
中文文件名
空格
特殊字符常见问题
问题1:TTF和OTF选哪个?
答:
- 简单字体 → TTF
- 需要高级特性 → OTF
- 不确定 → 两个都导出
问题2:必须提供WOFF2吗?
答: 网页使用必须!体积小,加载快。
问题3:如何在字体中嵌入版权?
答: 在字体软件的 Font Info 中填写 Copyright 和 License。
问题4:格式转换会损失质量吗?
答: 不会!只是容器格式不同,字形数据相同。
最佳实践
发布套装建议
完整套装包含:
1. TTF 版本(通用安装)
2. OTF 版本(专业用户)
3. WOFF2 版本(Web使用)
4. README(使用说明)
5. LICENSE(授权协议)版本号管理
初版:1.0.0
小更新:1.0.1
功能更新:1.1.0
大版本:2.0.0下一步
了解格式后,查看版权声明,保护你的作品!
持续更新
更多格式技术细节和最佳实践持续更新中!