如何使用Modernizr檢測客戶端是否支持WebFonts？

如何使用Modernizr檢測Webfont支持，如果不是，則將Cufon推入其中？我基本上使用了90％的Google Web Font軟件包，其他10％是來自FontSquirrel的軟件包。如何使用Modernizr檢測客戶端是否支持WebFonts？

如果支持，我想依靠Webfonts，因爲這些詞可以索引和搜索引擎優化，但如果這些是不支持的，我仍然想渲染Cufon做得很好的正確字體。

來源

2012-03-05 mare

基本上每個瀏覽器都有@ font-face支持：http://caniuse.com/#search=font
所以你真的不需要cufon後備。

這就是說..它：

if (!Modernizr.fontface) Cufon.now();

但實際上，你並不需要使用的Cufón的。

來源

2012-03-06 08:12:09

據我所見，在幾臺運行IE7的不同PC上，不支持FontSquirrel軟件包，並且不顯示字體（使用默認的Sans serif回退）。我的軟件包包括所有可能的網頁字體格式（EOT，TTF，WOFF和SVG）。 – mare 2012-03-06 20:10:36

嘿保羅，我不明白它爲什麼不能在IE7和IE8中都能正常工作。除了我已經完成的工作之外，還有其他建議嗎（從提供程序到服務器重新下載並重新上傳字體包，更新web.config，H5BP中的一部分重置MIME類型並嘗試使用另一種字體）？ – mare 2012-03-06 22:45:01

保羅說的正確，即使IE7和IE8支持web字體（他們支持.EOT webfonts），這是一個普遍的事實，他們確實支持它，我只是不知道爲什麼它不適合我。

事實證明，這是CSS文件內部路徑渲染的問題。我使用SquishIt ASP.NET MVC插件來最小化和捆綁CSS文件。

當我在SquishIt包中包含FontSquirrel包中的stylesheet.css文件時，在瀏覽器IE7和IE8中不支持.eot字體。經過艱苦地測試這個bug後，我發現這兩個提到的瀏覽器都會支持.eot webfonts，如果這個文件是單獨包含的（不是在SquishIt包中），但是當包含在CSS中時，不會立即顯示正確的字體。

顯然SquishIt重寫文件的路徑，重寫（或編碼）「？iefix」字符串，從而使舊IE無法識別正確的.eot文件，並且無法正確呈現字體。

來源

2012-03-09 00:53:31 mare

如何使用Modernizr檢測客戶端是否支持WebFonts？

回答

相關問題