font-face的src属性中format参数的可选值、选用时机及必要性解析

一、format参数的可能取值 #

format参数用于告知浏览器字体文件的格式，常见合法取值包括：

• embedded-opentype：对应EOT格式（仅旧版IE支持）
• woff：对应WOFF格式（现代浏览器广泛支持）
• woff2：对应WOFF2格式（压缩率更高，主流现代浏览器支持）
• truetype：对应TTF格式（通用字体格式，兼容性强）
• opentype：对应OTF格式（与TTF同属TrueType轮廓体系，部分场景可与truetype通用）
• svg：对应SVG字体格式（基本被淘汰，仅极老版本iOS Safari可能需要）
• woff2-variations / woff-variations：对应可变字体的WOFF2/WOFF格式（支持字体粗细、字重等动态调整）

二、如何选择合适的取值 #

选择format的核心原则是匹配字体文件格式+兼顾浏览器兼容性：

1. 优先用woff2：压缩率比WOFF高约30%，Chrome、Firefox、Edge等现代浏览器均支持，是当前最优选择
2. 次选woff：作为WOFF2的降级方案，兼容IE9及以上的稍旧浏览器
3. 旧场景用truetype/opentype：若需支持IE8及更早版本，或部分老旧移动浏览器，可添加TTF/OTF格式及对应format
4. 仅针对旧IE用embedded-opentype：EOT是IE专属格式，仅给IE6-8提供，通常配合?#iefix hack使用
5. 可变字体用woff2-variations：使用支持动态调整的可变字体时，必须指定对应format，否则浏览器无法识别可变特性
6. 避免错误匹配：比如不要给WOFF2文件写format('woff')，这类错误会导致浏览器误判格式，可能跳过加载或解析失败

三、format参数是否必需？ #

不是必需的，浏览器可自动解析字体文件格式，但添加format有明显优势：

• 提升性能：浏览器会根据format快速判断是否支持该格式，直接跳过不支持的URL，避免无效下载
• 减少解析错误：部分场景下浏览器自动解析可能出错，明确format能降低这类问题的概率

仅指定单个字体文件时，不写format也能正常工作，但从性能和稳定性角度，建议匹配正确的format参数。

关于你看到的“奇怪示例” #

• 多URL顺序不同：第一个示例的顺序是从旧到新的兼容策略，先给IE加载EOT，再依次加载现代格式，确保不同浏览器都能拿到适配的字体
• 错误匹配格式：第二个示例里的url('Example.woff2') format('woff')属于错误用法，会导致浏览器识别混乱，实际开发中要避免
• 不写format：仅指定单个文件时不写format是可行的，但不如明确format高效

内容的提问来源于stack exchange，提问作者Robin93K