字体图标会增加网络请求的负担吗？

Question

<style>
@font-face {
  font-family: heydings;
  src: url('heydings-icons.ttf');

}
.icon {
  font-size: 3em;
  font-family: heydings;
}
</style>
<p class="icon">A</p>

这段html代码，将显示一个小人的图片，heydings-icons.ttf包含了几十个字体图标，一个网页如果仅仅使用一个字体图标，客户端就需要从服务器上下载整个heydings-icons.ttf 文件，这不是增加不必要的网络流量吗？用一个svg的图片图标，不是更好？
请问，服务器端发送了整个heydings-icons.ttf文件，还是仅仅发送了A对应的字体数据？

Answer 1

因为当时出现这个需求的时候，就是有很多可以自定义的内容，比如说UI库就并不知道你使用了和将会使用哪些图标。以及可能后期会按照返回的数据来渲染图标，比如说可配置的侧边菜单栏。
一般来说这些字体图标文件也不会很大。基本上也整个文件就 2k ~ 3k 大小。

这两年开始UI库才使用单个的SVG问价作为图标组件的内容。但是因为历史问题和惯性思维，其实还会被吐槽的很严重。

---

最后你提到的那个问题，其实是请求了完整的字体文件，但是一般这种文件都是会被浏览器缓存的，所以只需要放到CDN当中就可以了，一般来说 2M 以下的都是可以立刻加载完毕。

Answer 2

会，字体包过大需要时间加载才会出效果