⑴ 將圖標轉換成web字體 我顯示不出來的
字體文件創建好了，你可以先用word試試么...
⑵ CSS的問題 我知道括弧裡面是設置屬性 顏色啊 什麼的 這些 前面那些表示什麼啊 WEB-M2 M2H3的 這些是什麼啊
每個層的class 命名
例如<div class="web_m"></div>
css里設置這個樣式就是.web_m{ background:#c0c0c0; height:460px;} 這種方式
.web_m2 h2這種是指
<div class="web_m"><h2>這里的樣式</h2></div>
.web_m2 .web_m2_t這個定義了2個層里的 color屬性 因為2個color是一樣的 可以綜合一個定義
⑶ font2web在線字體轉換攻略
class Composite : Component
{
private List children = new List();
public Composite(string name) : base(name) { }
public override void Add(Component c)
{
children.Add(c);
}
public override void Remove(Component c)
{
children.Remove(c);
}
⑷ 如何製作icon-fontweb字體ttf
1.你需要一個矢量圖（AI做的最好）
2.你需要打開icomoon的網站~在線製作時使用~這里貼不上網址~請自行網路喲~
方法/步驟
這里，以已經有了一個點陣圖為例~灰色的，一個丑不拉幾驚世駭俗的……額……丑圖標。我們把它在AI里摳圖來~填上一個紅色~然後把紅色的摳出來的新矢量圖給復制下來。
新建一個畫布，（好吧，畫布啊窗口啊文件啊什麼的，你愛怎麼稱呼都好，不要在意這些細節），這里要注意的是，如果你每 個icon的大小不一樣，那你至少得保證你的SVG畫布一樣大才行，新建的畫布就和你切圖時用的統一尺寸一樣，一個標准就好，把你所有的icon都放進這 個尺寸里，調節大小，它們變成字體就不會錯。這里樓主需要46*46的，所以建了46*46的。
3
在新的畫布里，粘貼出你剛才復制的新摳的矢量圖~由於樓主的畫布大小沒有大變化，所以和之前步驟一中的圖差不多，仔細看，可以看到，沒有原來的底圖了，只有我們同樣丑不拉幾的新摳的圖標。
⑸ 如何把中文字體轉成 web font
1、目前還沒有專門的工具能生成所有web所需格式。
2、PS里的路徑雖然是矢量的，但PS本身是點陣圖工具，導成高解析度的jpg是最好的方式，如果你不想在轉換成失去精度，可以用FontCreator裡面的工具來調整矢量輪廓(在空白處雙擊就能到錨點模式，錨點工具很方便的)。
或者用AI或coreldraw將矢量圖設計好，然後導入另一個字體工具「fontographer」中，這個工具可以將矢量錨點原版的保留下來。然後再生成
作
⑹ 如何製作自己的網頁字體圖標
從設計單獨的圖標開始，到把它們轉化成@font-face格式以備嵌入，乃至授權給他人使用，整個過程中我們將僅使用免費軟體和在線服務。感覺怎麼樣呢？你不必依託於任何深奧的知識就可以製作出一套成功的英文字體（包括字母和數字），而只需要眼睛來設計——你面對的可能是非常非常小的東西。
最終，你將會收獲一個製作設計元素的過程（方法），它的意義遠遠在製作出簡單的圖標之上。
在我們繼續之前，首先應該談談，究竟希望通過在設計中使用圖標達到什麼目的，又是什麼使得一個圖標比下一個更成功。先講理論再講應用。為了完成這個任務，我們必須思考圖標作為符號學的一部分，所扮演的角色。
什麼是優秀的圖標？
符號學，從廣義上來說就是研究符號系統，我們如何對它們的形成和維護做出貢獻，它們亦因我們對世界的理解而受到影響。
不論何時，當你從「它象徵著什麼」—— 它向你的觀眾傳達了什麼信息，或者它喚起了他們什麼概念——思考你的某一部分設計工作時，你就是以符號學家的角度來審視你的設計。符號學像其它語言學一樣，的確可以覆蓋一種語言，在一個網站上面，有很多東西不是通過文字表達出來的，例如顏色、字體、形狀（圖標）。每個人都應該注意的是，這些東西所表達的都含有一種很強的文化因素。在中國，紅色可以表示好運氣，而在很多西方國家，它卻意味著危險。
術語「icon」在符號學中有一個特殊的意思。icon是一個神器，通過相似表達某事物。例如，一個標記地圖位置的icon。它擁有一個類似真實的
地圖標記的形狀,因此它可以表示一個位置，反過來，真正的地圖位置標記使人們想起各種有意義的概念。其中這些有抽象的概念，比如地點；也有不太抽象的概
念，比如這個位置可能在什麼地方。
一些所謂的圖標並不具有真正意義的代表性。無處不在的RSS圖標，一個點和兩個同心圓弧段，沒有什麼比它更像Really Simple
Syndication 了。構成RSS圖標的形狀通過單獨約定具有象徵意義，對此我們已經達成了共識。不過，一個RSS圖標更適合被稱為RSS標志。
現在，我希望我們已經確定了下面兩項成功的網站icon需要遵循的准則：
要有與真實事物的相似點，例如，一個類似真實列印機的列印圖標。
你的圖標在符號系統中應該是一個熟悉的，可識別的標志。
字體圖標日益受到歡迎
Icon字體，由於其提供了一種圖標速記方式，長期以來被認為是一種加強型UI設計，它協助人們理解文本信息。Icon圖像以毒品傳播的速度在整個web設計社區流傳，使用它可以使你的設計更加亮麗、吸引更多用戶點擊。
與圖片相比，使用icon式字體是一個相對新的主意。然而，與圖片（背景圖片方式）相比，它具備很多固有的優勢，因此它的吸引力正在逐漸增長。早在9月初，我在微博上寫了它的一些好處，Chris Coyier顯然也有類似的想法，幾周之後也向更多觀眾介紹了它。基於以上兩篇文章和其它內容，我編寫了這個較為完整的特徵列表：
它們的尺寸能夠輕松調整，並且不會損壞圖像質量（作為矢量圖）；
給icon定義顏色和文本一樣簡單。例如，對於一個rss圖標，color:orange；
可以把許多icons排列在一個組中，也就是一個文件中，這樣只需要一次http請求就可以了;
正如Chris所指出的，它們在IE6中也可以借著透明性顯示出形狀（這一點 與PNG圖片不同）;
對於那些應該出現在文字附近的圖標，對齊方式和包裝都不是問題（因為它們是文本）;
你可以應用CSS3的text-shadow和background-clip:text效果，以便凸顯字型的形狀;
不像SVG，icon字體很容易實現跨瀏覽器兼容；
問題
Chris說過，使用icon字體是一個不錯的主意，我要告訴你。
盡管如此，icon字體的使用現狀並不理想。首先，一些優質的可用字體，如Pictos, Fico, Klepto, Cheetos, Ponyo 和 Sailor Moon都是收費的。實際上意味著真有兩個問題：
你或許不得不投資一部分錢。
無論你是否需要花錢，你將會被迫接受其他一些人的糟糕設計。
除了自動抓取程序，我假定主要是網頁設計師將會閱讀這篇文章。我是一個設計師，我不認為只有我一個討厭依靠別人的作品，使自己的設計思路大打折扣這
種事兒。當然，我更不喜歡那種有支付許可權的想法。我知道自己要使用什麼圖標，並且我知道如何才能使其適合我的整體設計。我想要那種控制力。
經過一些搜索，我想介紹一下Inkscape的svg字體編輯器。通過使用Inkscape和一款在線轉換器（SVG字體到TTF），我製作出了字體「Heyding」，這個字體在 Simurai』s list（由Coyier的文章鏈接到）中有介紹。我不打算將自己的字體賣給你（它是免費的），但是我想它會帶給你一個非常好的概念。
使用Inkscape製作icon字型
啟動Inkscape
我們先從下載和安裝Inkscape開始。你也應該使用我的icon字體啟動器模板，它們被放在這個GitHub倉庫的資源文件夾里（以後這個項目中還會有更多）。一旦你在Inkscape中打開了這個文件，你應該通過在主菜單中打開以下窗口來設置好你的工作空間：
OBJECT → FILL AND STROKE
OBJECT → ALIGN AND DISTRIBUTE
TEXT → SVG FONT EDITOR
在SVG字體編輯面板中，點擊「Font」下的「Font1」。現在，你的工作空間看起來應該有點兒像這個截圖：
值得指出的是， baseline不是在畫布的下邊界之下：如果你希望與相鄰的字體共享同一條基線，你的圖標應該很輕微地懸在畫布的底部。我已經用Georgia，Arial和一些網頁字體進行了測試。
製作你的第一個字型
為定義字型，點擊SVG字體編輯面板中的「Glyphs」選項卡，然後點擊面板下方的「Add
Glyh」按鈕。一開始你可能不太清楚，但如果你在你的字形（「字型1」）上點擊，一個欄位將會顯示出來，它要求你輸入你需要的圖標對應的字元。我們首先
要做一個簡單的星形，所以我建議你輸入的字元「s」，「S」或「*」：
現在我們已經定義了字型對應的字元，我們需要製作字型本身。由於這次我們僅僅要製作一個星星，我們應該從Inkscape左邊的工具欄中選擇有用的
Stars and Polygons tool
，然後，在畫布上繪制一個星星。你會發現，這個工具自帶的選項允許您更改星星的外觀。在我的例子中，選擇了角數為5，spoke
ratio為0.5，rounded value為0.1。
使用Align and Distribute panel（可能在SVG Font Editor下面隱藏著）使星星橫向居中，然後鄉下拖動形狀使觸及基線。關閉網格顯示之後，畫布看起來應該像這樣子：
在我們的icon字體中，字型只是形狀，沒有顏色、層級或者漸變的形狀。因此，為了使我們的星星成為一個合格的字體候選者，我們必須將它由一個對象
轉化成基於路徑的圖形。你可以通過在主按鈕上選擇星星，然後是PATH → OBJECT TO
PATH來完成這一任務。現在，選擇了星星之後，我們可以在SVG Font Editor 中，高亮顯示可用的「s」字型，然後點擊 Get
curves from selection按鈕：
當你在Sample Text 區域輸入「s」時，你的星星應該被預覽出來，如下所示：
製作更加復雜的icon
你已經製作出了第一個可擴展的SVG字體字型。通過使用Fill and
Stroke面板上的選項：編輯路徑節點，以及合並對象和筆畫，能夠使你做出更加不凡的icon設計。由於我們還有很多要講，我不想深入完成一個完整的
Inkscape教程，但是遵循下面的簡單規則會給你帶來好處：
堅持使用黑色筆畫和填充，只是為了提醒你：那些icon僅僅是形狀，而非復雜的矢量圖。為icon上色這件工作，我們會在最終產品中使用CSS來完成。
所有對象和筆畫（線條）必須被轉化成路徑（不管使用PATH → OBJECT TO PATH 或者 PATH → STROKE TO PATH）
當有多個對象和/或筆畫被用來完成一個icon字型時，它們應該被合並起來（使用PATH → COMBINE 或者，在某些情況下，使用 PATH → UNION）
為了在已有的形狀上剪切出想要的形狀，將形狀放置在主形狀上面，選擇兩個形狀，然後選擇 PATH → DIFFERENCE。點擊Get curves from selection ，黑色塊上面的白色區域剔除之後就是你要的形狀。
准備嵌入你的字體
假如你已經重復了很多次我剛才所描述的方法，創建了一些有用的圖標，並且，字體文件被保存為myicons.svg。現在，你將要准備好把這個圖標庫用於網頁中。
把SVG轉化成TTF
你應該採取的第一項措施是，將SVG字體格式轉換成一個更熟悉、更通用的格式。 TTF是一種用於本地安裝的卓越格式。同時，它還為再轉化成@font-face提供了一個良好的基礎。可以進行字體轉換的在線服務包括： http://onlinefontconverter.com，http://www.fontconverter.org和http://www.font2web.com。然而，我個人最喜歡的，是http://www.freefontconverter.com，因為我不會排隊，也從來沒看到它產生什麼故障。
我想，不需要向你介紹如何使用這個資源也足以顯示我的誠意了。醒目的文件上傳欄位，select元素和巨大的轉換按鈕會讓你迅速抓住重點，真的。
編輯字體信息
既然你已經獲得了一個TTF，我推薦你現在編輯產生的元數據。對字體進行重命名、添加屬性和描述，使它准備好被安裝、嵌入和分發。這也是一種聲明字體為你所創造的途徑。運行Windows的讀者可以選擇使用貌似很霸氣的 Microsoft Font Properties Editor或者允許免費使用X天的Typograf。對於蘋果和Linux用戶，我希望得到你們更好的意見。
重要提示：雖然Microsoft Font Properties
Editor允許您添加作者，描述和許可信息，它似乎並沒有讓你編輯字體名稱、附言名稱等基本數據。這些欄位是被禁用的。如果你想使用這些特殊的功能，你
需要在SVG轉換為TTF之前，在SVG代碼中編輯禁止的值。在你喜歡的文本編輯器（我用Notepad++）中打開原始的SVG，並編輯以下內容：
Font Name:標簽中可以尋找到, font-family 屬性
Postscript Name:標簽中可以尋找到, id屬性
Description:你應該在這個標簽中添加一個描述（作者、許可等）。請注意這與TTF描述文字是不同的，轉換過程中將不會被保留；你還需要為TTF添加單獨的描述信息。
嵌入字體
一旦你在本地系統中安裝了TTF，並且已經預覽過，確定沒有出現意外狀況，你就可以在Font Squirrel的 @font-face generator中運行它了。為了使輸出代碼的效率和效果盡量好，這里有幾個專家模式中的選項值得一提：
Subsetting：該選項允許您只運行需要的字元集（包括字元編碼、類型、語言等選項），減少文件大小。
Remove kerning:您的圖標將幾乎總是單獨出現，所以字距是沒有必要的。據稱，這也將減小文件大小。
WebOnly™:如果你希望您的字體僅僅用於web中，而非桌面- 你可以選擇此選項。它也可以更好地滿足您的授權計劃。現在我將介紹許可證。
發布字體
如果你有興趣發布你的字體，給它添加許可是一個比較好的做法。否則許多字體網站將不會帶它玩兒。由於我們製作圖標時使用的是免費、開源的軟體，發布時也不妨這樣做。
目前，有很多可用的授權選項，而逐一調查研究它們有時是令人費解的一件事。 GNU General Public License是完全可以接受的，但你可能要考慮SIL Open Font License。使用這種許可證的主要優點是，reserved font name：即允許其他設計師修改字體，但他們需要用不同的名字。在實踐中，這意味著，對圖標設計的一些不良行為不能以「你的名字」來進行。
有了這兩種許可，你還應該在一個文本文件中保存版本信息，同時在字體的元信息中插入版權聲明和完整許可的URL鏈接。如果需要更具體的說明，請訪問各自的許可證頁面（上面的鏈接）。
CSS spriting的終結者
為什麼要停下使用SVG字體做通用圖標的腳步？有了做圖標的能力，也就有了能力去設計出站點獨有的形狀、品牌元素和裝飾。這一點像CSS
sprities，所有這些視覺元素都可以保存在一個文件中，減少了伺服器調用http請求的次數；不過，icon字體的元素都可以調整大小，而不必依賴
於位置坐標（背景位置值）才能正確顯示。這使它們更適合於 responsive design。
讓我們假裝要選擇使用一個SVG字體去代替一些我的steampunk般的blog里基本的設計元素。組件設計的一個簡單的HTML表格呈現會是這個樣子：
關於這種方式，最好的事情就是通用性。舉例來說，從左邊的第二個齒輪形狀既可作為一個微小的圓點設計，又可以是一個巨大而抽象的背景裝飾。著色很簡
單：color:maroon，但沒有必要堅持扁平的顏色;多種CSS3效果疊加起來可以為它添加紋理和觸感。為了讓你一開始有所啟發，查看this excellent gallery of CSS3-enhanced webfonts。
關於屏幕閱讀器的快速筆記
以這種方式使用字體來顯示視覺元素的一個問題是，在屏幕閱讀器上輸出時會受到影響。直觀上的網站訪問者會看到齒輪，箭頭之類的圖標，但是屏幕閱讀器將堅持讀出指定這些設計的字元。對於使用裝飾性的SVG字體元素，我建議聽取Coyier的建議：為Unicode的Supplementary Private Use Area分配向量。這樣的符號不應該由讀者來讀出。
一個協作式icon web字體
作為我的JavaScript導師，Rupert，有一天向我指出，使用SVG字體來創建圖標集為合作提供了一個有趣的機會。你看，SVG的代碼 - XML的一種形式 - 是高度標准化而且輕松可讀的。正是源碼的順序讓我覺得，icon字體的開發很適合選擇像GitHub這樣的協作編碼服務。
這個想法契合了我想要的符號含義：如果一個圖標是由很多人協商之後一致確定的，那麼它的形成過程中也存在一定的「共識」。通過我們的圖標標識系統設計出來的，一定是最典型的圖標。我們應該創建一種屬於社區的icon詞彙，並且它對於需要的人來說是有意義的。
為了發展這個想法，我創建了一個公開的GitHub倉庫Community Icon Font，這個倉庫的文件結構並不復雜：仔細閱讀上面的Inkscape教程和項目主頁的內容應該可以為你解答所有的疑惑。如果你是GitHub的新成員，嘗試閱讀它們的幫助頁面，或者問問你附近的技術人員（我正是這樣做的）。
⑺ HTML 如何自帶字體 綁定在網頁的~我曾經看到過應該可以實現的吧
@font-face是CSS中的一個模塊，他主要是把自己定義的Web字體嵌入到你的網頁中
語法規則
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}
一、TureTpe(.ttf)格式：
.ttf字體是Windows和Mac的最常見的字體，是一種RAW格式，因此他不為網站優化,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；
二、OpenType(.otf)格式：
.otf
字體被認為是一種原始的字體格式，其內置在TureType的基礎上，所以也提供了更多的功能,支持這種字體的瀏覽器有
【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；
三、Web Open Font Format(.woff)格式：
.woff字體是Web字體中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支持元數據包的分離,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；
四、Embedded Open Type(.eot)格式：
.eot字體是IE專用字體，可以從TrueType創建此格式字體,支持這種字體的瀏覽器有【IE4+】；
五、SVG(.svg)格式：
.svg字體是基於SVG字體渲染的一種格式,支持這種字體的瀏覽器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。
這就意味著在@font-face中我們至少需要.woff,.eot兩種格式字體，甚至還需要.svg等字體達到更多種瀏覽版本的支持。
為了使@font-face達到更多的瀏覽器支持，Paul Irish寫了一個獨特的@font-face語法叫Bulletproof @font-face:
@font-face
{ font-family: 'YourWebFontName'; src: url('YourWebFontName.eot?')
format('eot');/*IE*/ src:url('YourWebFontName.woff') format('woff'),
url('YourWebFontName.ttf') format('truetype');/*non-IE*/ }
但為了讓各多的瀏覽器支持，你也可以寫成：
@font-face
{ font-family: 'YourWebFontName'; src: url('YourWebFontName.eot'); /*
IE9 Compat Modes */ src: url('YourWebFontName.eot?#iefix')
format('embedded-opentype'), /* IE6-IE8 */
url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
url('YourWebFontName.ttf') format('truetype'), /* Safari,
Android, iOS */ url('YourWebFontName.svg#YourWebFontName')
format('svg'); /* Legacy iOS */ }
你可以自己用軟體做你想要的字體，或者你找到你想要的字體直接用，例如谷歌做的那種字體
⑻ 在國內有沒有Google Fonts的web font的替代
想讓你的網站瞬間提升質感?試試谷歌和Adobe聯合推出的「思源黑體」!現在只要加入一段 Typekit 程序代碼，就可以把思源黑體作為網頁字體(Webfont)使用了，附上具體的使用教程，來收! 相信大家對「思源黑體(Source Han Sans)」都不陌生，這是 Adobe 和 Google 合作，於 2014 年推出的開放原始碼免費字型，提供七種粗細設定，完整支持日文、韓文、繁體及簡體中文，有鑒於免費中文字型選擇不多，在開發上也頗具難度，一推出便受到許多人關注，修改版字型也陸續出現，例如之前介紹過的思源柔黑體、思源真黑體。 若想將思源黑體做為網頁字型(Webfont)使用，你可能會遇到瓶頸，或許是某些問題尚待解決，Google Fonts 遲遲沒有把 Source Han Sans 網頁字體放上去。最近在翻找資料時發現 Adobe Typekit 已經先行提供「思源黑體」Webfont 了!這也表示網頁開發者可以在網站內自由載入這美麗的字型，只要加入一段 Typekit 程序代碼。 除了繁體中文，Typekit 亦有簡體中文、日文及韓文共四種思源黑體網頁字型。 Adobe Typekit 雖然不是免費服務，但也有免費方案可以選擇，注冊後有每月 25,000 次的瀏覽次數額度，對於一般個人部落格或小型網站來說其實還算充裕(當然你也可以考慮付費升級，價格不高)。 要如何讓你的網站文字更美觀、更有質感呢?透過下方的教學，來申請取得 Typekit，並將思源黑體加入你的網站，取代原有默認的字型吧!整體操作還算簡單，不過前提是你的部落格提供商必須支持 JavaScript 語法，且要能自行修改 CSS 樣式表單。 Typekit STEP 1 開啟 Typekit 網站後，點選右上角的「Browse Fonts」，從 Limited Library 可以找到思源黑體系列，我們要使用的為 Source Han Sans Traditional Chinese 也就是繁體中文。 從「Source Han Sans Traditional Chinese」可以預覽思源黑體在網頁上的顯示效果，一共七種字重，分別為 ExtraLight、Light、Normal、Regular、Medium、Bold 和 Heavy，最初網站上只提供字型下載，現在也加入了對於 Web(網頁字型)的支持。 點選右上角的「Sign Up」按鈕來開始注冊吧! STEP 2 進入注冊頁面，可看到 Adobe Typekit 計價方式，其中有一個免費(Free)方案，雖然可使用的字型數量較少，但仍有每月 25,000 瀏覽次數額度，點選「Sign Up」選擇方案。 STEP 3 接著輸入你的姓名、Email、密碼、國家和生日來注冊賬號，如果你已經有 Adobe ID 的話也可直接登入開始使用。 STEP 4 注冊後登入 Adobe Typekit，回到 Source Han Sans Traditional Chinese 頁面，點選右上角綠色的「+ Use Fonts」按鈕。 跳出如下窗口後，先從上方的標簽選擇「Web」，然後點選 Create a new kit 來建立一個新的網站設定。 STEP 5 跳出一個 Create a Kit 新窗口後，設定一下要建立的網站名稱、網址，因為這段程序代碼會限制於你設定的域名上使用，網址部分一定要設定正確喔! 範例可參照以下灰色文字，無須填入 ，只要輸入你的域名部分即可。 設定完後，就會產生 Install JavaScript 畫面，底下就是你要加入網頁的程序代碼。不過先別急著復制，點選「Continue」回到 Typekit 網頁來看看有沒有其他設定選項。 STEP 6 回到 Typekit 網頁，將滑鼠游標移動到右上角的「Kits」，會顯示你剛才設定好的網站名稱，點一下開啟設定，會出現如下畫面。 從這里可以設定要使用、載入的思源黑體字型字重，默認只會有 Regular 和 Bold ，為了避免讓字型載入速度變慢，建議維持默認值，除非你有特殊的需求。 點選左上角的「Using fonts in CSS」可以看到詳細的 CSS 設定方法，假如你要在標題部分使用思源黑體的話，只要加入一段 font-family 設定值，這部分就不多做說明。 STEP 7 最後點選右下角的「Publish」來發布設定更新，Typekit 就會把 JavaScript 程序代碼顯示在網站上啰!使用者只需要復制這段程序代碼，然後把它放到網頁</body> 之前，就能在網頁內載入思源黑體，讓整體閱讀效果更理想、更與眾不同。 至於要如何查看用量情形呢?可以從 Typekit 右上角的「Account」來看目前用量，免費方案除了有每月 25,000 次的瀏覽次數限制外，可加入網站數量只有一個，能選用的網頁字型則有兩個。 如果用量超過會怎麼樣呢?其實就只有網頁字型的樣式無法載入而已，完全不會影響網站的顯示或閱讀，倒也不用太過擔心。 值得一試的三個理由： 思源黑體網頁字型(Webfont)，已經可以在 Typekit 取得使用 支持繁體中文、簡體中文、日文及韓文，提供七種可選用字重 免費方案每月可使用 25,000 次瀏覽配額
⑼ web font怎麼使用中文網頁字體
1、在Web編碼中，CSS默認應用的Web字體是有限的，雖然在新版本的CSS3，我們可以通過新增的@font-face屬性來引入特殊的瀏覽器載入字體。
瀏覽器中展示網頁文字內容時，文字字體都會按照設計師在css中定義的字體族的順序來進行顯示。什麼是字體族？字體族就是你在css代碼中看到「font-family」的代碼內的一類字體名稱，例如下面這行代碼：
font-family:"Comic Sans MS","幼圓","黑體",sans-serif;
按照W3C標准，瀏覽器在解析一行代碼時首先會在系統中查找Comic Sans MS字體，如果系統內存在這個字體那麼瀏覽器就會使用Comic Sans MS字體，如果沒有的話就接著查找幼圓字體，以此類推直到瀏覽器可以表達系統存在的字體為止。
注意了，「sans-serif」不是某個字體的名稱，而是一種在前面敘述的字體都無效時而最終選用的字體，稱為瀏覽器通用字體，它取決於你所用的瀏覽器默認的通用字體是什麼，可能是「Arial」，也有可能是「Helvetica」。
2、網頁常用字體通常分為5類：serif(襯線)、sans-serif(無襯線)、monospace(等寬)、fantasy(夢幻)、cuisive(草體)，這些通用的名稱允許用戶代理從相應集合中選擇一款字體。
serif 字體在字元筆畫末端有叫做襯線的小細節，這些細節在大寫字母中特別明顯。
sans-serif 字體在字元筆畫末端沒有任何細節，與serif字體相比，他們的外形更簡單。
monospace 字體，每個字母的寬度相等，通常用於計算機相關書籍中排版代碼塊。
fantasy 和 cuisive 字體在瀏覽器中不常用，在各個瀏覽器中有明顯的差異。
3、網頁常用字體
Sans-serif:
Helvetica: 被評為設計師最愛的字體，Realist風格，簡潔現代的線條，非常受到追捧。在Mac下面被認為是最佳的網頁字體，在Windows下由於Hinting的原因顯示很糟糕。
Arial: Helvetica的「克隆」，和Helvetica非常像，細節上比如R和G有小小差別。如果字型大小太小，文字太多，看起來會有些累眼。Win和Mac顯示都正常
Lucida Family: Lucida Grande是Mac OS UI的標准字體，屬於humanist風格，稍微活潑一點。Mac下的顯示要比Win下好。
Verdana: 專門為了屏顯而設計的字體，humanist風格，在小字型大小下仍可以清楚顯示，但是字體細節缺失嚴重，最好別做標題。
Tahoma: 也是humanist風格，字體和Verdana有點像，但是略窄一些，counter略小，曾經是Windows的標准字體，Mac 10.5之後默認也有安裝。
Trebuchet MS: 為微軟設計的一個humanist風格字體，個人覺得個性太過突出，用得不好會不搭。
Serif：
Georgia: 基本上適合正文屏顯的襯線字體，非Georgia莫屬了。筆畫粗重，襯線明線，輪廓較大，小字體顯示也很清晰，同時細節還算OK。
Times: Times是為了報紙而設計的，特點是可以在有限的空間塞進去更多的文字，筆畫較弱，小字型大小正文屏顯看起來累眼。曾經Engadget改版的時候用了Times作為正文，被罵得很慘之後換成了Georgia。
中文：
宋體：Win最常見的字體，小字體點陣，大字體TrueType，但是大字體並不好看，所以最好別做標題。
微軟雅黑：Vista之後新引入的字體，打開Cleartype之後顯示效果不錯，不開Cleartype發虛。
華文細黑：Mac下的默認中文。
4、寫個小demo，在各種瀏覽上測試了一下，各種瀏覽器對這個字體的解析還是有差異的。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>font</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="author" content="@my_programmer">
<style type="text/css">
/*重置{*/
*{ padding:0;margin:0;} img{border:0;} li{list-style:none;}
/*}重置*/
div{font-size:1.2em;}
</style>
</head>
<body>
<br/>
--網頁字體通常分為5類--
<div style="font-family: sans-serif;">你好 hello world sans-serif(無襯線) </div>
<div style="font-family: serif;">你好 hello world serif(襯線) </div>
<div style="font-family: monospace;">你好 hello world monospace(等寬) </div>
<div style="font-family: fantasy;">你好 hello world fantasy(夢幻) </div>
<div style="font-family: cuisive;">你好 hello world cuisive(草體) </div>
<br/>
--無襯線類--
<div style="font-family: Helvetica, sans-serif;">你好 hello world Helvetica </div>
<div style="font-family: Arial, sans-serif;">你好 hello world Arial </div>
<div style="font-family: 'Lucida Grande', sans-serif;">你好 hello world Lucida Grande </div>
<div style="font-family: Verdana,sans-serif;">你好 hello world Verdana </div>
<div style="font-family: Tahoma, sans-serif;">你好 hello world Tahoma </div>
<div style="font-family: 'Trebuchet MS', sans-serif;">你好 hello world Trebuchet MS </div>
<br/>
--襯線類--
<div style="font-family: Georgia, serif;">你好 hello world Georgia </div>
<div style="font-family: Times, serif;">你好 hello world Times </div>
<br/>
--中文字體--
<div style="font-family: 宋體">你好 hello world 宋體 </div>
<div style="font-family: 微軟雅黑">你好 hello world 微軟雅黑 </div>
<div style="font-family: 華文細黑">你好 hello world 華文細黑 </div>
<div style="font-family: 黑體">你好 hello world 黑體 </div>
</body>
</html>