文風字型(Windfonts)是文派開源的 WordPress 中國生態基礎專案之一,目前已在文派葉子 🍃(WP-China-Yes)中整合,可以直接使用。
一、安裝外掛
透過本站或者網路下載到 文派葉子 🍃(WP-China-Yes)最新版本;啟用後可以看到文風字型設定選項。
文風字型(Windfonts)為您的網站增添無限活力。專為中文網頁設計,旨在提升使用者閱讀體驗和視覺享受
開啟文風字型定製選項後,可以選擇使用範圍和實現效果。
- 全域性啟用
- 前臺啟用
- 本機字型
- 不啟用
【全域性啟用】就是在前後臺均可顯示文風字型,如果使用的是個性字型那麼建議是採用【前臺啟用】就可以滿足大部分使用場景。
【本機字型】是使用的統一中文字型 fonts.css 檔案實現,無需載入外部的字型檔案,而是完全呼叫使用者電腦中的字型。
二、獲取字型
不同的字型檔案需要透過 Windfonts 線上字型平臺 ↗獲取。
進入到文風字型平臺後,選擇需要的字型效果,然後點選【獲取嵌入程式碼】,找到對應的免費字型嵌入程式碼:
- 字型家族名稱:填入從文風字型獲取的字型家族名稱
- 字型連結:填入從文風字型獲取的字型 CSS 連結
- 字型字重:設定字型權重大小(字型粗細)
- 字型樣式:設定字型樣式(正常、斜體、傾斜)
- 字型應用:設定字型應用的元素(CSS 選擇器)
- 啟用字型:是否啟用該字型
三、設定字型 CSS
這裡我們以Google版的思源黑體為例,將程式碼放入你的 <head> 標籤內即可使用。
完整程式碼如下:
<link rel="preconnect" href="https://cn.windfonts.com" />
<link rel="stylesheet" type="text/css" href="https://cn.windfonts.com/wenfeng/fonts/syhtcjk/regular/web/index.css" />
<!-- 此中文網頁字型由文風字型(Windfonts)免費提供,您可以自由引用,請務必保留此授權許可標註 https://wenfeng.org/license -->
- 字型家族名稱:wenfeng-syhtcjk
- 字型連結:https://cn.windfonts.com/wenfeng/fonts/syhtcjk/regular/web/index.css
- 字型字重:保持預設
- 字型樣式:保持預設
- 字型應用:自行填入,常用的標題標籤為 h1,h2,h3,h4,h5,h6
- 啟用字型:預設啟用
當使用文派葉子外掛時,只需要複製字型連結即可如:
https://cn.windfonts.com/wenfeng/fonts/syhtcjk/regular/web/index.css
外掛內已經新增了字型授權標註,無需重複新增。
儲存重新整理前臺頁面後,就可以看到字型的應用效果。此為文風字型 Windfonts 的自建中文網路字型源站,您可以免費使用。