2010-04-04 27 views
1

如果我想讓一些文字出現在書法字體中,我該如何知道它將如何呈現用戶計算機。我如何知道該人在計算機上的字體或與之有關係?任何在css中做這件事的好例子?網站上的書法字體

我會更好地把東西放在一起在Photoshop中,並保存爲圖像?

+2

您可能會對http://doctype.com上的此問題得到更好的回覆。 – 2010-04-04 03:38:26

回答

2

如果您使用的字體標題和花哨頁面元素不會經常更改,我會使用photoshop中的圖像。

如果你想使用字體爲主體的文本,我會建議在CSS中定義一個字體家族。我會找到你想要在你的當前操作系統上使用的字體,如果它的字體你找到並下載的機會是最終用戶不會有它。如果它的系統字體或字體與主要軟件應用程序(如ms字)一起提供,那麼它很可能會在最終用戶機器上提供。一旦你找到了你想要使用的字體,我會做一些研究,看看你是否能夠找到類似的mac風格,甚至是Unix風格。

body 
{ 
font-family:"DejaVu Sans","DejaVu Sans Mac Name","DejaVu Sans Unix Name","Times New Roman" 
} 

它總是很好用,你知道任何人的機器上工作,將備份的字體,瀏覽器會在開始的第一個字體列表中選擇最適用的說明它的工作方式,直到找到一個匹配。

1

您可以將TTF字體文件嵌入到CSS中。

它的一個很好的例子是here

/* DejaVu Sans 2.24 
    http://dejavu.sourceforge.net/wiki/index.php/Main_Page */ 
@font-face { 
    font-family: "DejaVu Sans"; 
    src: url("data:application/octet-stream;base64,[BASE-64-ENCODED-FILE-CONTENTS]") 
} 

編輯:

注:這隻會工作在Firefox和Chrome的可能。

微軟發佈了一個document關於如何使用Embedded OpenType格式將字體嵌入到網頁中。它涉及的字體轉換爲一個EOT文件,然後使用以下語法引用它的樣式表:

@font-face { 
    font-family: Piefont; 
    font-style: normal; 
    font-weight: normal; 
    src: url(PIE0.eot); 
} 

(這是從一個官方的在線演示here拉)。

根據Boldewyn的回答,我敢打賭你也可以在src:參數中使用TTF文件。

+2

這在許多瀏覽器中都不起作用。 – 2010-04-04 03:49:02

+0

@NSD - 很對,謝謝。我更新了支持IE的答案。 – amphetamachine 2010-04-19 16:48:24

0

我傾向於在我的個人網站上使用@font-face ..但這取決於你在做什麼。

首先..的問題。 這是靜態文本還是我們在討論帖子標題等。

如果靜態文本,如主標題,與圖像一起使用。
<h1><strong>Same text as the image(seo)</strong></h1>

並在CSS H1 {背景:網址(/圖像/使用最文字作爲圖像名換SEO。png)不重複左上角;寬度:100像素; height:30px;}/* width and height is image width/height / h1 strong {position:absolute; left:-8000px;}/確保文字不會顯示在圖像上,但不會顯示隱藏它爲seo /屏幕閱讀器的目的*/

如果你正在談論的東西需要動態,你需要更多的優雅degredation,去與sIFR。如果曼妙降解是可以接受的,去與@font-face

0

爲了增加@font-face支持者:Paul Irish發佈的版本里,CSS聲明,在所有新的瀏覽器加上所有的IE下降到IE5.5作品。但是,您需要TTF和EOT格式的字體才能使用此技術。

如果您的字體的許可證允許這樣做,有很多工具可以在格式之間來回轉換。只是谷歌。