Css 要加载的正确字体文件有哪些？

我目前正在本地托管材质图标字体，在我的字体文件夹中，我有以下文件

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 font>.woff2>.woff吗？

woff

和

woff2

是两种字体类型，人们越来越倾向于使用这两种字体

因此，woff和woff2将涵盖新的浏览器，或者特别是：

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

---

使用svg的浏览器列表

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