是否立即立即加载字体图标文件？ （@ font-face）（EOT，SVG，TTF，WOFF）

Question

例如，假设我使用的是Font Awesome或类似的东西。我已将以下文件复制到fonts目录中：

• some-icons.eot
• some-icons.svg
• some-icons.ttf
• some-icons.woff

...到我的网站的公共目录，并在HTML中添加了具有以下样式的相应 css 文件：

@font-face {
  font-family: 'some-icons';
  src:  url('fonts/some-icons.eot?xi17ln');
  src:  url('fonts/some-icons.eot?xi17ln#iefix') format('embedded-opentype'),
    url('fonts/some-icons.ttf?xi17ln') format('truetype'),
    url('fonts/some-icons.woff?xi17ln') format('woff'),
    url('fonts/some-icons.svg?xi17ln#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

...

.icon-news:before {
  content: "\e90c";
}
.icon-mail:before {
  content: "\e90f";
}
.icon-like:before {
  content: "\e910";
}
.icon-photo:before {
  content: "\e911";
}
.icon-note:before {
  content: "\e913";
}
.icon-paperplane:before {
  content: "\e914";
}

...

我了解到，当客户端访问我的网站时，整个CSS文件将由浏览器加载（下载），但是fonts目录中的那些文件呢？

这样做：

   @font-face {
      font-family: 'some-icons';
      src:  url('fonts/some-icons.eot?xi17ln');
      src:  url('fonts/some-icons.eot?xi17ln#iefix') format('embedded-opentype'),
        url('fonts/some-icons.ttf?xi17ln') format('truetype'),
        url('fonts/some-icons.woff?xi17ln') format('woff'),
        url('fonts/some-icons.svg?xi17ln#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;
    }

...意味着这些文件中的全部或部分文件将被客户端的浏览器立即下载（访问我的网站时）？

或者这些文件都不会被浏览器下载，并且当有这样的HTML代码时，它们仅用于获取特定的图标：

<i class="icon-mail"></i>

因此，当HTML带有class="icon-mail"时-浏览器将“浏览” fonts目录中的那些图标文件并获取该特定图标（它将不会下载整个文件图标）？

如果有更多图标-CSS会更大，但是fonts目录中的那些文件也会更大。我想知道是不是CSS影响整个网站的加载速度，还是其中一些文件也被浏览器立即加载（因此它们也影响了整个页面的加载速度）？