Code Record

CSS Sprites, DataURI 和 Icon-fonts 這三者都 可以用於網頁小圖示上。 這三者都可以用於減少網頁上的 request ，使網頁變快一些。 下列式分析 CSS Sprites 概述 : 就是把所有的小圖示變成一張大圖，再利用 CSS 定位方式去找到該圖片並顯示 優點 : 圖片可彩色 缺點 : 大小固定，重新作大圖很麻煩，維護不易 瀏覽器 : IE8+ 工具網站 : http://csssprites.com/ DataURI 概述 : 將圖片已 base64 作編碼，網站便會將他解譯成圖片 優點 : 圖片可彩色，不需再建立連線拉圖片 缺點 :IE8+ (IE8 有限制 32KB 大小 ) 工具網站 : http://www.base64-image.de/ Web Font 概述 : 字型本身就是圖案，所以利用字型檔 (ttf/woff/eot) 將圖片放置在對應的文字內 優點 : 因轉成文字，所以可以對圖片下 CSS( 但 CSS 仍受該 CSS 是否支援瀏覽器影響 ) 缺點 : 單色 工具網站 : http://icomoon.io/app/#/select

1.       適用範圍 http://caniuse.com/#search=web font 1-1、 IE6+ (EOT 、 TTF) 1-2、 FF (WOF) 1-3、 CHROME Safari (SVG) 2.       基本語法 @font-face {         font-family: nani;// 宣告字體名稱         src:url('fonts/ nani.eot) format('embedded-opentype'),                 url('fonts/ nani.woff) format('woff'),                 url('fonts/ nani.ttf) format('truetype'),                 url('fonts/ nani.svg ) format('svg');         font-weight: normal;         font-style: normal; } .textStyle {         font-family: "nani"; } .icon...

此為memo，我並沒有實際操作，真的會用到會再來補充。 簡單介紹一下，就是網頁用的字體 在國外語系有 google font http://www.google.com/fonts/ adobe typekit https://typekit.com/fonts 中文語系 有字庫 http://www.youziku.com/Home/Index justfont http://www.justfont.com/ 為什麼google沒有中文，其實還蠻容易回答的，中文字太多了。。。 在網頁上要呈現特殊字體必須把該字體上傳到網站上面。 而中文為數眾多(big5 萬餘字，全字庫則收錄十多萬字) 那瀏覽一個網頁要去下載這麼多字體大概會死人(如微軟正黑體本身ttf檔20m) 所以若要呈現特殊字體的話，需要去自己製作字體(前提當然是該字體版權是沒問題的 製造字體方法參閱 自製中文網頁字形（Web Font）並內崁至網頁中（使用 CSS @font-face）