[轉]網頁字體坎入技術－冠霖的部落格

製作網頁的時候對於字型顯示一直是個困擾。因為要考慮到使用者端的電腦有沒有使用的字型，所以時常到最後選擇的是使用標準字型。

如果是使用英文文字，問題就還可以解決。微軟很早就有「Microsoft WEFT 3」的 Web Embedding Fonts Tool 解決方法。可以將開發者電腦裡面的字型檔案打包成為WEB物件，讓不同的瀏覽者電腦裡面沒有開發者使用的字型的時候仍然可以正常瀏覽。

圖:利用WEFT可以顯示使用者電腦沒有安裝的特殊字型

可以看到上圖，某些字型在大部分電腦裡面沒有存在。除非轉換成為圖片，否則網站上就看不到這些字型的顯示。透過WEFT可以讓字型在使用者電腦可以正確顯示。

這裡有篇文章更完整的介紹這個技術：
EOT網頁字體嵌入技術

之前抓下來研究了一段時間，發現在處理中文字的時候一直都沒有辦法成功。所以在做網頁最常用到的黑體字就沒有辦法在網頁上呈現。畢竟每個人電腦裡面有安裝黑體字的並不多。

現在有另外一個服務TXT2PNG，對網頁製作者而言更容易。不需要自己作圖片，只要坎入一些Javascript的語法就可以線上立即將自有字型轉換成為PNG圖片。

圖片左邊顯示的就是一般的文字。右邊就是經過Javascript轉換之後成為png圖片檔案格式的呈現方式。差別在哪呢？如果我們需要製作網頁的banner時候就可以利用這技術快速置換banner圖片上的字型。而且是以png圖片呈現。完全不需要在經過繪圖軟體製作囉。

使用方法也很容易。只要在網頁裡面加上這些使用這段javascript語法：

<script type="text/javascript" language="javascript" src="http://www.text2png.com/text_script.js"></script>
<script type="text/javascript" language="javascript">
	text2png.onLoad = function(){
        // on of the replace functions below
    };
</script>

然後在 replace function 的部份選擇畫面中需要轉換為圖片檔的物件 id, 利用以下語法就可以把字型轉換。

線上把字型轉成圖片的服務或許有看過了。但我關心的是到底他是否支援中文字呢？這是作中文網頁最關心的事情。在原始網頁字體展示的地方看到。有支援部份的中文字唷。雖然目前支援的字型還不是很多。但總是達到了一些些效果。在透過css的幫助的話，以後作網頁就更可以做出更多輕質量的網站了。