為OpenCart首頁Slider加上特粗的標題字型

--

設計網頁的時候,為了顧及在所有瀏覽器上有統一的呈現效果,通常會選擇作業系統內建的 Font Family,最常見的就是微軟正黑體,但當您希望首頁標題能加重語氣,就會希望能有比微軟正黑體更厚實的字體,像一般新聞標題那麼霸氣。

一般網頁設計時,其實是可以很容易的透過 link tag 將 google font 的 css 導入頁面,就可以在頁面中使用 google font 的字體。但當你是使用 CMS 的 Theme 系統,就可能需要透過後台的一些設定,才能使用 Google Font,本篇就是以 OpenCart 系統的 Journal Theme 為例,來說明如何為 Journal 的 Slider 設定厚實的粗黑字體。

使用內定字體當標題

Journal Theme 在後台提供了 Font Family Variable 的設定功能 (有點類似 CSS 的概念),你可以在 Journal 後台新增一個 Font Family Variable,例如我們下方的作法,新增一個 Label 叫做 Noto Font 900 的 Font Family (900 是指 font-weight)。

Font Family Variable
新增一個 Font Family Variable

上面的 Font Family Variable 新增完成之後,Journal 的字型選單,就會多出一項我們剛剛新增的 Noto Font 900。接下來我們進到編輯 首頁 Slider 的 Main Text 的地方。

Slider 編輯畫面

將 Slider 的 Main Text 的 Font Style 設定為 Noto Font 900,存檔之後再重刷一下前端首頁,就可以看到 Slider 的標題字,套上了 Noto Sans TC (font-weight 900) 的效果,看起來更有份量了。

--

--

資深電商工匠
資深電商工匠

Written by 資深電商工匠

開源電商首席工程師,18年購物網站設計、商家輔導上線經驗 ... https://www.osec.tw

No responses yet