天天看點

如何讓沒有安裝網頁中所需字型的使用者也能得到一緻的浏覽效果【轉】

   今天給大家談一個關于字型的話題,我們在做項目的過程中會遇到一些在psd中的字型在自己的電腦中沒有安裝,或者是一些特殊的文字,通常的做法是把它切成圖檔,但是如果這個站是多個語言的,那我們是不是把每個語言的都切一張圖檔呢,這樣做不僅工作量很大,而且在後期維護的過程中可能會很麻煩,那我們應該怎麼做呢。今天給大家介紹一種方法:

首先、

先要把所用的字型下下來,我們可能會想,把字型下下來裝到電腦上不就可以了麼,事實是這樣,如果這個網站在我們自己的電腦上浏覽可能不會出現什麼問題,但是如果在沒有這個字型的電腦上浏覽可能就會有問題了,這裡我們解決的是無論這個電腦上有沒有這個字型可以正确的浏覽這個網站。

第二、

先要打開這個位址:http://cufon.shoqolate.com/generate/ 打開之後先要下載下傳一個JS檔案,點選下載下傳。然後把本地的字型上傳,下面的選項設為預設,最後 let’s do this. 這時會再次下載下傳一個js檔案。

第三、

把下載下傳的JS檔案引用到HTML中。

第四、

在html中加入這段代碼:

<script type=”text/javascript”>

Cufon.replace(‘h5′, { fontFamily: ‘Myriad Pro’ });

</script>

在這裡Cufon.replace(‘h5′, { fontFamily: ‘Myriad Pro’ });的意思就是:在h5這裡的文字的字型是Myriad Pro字,不過在這裡的h5并不是固定的它可是其它的标簽,比如a span p等等,但是在用這些标簽的時候,我們必需在css樣式裡面給它屬上一個值,這個值就是:fontfamily:’Myriad Prpo’; 也就是把他的字型給寫上去,這樣才會有效。