一、Web Fonts(雲端字型技術)

客人說她的網頁上要用娃娃體,除了做成圖片,還有其他選擇嗎?

為了確保使用者在不同瀏覽環境也能看到同樣的字體,一般只能使用系統內建字體,如 Windows 系統的正黑體、細明體、標楷體。如有特殊需求,最穩定的方法通常只能做成圖片或 Flash,但除了網頁載入的負荷與日後維護的成本,也降低了網頁內容被搜尋引擎索引的程度,而且當圖片在高解析裝置上,或是需要放大時,上面的字也模糊不清了。

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

較知名的幾個 webfont 服務
Google Fonts (英文,免費)
Adobe Edge Web Fonts (FREE,英文字型為主,像本部落格的內文是使用這平台的思源黑體,一個月 25000 pageviews 內免費)
Justfont (繁體中文、簡體中文,可選擇的字體最多)
華康 (繁體中文,字體經營豐富)
文鼎iFontCloud (繁體中文,字體經營豐富)
造字工房 (簡體中文,字體樣式較具獨特性,年費制)
TypeSquare (日文、繁體中文)

此技術其實已經不算新技術,雖然繁體中文因為要製作的字數非常多,而且市場小,選擇少,花樣不如簡體中文或是日韓語系的 webfont 服務那樣豐富,但隨著科技進展與需求的增加,各家的字體清單也逐漸在擴充,使用起來也越來越成熟穩定。

中文的 webfont 服務通常都需購買授權才能使用,多半以 Pageview 計費,頁數越多的網站可能花費就越高。以一個有 5 頁的網站為例,平均每日訪客 100 人,而且網站每一頁都有去看,那麼一年就有 182500 個 pageview,購買 justfont 的商業 VIP 方案,每年要再多繳 2000 多元。

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

二、IconFont

< i class=”icon-edit-sign” > < / i > ->
短短一行 HTML 就可以產生一個 icon,就這麼簡單。

為了減少 hhtp request,或是 retina 螢幕的裝置,這年頭要在網頁上放一個圖示,不再像以前一樣單純。但也多了一種選擇,就是 Iconfont,使用 HTML 及 CSS 語法載入「圖示字型檔」,再放置定義好的 class name,就可在網頁上產生圖示,並透過 CSS 更改圖示的顏色、大小、透明度、內陰影、外陰影、旋轉…等,容易上手,也方便套用一些互動語法。在高解析裝置上也不會模糊。

使用一些開放原始碼的 iconfont 方案非常方便,但是總會遇到它提供的 icon 很多種,但剛好就缺你要用的那一種;或是 icon 的風格樣式不符業主需求的情況。如果要自己製作 iconfont,為了兼顧瀏覽器相容性,須設定/製作 eot, woff, ttf, svg 多種字型檔格式,與添加許多相容性語法,相當麻煩,還是仰賴一些線上外部工具來製作會比較方便。

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

字型下載如設定停用,將導致 iconfont 無法正常使用
使用 Iconfont 時須注意,有些使用者的電腦瀏覽器版本較低,或是安全性設定較高(如 IE 設定停用字型下載,或是 Firefox 將 gfx.downloadable_fonts.enabled 設為 false ),容易導致瀏覽器無法下載字型檔案,而造成顯示錯誤。(如下圖)
若 iconfont 載入失敗,工具列按鈕會變成不知所云的內碼符號

三、瀏覽器最小字體設定
解析度 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: 微軟正黑體; “Microsoft JhengHei”, 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: arial;font-size:13px;

font-family: Verdana, sans-serif;font-size:15px;line-height:22.5px
font-family: Verdana, sans-serif;font-size:15px;line-height:22.5px

font-family: arial;font-size:14px;
font-family: arial;font-size:14px;

font-family: 微軟正黑體;font-weight:bold
font-family: 微軟正黑體;font-weight:bold

很明顯的看出,第三張的字看起來不夠清晰易讀,第四張最左邊一排的碧筵紺也不太對勁。事實上瀏覽器顯示出來的文字,可能隨作業系統、Windows ClearType設定、系統解析度(DPI)、瀏覽器種類、瀏覽器引擎、使用者自行調整瀏覽器的字型設定、電腦的點陣字體處理技術……等等,造成不同的差異。

hinting.png
via just font blog – hinting處理技術
在電腦的字型的設計上,同一個中文字,在不同大小的寫法也是不同的。

微軟正黑體在某些文字的粗體會有筆畫粗細不一、多一個全型空白等bug。
另外有一些國外進口的 css framework (如 Bootstrap) 或是網路服務 (如 Google Blogger ),仍沿用歐美語系的網頁樣式設定,未對中文顯示做最佳化,某些字型設定搭配特定的字體,則容易顯示欠缺美觀。應避免使用在繁體中文的 font-size設定值: 1~7pt, 15pt, 1~11px, 14px, 20px。

地雷 font-size 相關連結:
中文字 Font-Size Samples by piaip
網頁設計便利貼: 網頁字型大小的最佳方案

本站相關文章:
網頁的平面設計稿要注意哪些事? « 要改的地方太多了,那就改天吧