如何使用中文字型 Windfonts ?

文風字型(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 -->

當使用文派葉子外掛時,只需要複製字型連結即可如:

https://cn.windfonts.com/wenfeng/fonts/syhtcjk/regular/web/index.css

外掛內已經新增了字型授權標註,無需重複新增。

儲存重新整理前臺頁面後,就可以看到字型的應用效果。此為文風字型 Windfonts 的自建中文網路字型源站,您可以免費使用。

收藏紀念品


新品上市

文派瓦普(Wapuu.com)文創產品,WordPress 20 週年紀念經典款,首批次僅 1000 個,現貨發售!