网页字型：昭源黑体及宋体| 昭源字体
|最后更新: 2026-5-8
URL
chiron-fonts.github.io/usage/w...or-sung/
Status
Like
Saved
May 8, 2026 08:57 AM
链接
根據安裝頁面的指示下載字體壓縮檔並解壓縮後，WOFF2_OTF/ 及 WOFF2_TTF/ 目錄內的分別是 WOFF2/OTF (OpenType) 和 WOFF2/TTF (TrueType) 格式的網頁字型。
兩個目錄內的檔案結構相同，大致如下：
  • css/ 目錄內包含供用家用以載入/匯入的樣式表 (StyleSheet) 檔案。
  • demo/ 目錄的 HTML 檔案以相關字體印出所有網頁字型的支援字元，作為使用示範。
  • woff2/ 目錄內的子目錄存放字型檔案。
含 -italic 的檔案代表斜體，使用者可按需要決定是否載入斜體字型。

字碼表分層説明

採用 Unicode-range subsetting 技術切分的字體檔案分置於三個層級 (tier) 的目錄內。
層
對應 CSS 檔案
説明
T0
vf.t0.cssvf-italic.t0.css
以 Google Fonts 中 Noto Sans HK 為基礎再加上整套 LGC 字體和一些常用字覆蓋。包含大部份 Big5/HKSCS 字碼區字元。
T1
vf.t1.cssvf-italic.t1.css
餘下的 Big5/HKSCS 字碼區字元。T0 加此一層級完整覆蓋 Big5/HKSCS 字碼區。
T2
vf.cssvf-italic.css
其他繁體中文字元，包括《康熙字典》字頭、特殊粵語用字等。
（CSS 檔案採疊加式設計，載入了 vf.css 就不必載入 vf.t0.css 或 vf.t1.css。）
要知道某一層級包含哪些字碼，請參考 demo/ 目錄的範例 HTML 檔。
如要得到最完整的字碼覆蓋，請使用 vf.css。如果知道應用只須涵蓋 Big5/HKSCS 字碼區字元，則可選擇載入 vf.t1.css（建議）或 vf.t0.css。
此一設計主要是方便自行託管的使用者。例如，在僅使用 vf.t1.css 的場合，部署時可以將 woff2/vf/t2/ 目錄刪除，減少伺服器的儲存空間佔用和避免不必要的流量。僅使用 vf.t0.css 時則可以將 woff2/vf/t1/ 及 woff2/vf/t2/ 目錄刪除。
含 -italic 的 CSS 檔案同理。

指定使用字體

載入樣式表 (StyleSheet) 後，開發者可以在 CSS 中指定字體家族名稱、字重、斜體等屬性。以下是範例：
 

樣式表 (StyleSheet) 載入方式

用者可以採用以下方式載入昭源黑體及宋體的網頁字型：
只須將 WOFF2_OTF/ 或 WOFF2_TTF/ 複製到相關目錄，再按上方説明載入所需 CSS 檔案即可。
本字體也有提供 Node.js 套件供使用。
套件名稱
字體
格式
npm 連結
chiron-sung-hk-webfont
宋體
OpenType
連結
chiron-sung-hk-webfont-truetype
宋體
TrueType
連結
chiron-hei-hk-webfont
黑體
OpenType
連結
chiron-hei-hk-webfont-truetype
黑體
TrueType
連結
使用 npm 之類工具安裝所需套件後，參考以下指令載入 CSS 檔案：
 
網頁開發者也可以利用 jsDelivr 提供的免費 CDN 服務使用昭源黑體或宋體網頁字型。方法如下：
  1. 前往字體的 jsDelivr 網頁（參看下表）。
字體
格式
網頁
宋體
OpenType
連結
宋體
TrueType
連結
黑體
OpenType
連結
黑體
TrueType
連結
  1. 利用撥動開關圖示將要使用的檔案（vf.css / vf-italic.css）加入。使用者可以同時加入不同專案的 CSS 檔案，換言之可以同時將宋體、黑體的正體和斜體加入。
  1. 按下 “SHOW & CONFIGURE ALL LINKS” 按鈕，便會獲得 CSS 檔案的最佳化版本連結。注意：樣式表會載入另一個目錄下的字型檔案，所以不能使用將所有選取 CSS 檔合併成單一檔案的連結 (combined link)，須逐個檔案匯入。
  1. 最後將有關連結加到網頁的 <link> 標籤，並在樣式表的 font-family 指定字體家族即可。
meta 標籤中 @ 後的字型檔版本，用家可以根據需要選擇載入不同版本的字型檔。例如： • @1.0.16: 載入 v1.0.16 版本的字型檔。 • @1.0: 載入 1.0.x 版本的字型檔。 • @latest: 載入最新版本的字型檔。想一直使用最新版又不介意更新後可能會出現 bug 或移位的用家可以使用此選項。
  • • @1.0.16: 載入 v1.0.16 版本的字型檔。
  • • @1.0: 載入 1.0.x 版本的字型檔。
  • • @latest: 載入最新版本的字型檔。想一直使用最新版又不介意更新後可能會出現 bug 或移位的用家可以使用此選項。
Loading...