是否需全量字体文件？无权重图标字体单文件使用问题

嘿，这两个问题问得很实在，我来给你拆解清楚：

1. 使字体正常工作是否需要所有font-family文件？ #

其实不需要全部引入，核心看你的目标浏览器兼容范围：

• 如果只面向现代浏览器（Chrome 36+、Firefox 39+、Safari 10+、Edge 14+），那只放WOFF2格式就够了——它是目前压缩率最高、性能最优的字体格式，所有主流现代浏览器都完美支持。
• 要是得兼容老旧浏览器，比如IE8及以下，就得补上EOT格式；兼容Android 4.3及以下的设备，要加WOFF；而SVG字体现在只有iOS 8及以下这类古董级设备才需要。

说白了，按需引入对应格式就行，没必要把所有格式都塞进项目，纯粹徒增文件体积。

2. 以Font-Awesome为例，仅引入单个图标字体文件会引发哪些问题？ #

Font Awesome这类图标字体的不同格式文件，是同一套图标集的不同编码版本，但只靠单个格式会踩不少坑：

• 浏览器兼容性直接失效：不同浏览器对字体格式的支持天差地别：
  • IE8及以下只认EOT，只引WOFF2的话，这些旧浏览器里的图标会变成空白方块；
  • 桌面版Chrome 37+已经砍掉了SVG字体的支持，只放SVG的话，现代Chrome用户根本看不到图标；
  • Android 4.3及以下不支持WOFF2，只靠它的话旧安卓设备会显示乱码或占位符。
• 渲染质量没法兼顾：不同格式的渲染逻辑不一样。比如SVG是矢量格式，在Retina这类高DPI屏幕上渲染得特别锐利清晰；而WOFF/WOFF2在低分辨率屏幕上的显示更顺滑自然。只选一种格式的话，总有部分设备的显示效果打折扣。
• 加载性能拖后腿：不同格式的文件体积差异明显，WOFF2的压缩率比WOFF高30%左右，比SVG/EOT小得多。要是选了体积大的格式（比如未压缩的SVG），会明显拖慢页面加载速度，尤其是在移动网络环境下，用户体验会受影响。
• 遇到渲染bug没退路：某些浏览器对特定格式存在小众bug，比如早期Firefox对SVG字体的部分图标渲染有偏移，旧版Safari对WOFF字体的字距处理异常。如果有多个格式作为 fallback，浏览器会自动选它支持且能正常渲染的版本；只靠单个格式的话，遇到这类bug就只能硬着头皮接受异常显示了。

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