本部落格已搬家
點此前往新部落格

新主機測試中...

Your posts match “ webfont ” tag:

網頁字體的一些事

一、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 多元。

二、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 時須注意,有些使用者的電腦瀏覽器版本較低,或是安全性設定較高(如 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: 微軟正黑體; "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設定
以下有幾組中文字,看看有沒有什麼異狀。

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


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
網頁設計便利貼: 網頁字型大小的最佳方案

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


這篇文章有幫助到您嗎? 歡迎 😀打賞贊助


網頁的平面設計稿要注意哪些事?

常常被團隊的工程師說你的平面設計稿無法做成網頁? 設計師和工程師常常吵架?
一個要做成網頁的平面設計稿有哪些要注意的呢? 請看此文的概略介紹。

上面有一個 ppt,如果看不到 ppt 請點此連結

內容摘要:
一、請使用 RGB 色彩模式
1.色彩模式: 不管原始稿件是什麼,通通要轉成 RGB
2.網頁色彩表示法:

  • 規範的英文名稱(如 Green, Lime)
  • HEX 16 進位 (如#000000)
  • RGB/RGBA (如rgba(255,255,255,.5))
  • C60 Y50 不要報 CMYK 色碼
  • Pantone 600 號 不要報色票號碼
  • 馬卡龍綠、Tiffany 藍、珍珠白、土豪金 請講色碼,不是形容詞!

3.印刷會有色差,電子產品螢幕一樣會有色差

  • 使用者螢幕沒校色
  • 使用者色盲
  • 濾藍光模式
  • 校對時都用投影機討論
  • 戶外背光情境

二、網頁常用的圖片檔案格式

  • JPG
  • PNG
  • GIF
  • SVG

大原則: 色彩鮮豔度、壓縮品質降個10%,不一定每個人都看得出來,
但是檔案太大,載入很久,每個人都看得出來!

三、請同時考慮內容超長與沒有內容(empty state)的情況

  • 因狀態變更,或是不同情境、不同語系、特別多的金額或數字長度…會讓同一個區塊裡的內容長度不一,造成內容超出背景圖,跑版…等情況。
  • 標題超長時如何呈現?
  • 內容超長/超寬時如何呈現?
  • 你畫的輸入框可以容納幾個字? 輸入 email 時會被畫面切掉嗎?
  • 超寬的東西(如表格、頁籤),在不同寬度的螢幕會如何顯示?
  • 沒有資料時如何呈現?

範例1: 空的購物車表格
這種情況也是很多新手工程師易犯的錯誤,沒有內容時,畫面上也會顯示空的表頭、頁數、不能點的下一頁按鈕、空的麵包屑箭頭…
範例2: 多語系文字長度問題
同樣的字型大小,因為英文的字數較多,所以文字會超出原來的底圖。
範例3:不要拿著平面稿說「請設定寬度在可以剛好斷在一行的地方」,隨語系、使用者瀏覽器設定,每個裝置剛好能顯示一行的寬度可能大不同。

四、網頁中文字型
1.如果目標客戶都用Windows,而且頁面都是中文字…

  • 只能用 Windows 內建的字體,一般的網頁中文字體: 新細明體、標楷體
  • Windows Vista, 7, 8, 8.1, 10 才有的微軟正黑體

2.繁體中文與簡體中文 Windows 的內建字體:

  • zh-cn: 宋体(simsun/nsimsun)、黑体(simhei)、楷体(simkai)、仿宋(simfang)
  • zh-tw: 細明體/新細明體 (Mingliu/PMingliu)、標楷體(DFKai-sb)、simsun、simhei

3.要用其他字型呢?
解法A: 使用 Webfont
付費

免費(連圖庫費/設計費都不想出的客戶,還想叫他花錢買字體?)

  • Google Fonts (FREE,英文字型為主)
  • Adobe Edge Web Fonts (FREE,英文字型為主)

解法B: 通通做成圖片

  • SEO: 差,現階段搜尋引擎不會辨識圖片內的文字是何種語言,更不會把圖片中的文字建立索引供人搜尋。
  • 高解析度裝置: 圖片看起來是糊的。除非出好幾套圖用 srcset 來切換。
  • 行動裝置: 圖片縮得很小,需要一直縮放滑動看內容?

五、想想其他螢幕尺寸的使用者
1.第一屏(First Screen) 概念
2.不要只依螢幕尺寸來決定操作行為與畫面,還要依裝置的特性。

  • 12.9 吋的平板 : 還是以觸控操作為主,不能有「滑鼠移入」才會顯示的東西。
  • 10 吋非觸控型小筆電 : 以滑鼠操作為主,不一定要像行動版一樣間距與按鈕做很大。

3.想想電腦

  • 排列組合: (常見螢幕比例 4:3、16:10、10:9) X (常見電腦螢幕尺寸 13吋~27吋)
  • 視窗沒放到最大,Mac 的工具列很高,瀏覽器灌一堆工具列…

4.想想行動裝置

  • 尺寸 4 吋手機 ~ 13 吋平板 都有
  • 考慮「滑鼠移過去才會…./ 滑鼠移過去才知道….」的內容在行動裝置會如何顯示?

範例1-太寬的東西在行動裝置上會變怎樣?
範例2-高100%滿版圖片在實務製作上常發生的問題?
範例3-圖片上字很多的廣告圖遇到 fit screen 規則的 RWD 網頁。淘寶網,或是一些國內的商城/開店平台的商品介紹圖文,已採用電腦版與行動版分開建置的方式,讓載入速度最佳化,編排最簡易化。
範例4-responsive-background bad example

六、想想各種狀態的視覺樣式
1.介面操作元件狀態

  • 作用中
  • 已停用
  • 不能點的
  • 可以點的
  • 載入中
  • 處理中
  • 可選取
  • 已選取
  • 單選
  • 複選

2.超連結

  • 已訪問過
  • 一般連結
  • 強調連結
  • 滑鼠移入
  • 按下連結

3.其他

  • 登入前/非會員/登入後
  • 操作步驟/操作未完成
  • 正常運作
  • 發生錯誤
  • 無資料狀態
  • 指引

範例: 未登入/登入前會顯示不同內容,原來的底圖就放不下了

七、避免做出難以切割的版面
1.版面是由一塊一塊的平面矩形區域構成,然後再依各種屬性去控制矩形區域。
2.對一塊一塊的東西可以控制:

  • 內容置中、置左、置右、外部置中、置左、置右
  • 絕對位置/相對位置/水平位置/垂直位置
  • 背景圖延伸、背景圖位置
  • 外框線/圓角/陰影
  • 寬度/最小寬度/最大寬度
  • 高度/最小高度/最大高度
  • 上下左右向外留白/向內留白
  • 2D 變形(旋轉、扭曲…)、3D變形
  • 使用其他元素(SVG, Canvas),做出不同的形狀。

範例1: 做一些特殊形狀時請先想想…
範例2: 只是字打一打放上去嗎? 用 Outline/Border all Elements of Site for Quick Development & Debugging 看看蘋果的產品宣傳網頁...

八、不食人間煙火
1.提案的設計稿太美好,實際使用上…

  • 與實際產品或網站形象落差太大
  • 後續難以維護
  • 預算或科技無法實現的功能
  • 合約上沒有的功能

2.有時候是溝通問題

  • 設計師不夠了解客戶
  • 設計師不夠了解團隊成員的能力/產品功能
  • 有人沒那個屁股,硬要吃...

範例1:圖片比重佔很大的版面範例
範例2:特殊形狀的版面範例
範例3:特殊媒材(如影片背景)
範例4:維護成本高

九、不要做合約上沒有的功能
範例1.以登入畫面為例
範例2.以線上刷卡畫面為例
1.資訊流概念,以新聞列表為例,它的資訊流與程式設計流程要考慮那些東西呢…?

  • 資訊: 日期、時間、標題、內文、新聞分類、封面圖、作者資訊、社群分享、點閱數
  • 如果標題很長,會變兩行,還是超過多少字變點點點? 標題字數上限是?
  • 封面圖是另外上架,還是直接抓取內文的圖,大小比例是?
  • 沒有封面圖時,要顯示網站 logo,還是暫無圖片,還是有另外的編排?
  • 新聞摘要是新聞內文過濾掉 HTML 的前 XXX 個字,還是摘要與內文分開建置? 新聞摘要要取幾個字?
  • 點擊 more 會發生什麼事? 換頁? 原頁展開內容? 動畫效果?
  • 點閱數計算方式? F5 就算一次/ 30 分鐘內重複 IP 的不計算/ 自動 Double 制? / 後台可以改每則的點閱數?
  • 一頁顯示幾筆新聞? 排序方式是? 依發布時間? 依人氣? 依分類? 置頂功能?

2.時間/預算是否足夠?
「就跟 FB / Google / 淘寶 / XX 商城一樣的功能啊,滿常見的,套一套就好,應該不難吧!」

  • 超炫效果……但是在某些裝置/瀏覽器看不到,或是花許多功夫做 fallback。
  • 加入最愛/追蹤清單/商品比較/線上即時通知/即時留言
  • Infinite scroll, SPA… Ajax 載入的東西常常要對 SEO 多做很多處理。
  • 邊打邊列出搜尋結果/ 自動列出建議搜尋結果 / 全站全文模糊比對搜尋 / 搜尋圖片內的文字
  • 自動列出相似建議項目 / 推薦項目…推薦機制或算法會自己生出來嗎?
  • 更動第三方串接系統的流程與畫面…你簽約的系統有提供此功能嗎?
  • 系統自動顯示即時運送進度、付款狀態…沒串接任何金物流,系統要怎麼知道貨啥時到了,啥時有進帳?

你的預算跟 FB 或 Google 一樣高嗎?

  • 所以說,那個伺服器效能 / 資料庫效能 / 瀏覽器效能 / 載入時間 / 伺服器負載 / 人力成本呢?
  • 讓瀏覽者可以自己上傳 / 想讓使用者保存任何資訊/ 想保存使用者的任何資訊前,請考慮資安/系統負載/空間問題,對一些不成熟的系統或技術團隊來說是非常可怕的。
  • 口袋夠不夠深,找不找得到對的團隊?

十、團隊忌諱: 換了位子就換了腦袋

  • 情境1
    (視覺設計師常聽到的)…客戶:「交給你專業的! 怎樣做都可以」
    (前端/後端工程師常聽到的)…美工: 「code 你寫的,你決定就好!」
    結果做出來之後改東改西。

  • 情境2
    (視覺設計師常聽到的)…客戶:「每種顏色跟字體都配一版讓我挑!」
    (前端/後端工程師常聽到的)…美工: 「通通做成可以在後台開關設定控制、模組化、熱插拔就好啦!」

  • 情境3
    (視覺設計師常聽到的)…客戶:「我把照片跟文案都零散的貼在Line上面了,你再排成專刊就好,應該很快吧?」
    (前端/後端工程師常聽到的)…美工:「我圖都做給你了,照著做就好,應該很快吧?」

  • 情境4
    (視覺設計師常聽到的)…客戶:「先排版面,文案跟圖片以後再補給你。」
    (前端/後端工程師常聽到的)…美工:「先寫程式,版面出來了再做調整。」

十一、其他網路文章
如何讓公司的平面設計師交出可以用的 Web 圖? « 嫁給RD的 UI Designer
解放吧!設計圖應該跟Web實作是一致的
平面設計和網頁設計的區別 - ㄇㄞˋ點子靈感創意誌


這篇文章有幫助到您嗎? 歡迎 😀打賞贊助