哪些是要加载的正确字体文件？答案

【问题标题】：Which are the correct font files to load?哪些是要加载的正确字体文件？
【发布时间】：2017-01-03 10:40:51
【问题描述】：

我目前在本地托管 Material Icons 字体，在我的字体文件夹中我有以下文件。

MaterialIcons-Regular.svg
MaterialIcons-Regular.ttf
MaterialIcons-Regular.woff
MaterialIcons-Regular.woff2

如果我只支持新的浏览器和 IE11+，我需要所有这些文件吗？

.svg 文件也相当大，有 276kb，而且 webpack bundler 抱怨文件的大小。哪个浏览器会选择 .svg 字体？

在css中加载的字体如下：

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src:
    local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(../fonts/MaterialIcons-Regular.woff2) format('woff2'),
    url(../fonts/MaterialIcons-Regular.woff) format('woff'),
    url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
}

是 .svg 字体 > .woff2 > .woff 吗？

【问题讨论】：

标签： css fonts typography

【解决方案1】：

woff 和 woff2 是目前趋向的两种字体类型。

所以，woff 和 woff2 将涵盖新的浏览器，或者具体来说：

Chrome  Safari  Firefox Opera   IE  Android iOS
5+      5.1+    3.6+    11.50+  9+  4.4+    5.1+

【讨论】：

我想我正在尝试理解 .svg 字体，什么时候加载？
我只是注意到我从来没有真正在我的 css 中加载那个 .svg 文件，所以我从来没有真正使用过它吗？是否必须在 .woff2 上方的 css 中声明？

【解决方案2】：

http://caniuse.com/#feat=svg-fonts 使用 svg 的浏览器列表

【讨论】：