為網站用戶添加字體到HTML / CSS代碼（跨瀏覽器）

Question

假設我有幾個用於PSD網站設計的.otf和.dfont字體文件。 現在我需要將這些字體添加到HTML / CSS代碼中。 我知道CSS3的@font功能可以做到這一點。 但我相信它對舊版瀏覽器不起作用？ 那么跨瀏覽器的方式是什么呢？

Answer 1

首先，網站在所有瀏覽器中看起來都不一樣（ http://dowebsitesneedtolookexactlythesameineverybrowser.com/ ）。 在舊版瀏覽器中不顯示這些字體是完全正常的。 只是提供@ThiefMaster提到的后備。

如果您堅持使用相同的字體，即使是舊瀏覽器，您可能不得不依賴Cufon（ http://cufon.shoqolate.com ）來實現跨瀏覽器兼容性。 使用特征檢測（使用Modernizr ）並有條件地加載Cufon庫。 請注意，在正文上使用Cufon會使頁面加載速度變慢。

PS：所有IE版本都支持Web字體嵌入。

Answer 2

您可以使用http://www.fontsquirrel.com/fontface/generator創建包含各種@font-face聲明的最兼容的CSS。

顯然會有一些舊的瀏覽器不支持它 - 對於那些你應該在使用自定義字體時指定常規字體，例如：

p { font-family: "your font", sans-serif; }

Answer 3

我正在使用FontSquirrel的@ font-face工具包生成器，在我看來它運行得很好。

夏嘉曦

Answer 4

FontSquirrel並不適合我。 另一方面， http: //transfonter.org/非常適合將DFONT轉換為TTF。