如何將外部字體加載到HTML文檔中？

75

看看這個A List Apart article。相關的CSS是：

@font-face { 
    font-family: "Kimberley"; 
    src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype"); 
} 
h1 { font-family: "Kimberley", sans-serif }

以上將在Chrome/Safari/FireFox中工作。正如Paul D. Waite在評論中指出的那樣，如果您將字體轉換爲EOT format，則可以使用IE。

好消息是，這似乎在舊版瀏覽器中優雅地退化，所以只要您意識到並非所有用戶都會看到相同的字體，使用它就很安全。

來源

2010-02-10 14:43:41

+4

IE 8確實支持它，但您需要將您的字體轉換爲OTF。網頁字體有點...涉及。見http://snook.ca/archives/html_and_css/becoming-a-font-embedding-master – 2010-02-10 15:14:12

+0

非常酷，不知道。更新我的答案以反映。 – 2010-02-10 16:08:44

3

CSS3提供了一種方法與做使文本「等等等等等等等等等等等等等等」在同一目錄下的TTF文件自定義字體@ font-face規則。

http://www.w3.org/TR/css3-webfonts/#the-font-face-rule

http://www.css3.info/preview/web-fonts-with-font-face/

Here是許多不同的方式，這將在不支持的@ font-face規則瀏覽器。

來源

2010-02-10 14:42:59 roflwaffle

1

關於Jay Stevens的回答：「可用於HTML文件的字體必須存在於用戶的機器上，並且可以從網絡瀏覽器訪問，因此除非您想通過單獨的外部設備將字體分發到用戶的機器過程中，它無法完成。「確實如此。

但是還有另外一種使用javascript/canvas/flash的方法 - 非常好的解決方案給cufon：http://cufon.shoqolate.com/generate/庫生成一個非常易用的外部字體方法。

來源

2010-02-10 14:47:20 aviv

1

如果你想支持比CSS3看中更多的瀏覽器，你可以看看開源庫cufon javascript library

這裏是the API，如果你想要做更多時髦的東西。

主要專業：允許你做你想要的或需要的。

主要缺點：組合不允許在一些瀏覽器文本選擇，所以在使用上頭文字appropiate（但如果你願意，你可以在所有網站上使用它）

來源

2010-02-10 14:48:40 jpabluz

1

微軟有包括嵌入字體的專有的CSS方法（ http://msdn.microsoft.com/en-us/library/ms533034(VS.85).aspx），但這可能不應該被推薦。

我以前用過sIFR，因爲它的工作原理非常好 - 它使用Javascript和Flash動態替換普通文本，其中一些Flash包含您想要的字體中相同的文本（該字體嵌入在Flash文件中）。這不會影響文本週圍的標記（它通過使用CSS類來工作），您仍然可以選擇文本，並且如果用戶沒有Flash或禁用了Flash，它將優雅地降級到任何字體的文本你在CSS中指定（例如Arial）。

來源

2010-02-10 14:54:46

+0

這不是真正的專有：其他瀏覽器支持'@ font-face'，所以它是標準化的。（我相信他們也向標準機構提供了專有字體格式。） – 2010-02-10 15:15:49

+0

嗯，WEFT格式已經提交給標準機構很好，但我不認爲這是其他瀏覽器支持的格式那一刻，我鏈接的文章提到了Internet Explorer 4.0，所以在這方面，它似乎是要避開的東西。 – 2010-02-10 15:29:00

16

保羅愛爾蘭人有辦法做到這一點，涵蓋了大部分常見問題。見他bullet-proof @font-face article：

最後的變種，它從IE下載停止不必要的數據，而在IE8，Firefox，歌劇，Safari瀏覽器的工作原理和Chrome看起來是這樣的：

@font-face { 
    font-family: 'Graublau Web'; 
    src: url('GraublauWeb.eot'); 
    src: local('Graublau Web Regular'), local('Graublau Web'), 
    url("GraublauWeb.woff") format("woff"), 
    url("GraublauWeb.otf") format("opentype"), 
    url("GraublauWeb.svg#grablau") format("svg"); 
}

他還鏈接一個generator可以將字體轉換爲您需要的所有格式。

正如其他人已經指出的那樣，這隻適用於最新一代的瀏覽器。你最好的選擇是將它與Cufon一起使用，並且只在瀏覽器不支持@font-face的情況下才加載Cufon。

來源

2010-02-10 15:22:22

0

試試這個

<style> 
@font-face { 
     font-family: Roboto Bold Condensed; 
     src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf); 
} 
@font-face { 
     font-family:Roboto Condensed; 
     src: url(fonts/Roboto_Condensed/RobotoCondensed-Regular.tff); 
} 

div1{ 
    font-family:Roboto Bold Condensed; 
} 
div2{ 
    font-family:Roboto Condensed; 
} 
</style> 
<div id='div1' >This is Sample text</div> 
<div id='div2' >This is Sample text</div>

來源

2014-04-16 06:22:57

如何將外部字體加載到HTML文檔中？

回答

相關問題