css - 删除不必要的 css font-face 字体类型

Question

我有一个模板，通过 font-face 在 css 中使用字体，font-face 调用所有类型的 .eot .svg .ttf 。 woff .woff2 .otf 字体。

1. Do I really need all of them? because size of them are 100 between 300kb
2. Browsers must download all of them when opens a webpage?

我想在 android/IE/chorme/firfox/ios 上正确显示字体。

Answer 1

您不需要为每个浏览器加载所有内容。

@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 400;
    src: local('PT Sans'),
         local('PTSans-Regular'),      
         url('https://fonts.gstatic.com/s/ptsans/v8/JX7MlXqjSJNjQvI4heMMGvY6323mHUZFJMgTvxaG2iE.woff2') format('woff2'),
         url('http://fonts.gstatic.com/s/ptsans/v8/LKf8nhXsWg5ybwEGXk8UBQ.woff') format('woff'),
         url('../fonts/PT_Sans-Regular.woff2') format('woff2'),  
         url('../fonts/PT_Sans-Regular.woff') format('woff'),  
         url('../fonts/PT_Sans-Web-Regular.ttf') format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

这是对 Google 字体的一些修改代码，它加载列表中的第一个文件 (woff2)，如果浏览器支持它，它不会加载下一个文件。

您真的需要所有这些吗？取决于您要支持的浏览器。您可以通过使用 Can I Use 查看哪些文件受支持。