CSS - 什么是字體松鼠網絡字體生成器用於

Question

我認為font squirrel網絡font squirrel生成器用於使字體兼容所有瀏覽器。 但我試過經典

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

它適用於所有最新版本的瀏覽器Google Chrome 、 Mozilla Firefox 、 Opera 、 Microsoft Edge甚至Internet Explorer ......它是否用於上述舊版本？ 謝謝

Answer 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

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