CSS - squirrel webfont 生成器的用途是什么

Question

我认为

font squirrel

网络字体生成器是用来制作兼容所有浏览器的字体的。但我尝试了经典

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

并且它适用于所有最新版本的浏览器

Google Chrome

、

Mozilla Firefox

、

Opera

、

Microsoft Edge

甚至

Internet Explorer

...它是否用于上述旧版本？谢谢

Answer 1

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

例如，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

Answer 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;
}