讓CSS正確顯示中文字體

即使網頁已經是用UTF-8編碼，有時候還是會遇到亂碼的問題…例如在CSS中使用中文字體：微軟正黑體、新細明體…等，這問題真的很無奈！每次遇到都還是要想辦法把它變成unicode！雖然javascript可以讓中文字體變成UTF-8的功能：

<script type="text/javascript">

var uri="微軟正黑體";

document.write(encodeURIComponent(uri));

</script>

但CSS本身無法使用javascript…

這時候FireBug的指令列(Show Command Line > Command Line)就變成了我們的小幫手，可以幫我們達成中文字轉成unicode編碼的要求！只要在指令列使用「escape()」功能：

假設我們要CSS正確顯示「font-family:微軟正黑體;」，

在指令列用escape指令輸入「微軟正黑體」：

escape('微軟正黑體')

可以得到底下的回應：

%u5FAE%u8EDF%u6B63%u9ED1%u9AD4

再把所有的「%u」全取代成「/」(反斜線)就得到：

\5FAE\8EDF\6B63\9ED1\9AD4,\65B0\7D30\660E\9AD4

上面一串奇怪的數字加英文，就是我們要的unicode編碼！

將它取代原本的「微軟正黑體」：

font-family:\5FAE\8EDF\6B63\9ED1\9AD4,\65B0\7D30\660E\9AD4;

瀏覽器就可以正確顯示CSS中的「微軟正黑體」了！

另外，在Chrome、IE以及Safari的「開發人員工具」中，都有「主控台(Console)」可以使用「escape('中文字')」的功能，我覺得還滿不錯用的！