在設計佈局網頁時 經常想要用一些比較好看的字體，比如微軟雅黑，這個字體在近年來在網頁設計中運用越來越平常， 然而所使用的字體也只有自己能看到 到別的機子上 又恢復了原來的宋體神馬的。
經過一位高手的提點，能用CSS直接實現，查閱了部分資料 並經過測試 總結下列方法來實現網頁中的自定義字體
我們很容易發現EOT字體僅僅對於IE瀏覽器支持 面對龐大的ＩＥ用戶 ＥＯＴ字體的重要性也就不說了
對於其他瀏覽器由於直接支持TTF字體 就不多介紹 只是在定義樣式時 注意下瀏覽器的兼容問題就可以了
由於各瀏覽器對 '@font-face' 規則字體格式支持存在差異，若僅通過定義一個 '@font-face' 規則，可以通過 CSS hack 的方式在IE、Firefox、Chrome、Safari、Opera中得到相同的字體效果：
<style type="text/css">
<!--
定義字體
@font-face {
font-family: " your FontName ";
src: url( /location/of/font/FontFileName.eot ); /* IE */
src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* 非IE */
}
調用部分
.yourFontName { font-family:" your FontName ", verdana, helvetica, sans-serif; }
-->
</style>
<body>
<span class="yourFontName ">微軟雅黑顯現效果</span>
</body>
解釋一下,"your FontName" 爲自定義字體名字, "real Fontname"是真實字體名字, 非IE瀏覽器讀到第一行,一看是eot字體,跟自己沒關係,於是跳到第二行,讀取"local"(本地)定義的字體,試圖到用戶機器上去找這個字體(所以一定要用真實的字體名字,這樣萬一用戶機子上有該字體就可以省去用戶一個ttf的下載),發現沒有就從後面的"url"的路徑去下載ttf文件了. 而IE過程相反,它讀到第一行發現是eot, 但是執行以前他會去繼續讀後面的行,所以"local"定義非常必要,IE不認識"local",它就暈了,只好倒回去下載eot,如果沒有local定義的話,這段字體定義代碼對IE是無效的.
至此跨瀏覽器的內嵌字體css定義就完成了.
最後還有一個問題,我考慮了下中文內嵌字體下載量過大的問題,英文字體一般比較小,中文字體動輒幾MB,下載量太大,看來中文內嵌字體要完全實用要給字體減肥才行,比如只保留字體裏面網站使用的字,不用的字全部剔掉,這樣就能大大減小體積了.
搜了一下,有人貌似有類似的解決方案
在線的轉換工具
