有時候要照別人的設計稿按圖施工,在 Adobe 的軟體裡面,思源黑體的字體樣式是用 Light, Black, Medium…而網頁的 css font-weight 並無這些東西,打 font-weight:black 是顯示不出來的。

版本比較新的 Adobe illustrator 有一個產生 CSS 的工具,外行人的想法就是以為導入一個工具之後就可以解決所有問題,但是有常識的人都知道這種「自動轉換」的東西通常有三大特點,一:很雷,二:超雷,三:雷到爆。

以本例來說,需要知道 ai 檔上面一段 Noto Sans TC,字體樣式 Light 的文字,網頁樣式的字重值是多少?

有一狗票 AI 畫出來的東西轉不出能用的CSS,那今天轉個文字樣式總該行了吧?選取文字後用 illustrator 轉換一下…
illustrator轉換CSS
又是一場夢,字體樣式跑哪去啦??

還是乖乖查表吧…

思源黑體字體樣式 CSS font-weight
thin 100
light 300
regular 400
medium 500
bold 700
black 900

以後又有出新的字重怎麼辦? 到 Google Fonts 查吧。

雖然說使用 webfont 的用途是為了讓跨平台跨瀏覽器的字型接近一致,而且有比較多元的字體粗細可運用,但問題來了,Google font 提供的思源黑體在 IE11 根本無法顯示呀?
因為現在 Google Fonts 正式上的只有提供 woff2 格式的字型檔,但 IE11 只能吃 eot 或 otf,本來想說難道要自己抓字型檔下來轉嗎?幸好後來找到 Google webfonts helper 已經幫人把繁體中文的 Noto Sans TC 弄出來了,成功解決,讓 IE11 也能顯示思源黑體。

如果網頁設計稿改用 UI 設計軟體來做,能否解決這個設計稿字體樣式需要查表對照CSS字重的情況呢?下回揭曉…有下回的話。