CSS, CSS2, 網頁設計

CSS教學-Consolas字型固定英數字元大小

梅干2011/04/11
梅問題-CSS教學-ConsolasFont字型讓英數字元等寬
  有在製作網頁的朋友們,應該多少都會遇到中英數字混雜的時候,一般在網頁中常用的英數字型都會設為Arial,由於Arial是Windows內建的共有字型,所以也經常被拿來使用,但是在大部分的情況下,Arial所呈現出來的英數字型還不錯,若遇到像ijl之類的文字時,則會發現到這些字似乎只佔了半個字元,且幾乎都黏在一塊,而有趣的是當使用cmd命令視窗時,在裡面所輸入的英數文字,則是佔滿一個字元,所以字不但不會黏在一塊,看起來相當的舒服與好辨視,因此梅干就在想,竟然cmd命令視窗都可辦到,那或許可以把它移植到網頁來試看看,哈!經梅干測試結果,果真解決了此問題,如此一來所有的英數都會佔滿一個字元,這樣就不會有些字元黏在一塊囉!

Consolas字型設定:
放到<head>~</head>之間:
#css
.Consolas{
font-family: Consolas;
}
.Arial{
font-family: Arial, Helvetica, sans-serif;
}

放到<body>~</body>之間:
#html
<span>梅問題教學網</span><br />
<span class="Consolas">abcdefghijklmnopqrstuvwxyz-0123456789-@#$%^&*()+-</span><br />
<span class="Arial">abcdefghijklmnopqrstuvwxyz-0123456789-@#$%^&*()+-</span>

  很簡單吧!下回只要是英數字型,則改套用Consolas字型,這樣就可解決字元問題,且Consolas也是內建的字型,所以不用擔心其它人的電腦看到的會不同,雖然只是一個簡單的設定,會讓版面看起更加的舒適,閱讀起來也會更加順暢,才不會有乎密乎疏的感覺。
[範例預覽]
UAG軍規iPhone防摔殼