哪个是要加载的正确字体文件?

时间:2017-01-03 10:40:52

标签: css fonts typography

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

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?

2 个答案:

答案 0 :(得分:0)

woffwoff2是两种字体类型,事情正在倾向于此。

因此,woff和woff2将涵盖新浏览器或具体:

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

答案 1 :(得分:0)

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