Slider Revolution 6 怎麼設定中文字型？正黑體、Noto Sans TC 的 CSS 寫法

Slider Revolution（舊名 Revolution Slider）是很多 WordPress 主題會附的輪播外掛。升級到第 6 版之後，常有人發現中文字型不好設定：圖層的字型選單以 Google Fonts 為主，沒辦法像以前一樣直接指定「微軟正黑體」這類電腦內建的字型。

這篇整理兩種解決方法。

先了解：微軟正黑體不是每個人都有

設定之前要先知道：微軟正黑體（Microsoft JhengHei）只有 Windows 電腦內建。Mac、iPhone、Android 手機上都沒有這個字型，瀏覽器會自動換成裝置上的其他中文字型。

所以指定字型時，要寫成一串「備用清單」，瀏覽器會從前面開始找，找到裝置上有的就用：

font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif;

• Microsoft JhengHei：Windows 的微軟正黑體
• PingFang TC：Mac、iPhone 內建的蘋方
• Noto Sans TC：Google Fonts 的思源黑體（網站有載入時才會用到）
• sans-serif：前面都沒有時，用系統預設的無襯線字體

方法一：直接選 Google Fonts 的中文字型

如果不堅持用微軟正黑體，最簡單的是在 Slider Revolution 圖層的字型設定裡，選擇 Google Fonts 提供的中文字型，例如 Noto Sans TC（思源黑體）或 Noto Serif TC（思源宋體）。

好處是每一台裝置看到的字型都一樣。要注意的是，中文字型的檔案比英文字型大很多，會增加網頁的載入時間，而輪播通常就在首頁最上方。盡量只用一到兩種粗細，不要每個圖層都換不同的字重。

字型清單裡找不到想要的字型，或想用裝置內建的字型、不額外載入字型檔的話，用方法二。

方法二：用自訂 CSS 指定字型

把下面這段 CSS 加到網站裡：

rs-module rs-layer,
rs-module .rs-layer {
  font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif !important;
}

CSS 放在哪裡都可以，選一個你方便管理的地方：

• WordPress「外觀 → 自訂 → 附加 CSS」，或子主題的 style.css：網站上所有的輪播都會套用。
• Slider Revolution 編輯器裡通常也有「自訂 CSS」的設定區，放在那裡的 CSS 會跟著該輪播一起載入。

rs-module、rs-layer 是 Slider Revolution 6 產生的 HTML 標籤名稱。至於為什麼要加 !important：Slider Revolution 會用行內樣式替每個圖層設定字型，一般的 CSS 通常蓋不過去，要加上 !important 才會生效。

只改其中一個輪播

網站上有好幾個輪播、只想改其中一個的話，按 F12 打開開發者工具，找到那個輪播最外層的 rs-module 標籤，看它的 id（例如 rev_slider_1_1），在選擇器前面加上這個 id：

#rev_slider_1_1 rs-layer,
#rev_slider_1_1 .rs-layer {
  font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif !important;
}

rev_slider_1_1 請換成你在開發者工具裡實際看到的 id。

舊版文章的 CSS 為什麼要改？

舊版文章的選擇器裡有 .rs-layer :not(.rs-wtbindex) 這種寫法，注意中間有一個空格，意思是「圖層裡面的所有子元素」都套用正黑體。問題是，圖層裡如果有圖示（例如 Font Awesome 這類圖示字型），圖示也會被改成正黑體，結果變成方塊或奇怪的字元。舊寫法裡還有一個拼錯的標籤名稱 rs-alyer，那一段其實沒有作用。

上面的新寫法只改圖層本身，圖層裡的文字會自動繼承字型，圖示則保留原本的字型。

設定之後沒有變化？

• 清除快取：快取外掛、CDN，以及瀏覽器快取（按 Ctrl + F5 強制重新整理）。
• 確認 CSS 有載入：在開發者工具裡點選輪播的文字，右側的樣式面板應該看得到你寫的 font-family，如果被劃掉，代表有其他規則蓋過去。
• 確認標籤名稱：用開發者工具檢查輪播的 HTML，如果標籤不是 rs-layer（例如升級到更新的大版本後結構改變了），選擇器要跟著修改。

請使用正版外掛並保持更新

Slider Revolution 是付費外掛，主題附帶的版本不一定能自動更新。請使用正版授權並保持更新：網路上的破解版常夾帶惡意程式，而輪播外掛過去也發生過嚴重的資安漏洞，舊版本一直不更新，風險很高。

延伸閱讀

• WordPress 網站加速完整攻略：測速、主機、快取、圖片、外掛與資料庫清理
• 好用的 CSS 語法技巧：半透明、圓角、陰影、字型等 15 個常用寫法
• RWD 響應式網頁怎麼做？viewport 語法與 CSS 基本寫法完整教學

首頁的輪播是訪客對網站的第一印象，字型、圖片和載入速度都值得好好調整。正威網路行銷是 25 年經驗的基隆網頁設計工作室，除了 RWD 響應式網站，也提供攝影剪輯服務，輪播需要的照片和影片可以一起處理，歡迎來聊聊。