在線(xiàn)字體

在線(xiàn)字體又叫web font或網(wǎng)絡(luò )字體，是CSS3中的一個(gè)模塊，主要是把自定義的特殊字體嵌入到網(wǎng)頁(yè)中。

免安裝、免下載、直接在線(xiàn)使用。

由于設計的需要，網(wǎng)站中難免會(huì )用到一些比較特殊的字體（如方正字庫）來(lái)裝飾我們的網(wǎng)站，讓其更加美觀(guān)，我們可以用CSS的font-family屬性來(lái)設置文本字體。然而設置的字體如果是用戶(hù)的電腦上沒(méi)有安裝的字體，那么對不起，文字將以宋體呈現，這大大的影響了用戶(hù)體驗。

我們經(jīng)常能看到國外的一些網(wǎng)站使用了非常漂亮的字體，而這些字體通常在用戶(hù)的電腦中是沒(méi)有安裝的，如何實(shí)現的？如何讓特殊字體在網(wǎng)頁(yè)客戶(hù)端顯示？目前方案有兩種：

制作圖片嵌入網(wǎng)頁(yè)。

引用在線(xiàn)字體。

第一種方案生成圖片是現在主流的中文字體解決方案，但是有很大的缺陷，維護麻煩、不利于SEO。

第二種方案在線(xiàn)字體是一種創(chuàng )新的解決方案，在國外已經(jīng)相當流行，包括Google fonts、Adobe typekit等知名服務(wù)商。

通過(guò)上傳字體文件到指定目錄，然后在CSS中用規定格式進(jìn)行引用就可以使字體效果躍上你的頁(yè)面了，使網(wǎng)頁(yè)用字不再受客戶(hù)端影響。

這么酷的東東，為什么以前都不曾了解？

因為中文字體過(guò)于龐大，小則三五兆，大則十幾兆，所以在線(xiàn)字體只流行于英文網(wǎng)站，雖然中文網(wǎng)頁(yè)設計師望眼欲穿，但也無(wú)可奈何。臨淵羨魚(yú)，不如退而結網(wǎng)，而現在我們通過(guò)按需截取的方式生成小字庫，可以小到幾十K，甚至幾K，終于有效控制了字體文件的大小，使中文也加入了網(wǎng)絡(luò )字體的陣營(yíng)。

國內主流瀏覽器都支持嗎？比如：IE、360、搜狗、火狐、chrome、safari、Opera。答案是：YES!!

了解瀏覽版本支持詳情

360安全瀏覽器1.0及以上    支持    

360極速瀏覽器1.0及以上    支持    

搜狗瀏覽器1.0及以上    支持    

Chrome3.0及以上    支持    

FireFox3.5及以上    支持    

Safari3.1及以上    支持    

Android2.2及以上    支持    

IOS4.2及以上    支持    

在線(xiàn)字體的優(yōu)勢

不是圖片，是文字

不是生成圖片，而是使用真正的文本，您可以像文本一樣復制粘貼?，F在國內已有一些將中文字體做成圖片的網(wǎng)站，但是這種方法有太多弊端，我們摒棄這種即將被淘汰的方法，讓中文也能像國外網(wǎng)站中的英文一樣在線(xiàn)使用。

優(yōu)化搜索引擎排名

雖然圖片也可以呈現中文字體，但是Google、百度等搜索引擎無(wú)法辨認出圖片的文字內容，無(wú)法搜索到網(wǎng)站相關(guān)內容。 使用網(wǎng)絡(luò )字體（web font），則是呈現的真實(shí)的文字，無(wú)論是標題、內容都適合引用。

無(wú)級縮放不模糊

圖片在放大和縮小的過(guò)程中會(huì )產(chǎn)生變形或馬賽克，網(wǎng)絡(luò )字體（web font）采用的是矢量字體，支持無(wú)級縮放，不管放多大或縮再小都不會(huì )產(chǎn)生變形或模糊，給用戶(hù)一致的體驗。

改善使用體驗

圖片在高分辨率的視網(wǎng)膜屏幕中，常遇到分辨率不足的狀況；網(wǎng)頁(yè)字體則以矢量字在網(wǎng)頁(yè)中真實(shí)呈現，根據瀏覽分辨率做實(shí)時(shí)的字體描繪，無(wú)論放大到任何尺寸都能清晰分明。

編輯更方便，維護更簡(jiǎn)單

圖片每次都得重新編輯和生成，哪怕是一個(gè)字的更改，耗費人力和時(shí)間，擴展很不方便，而在線(xiàn)字體（web font）是真正的文字，隨時(shí)可添加更改，這節約的不只是人力成本，更是時(shí)間成本。

Font Awesome-一套絕佳的圖標字體庫和CSS框架

Font Awesome為您提供可縮放的矢量圖標，您可以使用CSS所提供的所有特性對它們進(jìn)行更改，包括：大小、顏色、陰影或者其它任何支持的效果。

一個(gè)字庫，675個(gè)圖標

僅一個(gè)Font Awesome字庫，就包含了與網(wǎng)頁(yè)相關(guān)的所有形象圖標。

無(wú)需依賴(lài)JavaScript

Font Awesome完全不依賴(lài)JavaScript，因此無(wú)需擔心兼容性。

無(wú)限縮放

無(wú)論在任何尺寸下，可縮放的矢量圖形都會(huì )為您呈現出完美的圖標。

如言語(yǔ)一般自由

Font Awesome完全免費，哪怕是商業(yè)用途。請查看許可。

CSS控制

只要CSS支持，無(wú)論顏色、大小、陰影或者其它任何效果，都可以輕易展現。

高分屏完美呈現

Font Awesome的矢量圖標，將使您的網(wǎng)站在視網(wǎng)膜級的高分屏上大放異彩。