許多電商網站的字體都還是使用新細明體,我覺得很可惜,字體是快速提升網站質感的簡單步驟。這篇文章是懶人包的概念,只要複製貼上我提供的程式碼,立刻能幫網站改成比較好看的思源黑體

關於思源黑體

思源黑體(Noto Sans TC )是Google與Adobe為了提升網路環境體驗而開發的免費字體,並且提供雲端字體的服務。那什麼又叫「雲端字體」呢?

雲端字體是Google提供免費資源,讓全世界的所有網站,都能載入網站的同時,馬上下載使用者的裝置中,因此所有瀏覽者都能享受到這款字體,故稱雲端字型(Webfont)

網站經營者只需要把相關的連結加入其中即可。

Google Fonts

Google fonts官網提供許多的雲端字體服務,但中文字本身字太多,選擇有限。這邊可以看到的是Noto sans TC, Noto Serif TC,分別是黑體與明體。

並且開放有預覽字重、大小的功能。每款字體的右上方有個紅底白加號,點選加入後可以馬上跑出程式碼。

[aux_quote type=”quote-normal” text_align=”left” quote_symbol=”1″ title=”title” extra_classes=””]Google Fonts官網:https://fonts.google.com/[/aux_quote]

 

 

思源黑體/思源明體

思源黑體/思源明體

如果你有興趣研究HTML,應該不難看懂這塊。看不懂就跳過吧

如果是電商經營者,你剛好又很講究電商網站的視覺呈現,建議你研究一下HTML與CSS語法,不是很難。

我每天下班研究一點點,實作兩週大概就能搞懂基本原理了。但如果你不想花太多時間,你可以直接按照底下的步驟複製貼上即可。

修改字體的程式代碼

這邊以電商平台Shopline為例,各家都有開放修改樣式表(簡稱CSS)的功能。找到它!直接複製貼上底下的程式碼。

字體程式碼

不要懷疑!直接複製框框內的所有文字到網站「自訂CSS」欄位中。

[aux_code language=”javascript” theme=”tomorrow” extra_classes=””]
/*載入雲端字型:思源黑體 */
@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);

/*全網頁使用設定 */
*, html, body {
font-family: ‘Noto Sans TC’, ‘Varela Round’, ‘微軟正黑體’, sans-serif;
letter-spacing: 0.5pt;
}
[/aux_code]

font-family是指定字型為”Noto Sans TC” 或者 ‘微軟正黑體’ 等等,有時候載入失敗就用微軟正黑體。蘋果的使用者則沒這問題,裝置一定都會轉成黑體。

letter-spacing 則是字與字的間距,通常文字段落帶點間距也有助於提升質感。

心得與結論:

提升電商網站中最快的方式就是使用合適的字型,不知道為何台灣的電商平台都沒有幫忙做這塊,在一些文字、圖片的美化調整上功能都不如國外的Shopify

台灣多數經營者比較注重商品開發、廣告投放策略方向,比較少朝Landing page優化、電商品牌形象這方面前進。

覺得很可惜,所以寫了這篇字體CSS 用法。

如果你想要學習HTML與CSS,我很推薦你到W3school,提供不錯的編寫器(editor),讓你可以馬上看到效果。

參考資料

最後修改日期: 2019 年 7 月 30 日

作者