CSS - 什么是字体松鼠 webfont 生成器用于答案

【问题标题】：CSS - What is font squirrel webfont generator used forCSS - 什么是字体松鼠 webfont 生成器用于
【发布时间】：2021-01-01 02:04:33
【问题描述】：

我认为font squirrel webfont 生成器用于使字体兼容所有浏览器。但我尝试了经典

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

它适用于所有最新版本的浏览器Google Chrome、Mozilla Firefox、Opera、Microsoft Edge 甚至Internet Explorer... 它是否用于上述旧版本？谢谢

【问题讨论】：

不太清楚你想在这里问什么......首先你陈述一个想法，然后你说“它有效”，然后问你是否应该将它用于其他事情？
另外，您似乎是在询问某些第三方网站上提供的功能，而不是任何损坏的代码或任何特定的标准.... 看起来可能是问的地方，不是在这里？
caniuse.com/?search=%40font-face

标签： css fonts font-face webfonts

【解决方案1】：

webfont 生成器之所以继续生成旧字体，是因为它们遵循“如果没有损坏，为什么要删除它？”的原则。

例如，EOT 是一种字体格式，尽管在现代完全没有必要，但它仍然偶尔会出现在字体生成器中。它支持 Internet Explorer 6+....如果您真的需要支持 20 年历史的浏览器，Font Squirrel 可以提供帮助。

...但是在现代，您只需要 WOFF 和 WOFF2。其他字体风格已过时且不必要，因为所有现代浏览器都可以使用 .woff ，并且大多数都可以使用 .woff2 。

您可以在此处查看兼容性：

WOFF：https://caniuse.com/woff

WOFF2：https://caniuse.com/woff2

EOT：https://caniuse.com/eot

TTF/OTF：https://caniuse.com/ttf

【讨论】：

【解决方案2】：

正如您所说，Font Squirrel 提供的解决方案适用于所有现代浏览器。

但是，如果您需要针对旧版本，我会推荐 https://onlinefontconverter.com 生成更完整的@font-face css，还提供更多字体扩展。

当我需要 @font-face 时，我使用以下 css：

@font-face{
  font-family:"Rage Italic";
  src:url("../fonts/RageItalic.eot");
  src:local("RageItalic"), local("RageItalic"), url("../fonts/RageItalic.woff") format("woff"), url("../fonts/RageItalic.ttf") format("truetype"), url("../fonts/RageItalic.svg#RageItalic") format("svg"); 
  font-weight: normal;
  font-style: normal;
}

【讨论】：