網頁字型：昭源黑體及宋體

宋體黑體

根據安裝頁面的指示下載字體壓縮檔並解壓縮後，WOFF2_OTF/ 及 WOFF2_TTF/ 目錄內的分別是 WOFF2/OTF (OpenType) 和 WOFF2/TTF (TrueType) 格式的網頁字型。

目錄結構

兩個目錄內的檔案結構相同，大致如下：

文件夹css/
- vf.css
- vf.t0.css
- vf.t1.css
- vf-italic.css
- vf-italic.t0.css
- vf-italic.t1.css
文件夹demo/
- vf.html
- vf-italic.html
文件夹woff2/
- 文件夹vf/
  - 文件夹t0/
    …
  - 文件夹t1/
    …
  - 文件夹t2/
    …
- 文件夹vf-italic/
  - 文件夹t0/
    …
  - 文件夹t1/
    …
  - 文件夹t2/
    …

css/ 目錄內包含供用家用以載入/匯入的樣式表 (StyleSheet) 檔案。
demo/ 目錄的 HTML 檔案以相關字體印出所有網頁字型的支援字元，作為使用示範。
woff2/ 目錄內的子目錄存放字型檔案。

含 -italic 的檔案代表斜體，使用者可按需要決定是否載入斜體字型。

字碼表分層説明

採用 Unicode-range subsetting 技術切分的字體檔案分置於三個層級 (tier) 的目錄內。

層	對應 CSS 檔案	説明
T0	`vf.t0.css` `vf-italic.t0.css`	以 Google Fonts 中 Noto Sans HK 為基礎再加上整套 LGC 字體和一些常用字覆蓋。包含大部份 Big5/HKSCS 字碼區字元。
T1	`vf.t1.css` `vf-italic.t1.css`	餘下的 Big5/HKSCS 字碼區字元。T0 加此一層級完整覆蓋 Big5/HKSCS 字碼區。
T2	`vf.css` `vf-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 中指定字體家族名稱、字重、斜體等屬性。以下是範例：

body {
    /* 黑體的字體家族名稱是 "Chiron Hei HK WS"，宋體是 "Chiron Sung HK WS" */
    font-family: "Chiron Sung HK WS";

    /* 指定字重。字重值可在 200 至 900 間任意調整 */
    font-weight: 310;

    /* 如有載入斜體就可以通過 “font-style: italic” 宣吿在中英混排時使用真正的斜體英數字 */
    font-style: normal;

    /* 指定「字面調整軸」變化，有效值為 0 至 10 之間，Text 分支字面率等同本軸的 “6” */
    font-variation-settings: "PADG" 4; /* 意即將字面縮小 2% */
}

樣式表 (StyleSheet) 載入方式

用者可以採用以下方式載入昭源黑體及宋體的網頁字型：

1. 自行託管 (self-hosting)

只須將 WOFF2_OTF/ 或 WOFF2_TTF/ 複製到相關目錄，再按上方説明載入所需 CSS 檔案即可。

2. Node.js 套件

本字體也有提供 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 檔案：

@import '~chiron-sung-hk-webfont/css/vf.css';        /* 宋體 OpenType 正體 */
@import '~chiron-sung-hk-webfont/css/vf-italic.css'; /* 宋體 OpenType 斜體 */
@import '~chiron-hei-hk-webfont/css/vf.css';         /* 黑體 OpenType 正體 */
@import '~chiron-hei-hk-webfont/css/vf-italic.css';  /* 黑體 OpenType 斜體 */
@import '~chiron-sung-hk-webfont-truetype/css/vf.css';        /* 宋體 TrueType 正體 */
@import '~chiron-sung-hk-webfont-truetype/css/vf-italic.css'; /* 宋體 TrueType 斜體 */
@import '~chiron-hei-hk-webfont-truetype/css/vf.css';         /* 黑體 TrueType 正體 */
@import '~chiron-hei-hk-webfont-truetype/css/vf-italic.css';  /* 黑體 TrueType 斜體 */

3. CDN (jsDelivr)

網頁開發者也可以利用 jsDelivr 提供的免費 CDN 服務使用昭源黑體或宋體網頁字型。方法如下：

前往字體的 jsDelivr 網頁（參看下表）。

字體	格式	網頁
宋體	OpenType	連結
宋體	TrueType	連結
黑體	OpenType	連結
黑體	TrueType	連結

利用撥動開關圖示將要使用的檔案（vf.css / vf-italic.css）加入。使用者可以同時加入不同專案的 CSS 檔案，換言之可以同時將宋體、黑體的正體和斜體加入。
按下 “SHOW & CONFIGURE ALL LINKS” 按鈕，便會獲得 CSS 檔案的最佳化版本連結。注意：樣式表會載入另一個目錄下的字型檔案，所以不能使用將所有選取 CSS 檔合併成單一檔案的連結 (combined link)，須逐個檔案匯入。
最後將有關連結加到網頁的 <link> 標籤，並在樣式表的 font-family 指定字體家族即可。

昭源字體線上測試

預設配置

自訂變化