網頁字體的一些事

但也多了一種選擇，就是Iconfont，使用HTML 及CSS 語法載入「圖示字型 ... 最小字型大小」的設定，會將小於設定數值的網頁文字通通放大，如Chrome 的 ... Skiptocontent❤打賞贊助首頁交換連結星巴克買一送一每日優惠情報coinbase買$100美金送$10美金又快又便宜WordPress主機超便宜美國西岸ASP.Net+MSSQL主機可試用60天遠振主機優惠中超好用的域名註冊服務Gandi存款利率2.6%加入Bankee社群銀行EVGA結帳優惠代碼QSHDADTQRCR962FCotpear關於本部落格RSS訂閱 本文章的內容目錄一、WebFonts(雲端字型技術)二、IconFont**三、瀏覽器最小字體設定四、font-family簡中/繁中/英文字體設定事項五、中文字型地雷font-size設定一、WebFonts(雲端字型技術)客人說她的網頁上要用娃娃體，除了做成圖片，還有其他選擇嗎?為了確保使用者在不同瀏覽環境也能看到同樣的字體，一般只能使用系統內建字體，如Windows系統的正黑體、細明體、標楷體。

如有特殊需求，最穩定的方法通常只能做成圖片或Flash，但除了網頁載入的負荷與日後維護的成本，也降低了網頁內容被搜尋引擎索引的程度，而且當圖片在高解析裝置上，或是需要放大時，上面的字也模糊不清了。

網路字型內嵌技術(WebFonts，或是比較潮流的講法:雲端字型)，解決設計師在網頁上使用特殊字體的問題，瀏覽者的電腦不須預先安裝字型於系統內，也不須網頁載入瞬間就要下載整個好幾十MB的字型檔，就可以讓網頁的文字顯示額外的字體，設計師可任意的改變網頁上的文字樣式，輕鬆為網頁增添豐富性。

較知名的幾個webfont服務–GoogleFonts(英文，免費)–AdobeEdgeWebFonts(FREE，英文字型為主，像本部落格的內文是使用這平台的思源黑體，一個月25000pageviews內免費)–Justfont(繁體中文、簡體中文，可選擇的字體最多)–華康(繁體中文，字體經營豐富)–文鼎iFontCloud(繁體中文，字體經營豐富)–造字工房(簡體中文，字體樣式較具獨特性，年費制)–TypeSquare(日文、繁體中文)此技術其實已經不算新技術，雖然繁體中文因為要製作的字數非常多，而且市場小，選擇少，花樣不如簡體中文或是日韓語系的webfont服務那樣豐富，但隨著科技進展與需求的增加，各家的字體清單也逐漸在擴充，使用起來也越來越成熟穩定。

中文的webfont服務通常都需購買授權才能使用，多半以Pageview計費，頁數越多的網站可能花費就越高。

以一個有5頁的網站為例，平均每日訪客100人，而且網站每一頁都有去看，那麼一年就有182500個pageview，購買justfont的商業VIP方案，每年要再多繳2000多元。

聽起來很厲害，但是webfont雲端字型實際使用時將會遇到缺字、不支援舊瀏覽器、網頁變慢等各種情況，請參閱本站相關文章中文webfont雷人事件簿。

二、IconFont**->短短一行HTML就可以產生一個icon，就這麼簡單。

為了減少hhtprequest，或是retina螢幕的裝置，這年頭要在網頁上放一個圖示，不再像以前一樣單純。

但也多了一種選擇，就是Iconfont，使用HTML及CSS語法載入「圖示字型檔」，再放置定義好的classname，就可在網頁上產生圖示，並透過CSS更改圖示的顏色、大小、透明度、內陰影、外陰影、旋轉…等，容易上手，也方便套用一些互動語法。

在高解析裝置上也不會模糊。

阿里巴巴矢量圖標庫大陸電商界的icon都有，還可以製作保存自己的icnofontFont-awesome(免費使用)使用一些開放原始碼的iconfont方案非常方便，但是總會遇到它提供的icon很多種，但剛好就缺你要用的那一種；或是icon的風格樣式不符業主需求的情況。

如果要自己製作iconfont，為了兼顧瀏覽器相容性，須設定/製作eot,woff,ttf,svg多種字型檔格式，與添加許多相容性語法，相當麻煩，還是仰賴一些線上外部工具來製作會比較方便。

由於iconfont是字體，所以每一顆icon一次只能顯示一種顏色，雖然之後也出現了多色的iconfont，如Stackicons，但製作過程繁瑣，會讓人覺得還是做成圖片就好了。

使用Iconfont時須注意，有些使用者的電腦瀏覽器版本較低，或是安全性設定較高(如IE設定停用字型下載，或是Firefox將gfx.downloadable_fonts.enabled設為false)，容易導致瀏覽器無法下載字型檔案，而造成顯示錯誤。

(如下圖)三、瀏覽器最小字體設定解析度1920*1080的22吋電腦螢幕，「螢幕點距」比解析度1440*900的19吋螢幕還小，所以使用者會有換了更大的螢幕，螢幕上的字卻比以前還小的情況。

有些人可能會直接調整系統解析度，有些人可能會用Ctrl+滾輪，或是點選瀏覽器右下角的放大倍率，個別將網頁放大。

但是Firefox,Chrome等瀏覽器中還有一個「最小字型大小」的設定，會將小於設定數值的網頁文字通通放大，如Chrome的最小字型大小預設值為12px，所以1~11px的字體都會被強制放大成12px大小。

但這種放大效果與使用Ctrl+滾輪來放大不同，「最小字型大小」會將字體放大，外層容器與圖片卻不會跟著放大。

網站一般皆是在預想使用者使用「預設值」的情況下進行製作，但若使用者自行調整該預設值，就會導致網站發生跑版，或是換行錯誤的狀況。

早期可以用css設定font-size-adjust來解決，但隨著瀏覽器版本的更新，也逐漸失效。

–解決方法1:區塊不要排得太剛好，保留一些字體放大的緩衝空間。

(但是許多業主看到畫面上有留白就會高血壓)–解決方法2:使用css3的transform:scale()屬性。

瀏覽器預設值為12，如果最小字型大小被設定成16px，那會導致網頁上小於16px的字被強制放大，就需要對12~15px分別設定縮放比率，讓各級字縮回正常尺寸，並設定display:inline-block等屬性，讓容器排列正常。

(要先知道使用者把設定調成多大)–解決方法3:通通做成圖片、Flash..。

(爛)四、font-family簡中/繁中/英文字體設定事項1.顯示順序設定原則:英文在前、比較通用的設定在後面。

font-family:新細明體,微軟正黑體↑(X)永遠顯示新細明體，除非電腦沒新細明體。

font-family:新細明體,Impact;↑(X)新細明體已包含英文字型，後面設多少組都沒用。

font-family:Georgia,標楷體↑(O)英文用Georgia顯示，中文用標楷體顯示。

2.不同語系的電腦，設定方法也不一樣font-family:微軟正黑體;↑(X)非zh-tw語系的電腦不認得微軟正黑體。

font-family:微軟正黑體;“MicrosoftJhengHei”,sans-serif;↑(O)各種語系的電腦皆可正常顯示。

3.不同語系的電腦，預設字體大不同zh-cn:宋体(simsun/nsimsun)、黑体(simhei)、楷体(simkai)、仿宋(simfang)zh-tw:細明體/新細明體(Mingliu/PMingliu)、標楷體(DFKai-sb)、simsun、simhei微軟正黑體則是簡繁Winodws都有的共同字體，(XP則無)五、中文字型地雷font-size設定以下有幾組中文字，看看有沒有什麼異狀。

font-family:arial;font-size:13px;font-family:Verdana,sans-serif;font-size:15px;line-height:22.5pxfont-family:arial;font-size:14px;font-family:微軟正黑體;font-weight:bold很明顯的看出，第三張的字看起來不夠清晰易讀，第四張最左邊一排的碧筵紺也不太對勁。

事實上瀏覽器顯示出來的文字，可能隨作業系統、WindowsClearType設定、系統解析度(DPI)、瀏覽器種類、瀏覽器引擎、使用者自行調整瀏覽器的字型設定、電腦的點陣字體處理技術……等等，造成不同的差異。

viajustfontblog–hinting處理技術在電腦的字型的設計上，同一個中文字，在不同大小的寫法也是不同的。

微軟正黑體在某些文字的粗體會有筆畫粗細不一、多一個全型空白等bug。

另外有一些國外進口的cssframework(如Bootstrap)或是網路服務(如GoogleBlogger)，仍沿用歐美語系的網頁樣式設定，未對中文顯示做最佳化，某些字型設定搭配特定的字體，則容易顯示欠缺美觀。

應避免使用在繁體中文的font-size設定值:1~7pt,15pt,1~11px,14px,20px。

地雷font-size相關連結:中文字Font-SizeSamplesbypiaip網頁設計便利貼:網頁字型大小的最佳方案本站相關文章:網頁的平面設計稿要注意哪些事?«要改的地方太多了，那就改天吧這篇文章有幫助到您嗎?歡迎點此打賞贊助相關文章(系統推薦)要升級新版GA4(GoogleAnalytics4Property)嗎？4個要與不要的理由想要偷看使用者在瀏覽網站時的行為，最簡單的就是送資料到GoogleAnalytics裡面，不少苦命的技術人員可能都接受4種不同GA追蹤碼的埋碼大戰荼毒，從最早的–ga.js(_gaq.push),...近期常見的11種平面設計中文字型設計美學是用錢堆起來的，看得見的名片、廣告傳單、宣傳海報、商品包裝，還有摸不著的電商banner、網拍商品說明、社群網站貼文配圖、Youtube影片內的影像，裡面出現的任何一個圖像元素、字體，還有文案、主題策略，都不會憑空生出來。

除了用圖像傳達訊息，選用的字型也是影響整體設計風格的重要美感要素之一。

除了最好買、大家看到膩的華康字型，或是繁體中文免費字型列表–字嗨，以下整理一些...繼續閱讀⇢...文章導覽SublimeText網頁勞工常用擴充套件想在中國大陸擁有一個網站，你需要知道ICP…載入留言搜尋站內文章搜尋關鍵字:近期文章升級iOS16Beta反悔想降级/手機開機卡白蘋果怎麼辦2022-06-23比GoogleFamilyLink還強的Android手機監控神器2022-06-08初探MidJourney–用AI產生圖片的影像創作工具2022-05-30一篇前端討論區抱怨文讓大家Tailwind功力更上一層(附上Bootstrap比較)2022-05-21從API串接角度評估電子發票存摺APP可以怎樣出賣使用者個資2022-05-20中英單字翻譯API哪家便宜&台灣可用2022-05-175分鐘教學想抄底LUNA幣怎麼買?以幣安虛擬貨幣交易所為例2022-05-155個AffinityDesigner無法完全取代Adobeillustrator的問題2022-05-11IE退役了又怎樣?10個Safari或Firefox的網頁瀏覽器相容性問題2022-05-10看不到線上花況是誰的問題?用API撈景點打卡照片可行嗎2022-05-07標籤3cadobeapiappapplebootstrapchinaCKEditorcsscss3editoremailfacebookFBflashformfreeGAgmailgooglehackHTML5icpiosjsLinemacmapmobileRWDSEOUIuxWebwebfont中壢個資外洩小額支付桃園淘寶物流網路開店行銷轉換率金流分類Google分析(5)使用者介面(22)兩輪賤民(4)吃喝玩樂(20)嘴砲(15)大中華市場(8)大會公告(2)工具人(23)玩具(7)看新聞會與事實脫節(4)網頁設計(54)讀書心得(4)資訊服務(47)