回答
看看這個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。
好消息是,這似乎在舊版瀏覽器中優雅地退化,所以只要您意識到並非所有用戶都會看到相同的字體,使用它就很安全。
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規則瀏覽器。
關於Jay Stevens的回答:「可用於HTML文件的字體必須存在於用戶的機器上,並且可以從網絡瀏覽器訪問,因此除非您想通過單獨的外部設備將字體分發到用戶的機器過程中,它無法完成。「確實如此。
但是還有另外一種使用javascript/canvas/flash的方法 - 非常好的解決方案給cufon:http://cufon.shoqolate.com/generate/庫生成一個非常易用的外部字體方法。
如果你想支持比CSS3看中更多的瀏覽器,你可以看看開源庫cufon javascript library
這裏是the API,如果你想要做更多時髦的東西。
主要專業:允許你做你想要的或需要的。
主要缺點:組合不允許在一些瀏覽器文本選擇,所以在使用上頭文字appropiate(但如果你願意,你可以在所有網站上使用它)
微軟有包括嵌入字體的專有的CSS方法( http://msdn.microsoft.com/en-us/library/ms533034(VS.85).aspx),但這可能不應該被推薦。
我以前用過sIFR,因爲它的工作原理非常好 - 它使用Javascript和Flash動態替換普通文本,其中一些Flash包含您想要的字體中相同的文本(該字體嵌入在Flash文件中)。這不會影響文本週圍的標記(它通過使用CSS類來工作),您仍然可以選擇文本,並且如果用戶沒有Flash或禁用了Flash,它將優雅地降級到任何字體的文本你在CSS中指定(例如Arial)。
這不是真正的專有:其他瀏覽器支持'@ font-face',所以它是標準化的。 (我相信他們也向標準機構提供了專有字體格式。) – 2010-02-10 15:15:49
嗯,WEFT格式已經提交給標準機構很好,但我不認爲這是其他瀏覽器支持的格式那一刻,我鏈接的文章提到了Internet Explorer 4.0,所以在這方面,它似乎是要避開的東西。 – 2010-02-10 15:29:00
保羅愛爾蘭人有辦法做到這一點,涵蓋了大部分常見問題。見他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。
試試這個
<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>
- 1. 如何將html加載到已從外部html文件加載的「皮膚」中?
- 2. 如何將外部html文件加載到div中
- 3. 如何將外部JavaScript腳本加載到(純)SVG文檔?
- 4. 如何加載外部html文件?
- 5. 如何HTML加載外部JS文件
- 6. 如何使用emberjs將外部html加載到html
- 7. 將外部pdf文檔加載到div中
- 8. 將外部鏈接文件添加到文檔和媒體
- 9. 將外部HTML加載到DIV
- 10. 如何將外部HTML加載到JSF中
- 11. 加載外部HTML文件
- 12. 將外部文件加載到div中
- 13. 如何將外部資源/字體添加到Firefox擴展中?
- 14. 將包含外部javascript文件的外部html文件加載到div
- 15. 在html文檔之外加載腳本
- 16. 如何使用OpenXml將外部圖像添加到word文檔?
- 17. 如何將外部鏈接添加到XML文檔(DTD shema)?
- 18. 如何將外部json文件加載到dhtmlx Grid中?
- 19. d3:如何將外部CSV文件加載到數據中?
- 20. 如何將外部JS文件加載到moodle中?
- 21. Pygame從外部字體文件加載字體
- 22. 將外部TPL文件加載到JST
- 23. 如何將外部javascript文件放入我的html文檔?
- 24. 將文檔字符串加載到iframe
- 25. 將網頁html下載到html文檔
- 26. 使用jquery將外部html文件加載到div
- 27. 將外部html文件加載到div jquery
- 28. 如何將Georgia字體加載到Dompdf
- 29. 如何將外部字體添加到Android應用程序
- 30. 如何在html中使用jquery加載文檔後追加html?
IE 8確實支持它,但您需要將您的字體轉換爲OTF。網頁字體有點...涉及。見http://snook.ca/archives/html_and_css/becoming-a-font-embedding-master – 2010-02-10 15:14:12
非常酷,不知道。更新我的答案以反映。 – 2010-02-10 16:08:44