• 當前位置：創(chuàng)新互聯(lián) >> 常見問題 >> 前端開發(fā) >> css >> CSS加載外部字體的方法_CSS載入本地沒有的字體

CSS加載外部字體的方法_CSS載入本地沒有的字體

• 作者：創(chuàng)新互聯(lián) 文章來源：前端開發(fā)部 點擊數(shù)： 更新時間：2011-01-15
• 　　平時我們做網(wǎng)站CSS的都知道，用戶瀏覽網(wǎng)站時，網(wǎng)頁上的字體是加載本地電腦里的。如果網(wǎng)站使用了用戶電腦所沒有安裝的字體，那顯示字體就會被系統(tǒng)默認的字體所代替了，自然顯示效果也就大不如前了，這個問題如何解決呢，成都網(wǎng)站建設通過多方面了解。
  　　這個問題，其實還是有解決辦法的。那就是，準備一個或幾個字體文件，放置到網(wǎng)站空間服務器上，再用 CSS 的加載方法把字體加載到網(wǎng)頁中，這樣，即使用戶電腦中沒有某一種字體，也可以正常顯示！
  　　以微軟雅黑為例，一般來說，現(xiàn)在的 win7 系統(tǒng)都自帶了這種字體，但 winXP 卻沒有。如果網(wǎng)站中運用了雅黑字體win7 系統(tǒng)的用戶訪問能夠正常顯示，但 winXP 系統(tǒng)的用戶訪問，就不能顯示，應該是用默認的宋體代替了。
  加載字體文件的 CSS 方法，看這段代碼：
  body {font-family:’微軟雅黑’}
  @font-face {
  font-family:微軟雅黑;
  src: url(‘微軟雅黑.eot’); /* IE9 Compat Modes */
  src: url(‘微軟雅黑.eot?#iefix’) format(‘embedded-opentype’), /* IE6-IE8 */
    url(‘微軟雅黑.woff’) format(‘woff’), /* Modern Browsers */
    url(‘微軟雅黑.ttf’)  format(‘truetype’), /* Safari, Android, iOS */
    url(‘微軟雅黑.svg#微軟雅黑’) format(‘svg’); /* Legacy iOS */
  }
  系統(tǒng)字體的格式是ttf的，凡是以IE為內(nèi)核的瀏覽器都不支持加載外部 .ttf 格式的字體！那怎么辦��？
  把ttf轉(zhuǎn)換成eot網(wǎng)址：http://ttf2eot.sebastiankippe.com/
  好了，現(xiàn)在就來測試一下吧：
  @font-face
  語法：
  @font-face { font-family : name ; src : url( url ) ; sRules }
  說明：
  name : 字體名稱
  url : 　使用絕對或相對地址指定OpenType字體
  sRules : 樣式表定義
  設置嵌入HTML文檔的字體。
  　　嵌入HTML文檔的字體是指將OpenType字體（壓縮的TrueType字體）文件映射到客戶端系統(tǒng)，用來提供HTML文檔使用該字體，或取代客戶端系統(tǒng)已有的同名字體。
  示例：
  @font-face { font-family: dreamy; font-weight: bold; src: url(http://www.example.com/font.eot); }
  　　現(xiàn)在，雖然是成功解決了各主流瀏覽器加載外部字體的問題，但也只是成功了一小半，因為我們要清楚地看到問題的本質(zhì)，即后續(xù)需要測試網(wǎng)站加載速度的問題，兩個字體文件加起來快有30M 了，加載速度的問題亟待測試與解決！
• 網(wǎng)站建設采用CSS網(wǎng)頁布局的優(yōu)勢 :上一篇
  前端開發(fā)和網(wǎng)頁制作有什么區(qū)別？ :下一篇