CSS-什么是用于字体松鼠的Webfont生成器

如何解决CSS-什么是用于字体松鼠的Webfont生成器

我认为font squirrel Webfont生成器用于制作兼容所有浏览器的字体。但是我尝试了经典

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

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

解决方法

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

,

正如您所说，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;
}