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

載入方式

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

1. 自行託管 (self-hosting)

根據安裝頁面的指示下載字體壓縮檔並解壓縮後，WOFF2_OTF/ 及 WOFF2_TTF/ 目錄內的就是網頁字型。用家可按需要選擇使用 WOFF2/OTF (OpenType) 或 WOFF2/TTF (TrueType) 格式。

以 WOFF2_OTF/ 為例，只需載入「正體」(WOFF2_OTF/css/vf.css) 及「斜體」(WOFF2_OTF/css/vf-italic.css) 兩個 CSS 檔案（用家可按需要決定是否載入斜體），再指定 font-family 即可使用。

兩個 WOFF 目錄內的 demo/ 子目錄有兩個 HTML 檔案，分別以正體和斜體字型印出網頁字型的覆蓋字元，作為應用示範。

2. npm

本字體也有 npm 套件可供使用。

套件名稱	字體	格式	npm 連結
chiron-sung-hk-webfont	宋體	OpenType	連結
chiron-sung-hk-webfont-truetype	宋體	TrueType	連結
chiron-hei-hk-webfont	黑體	OpenType	連結
chiron-hei-hk-webfont-truetype	黑體	TrueType	連結

安裝方法如下：

OpenType 格式

# 安裝宋體 OpenType 字型
npm install chiron-sung-hk-webfont
# 安裝黑體 OpenType 字型
npm install chiron-hei-hk-webfont

然後就可以在 CSS 檔用以下方式載入：

@import '~[套件名稱]/css/vf.css';
@import '~[套件名稱]/css/vf-italic.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 斜體 */

TrueType 格式

如果想使用 TrueType 格式則安裝有 -truetype 後綴的套件並在 CSS 檔載入。

# 安裝宋體 TrueType 字型
npm install chiron-sung-hk-webfont-truetype
# 安裝黑體 TrueType 字型
npm install chiron-hei-hk-webfont-truetype

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

在 CSS 指定字體

載入樣式表後，開發者可以在 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% */
}

昭源字體線上測試

預設配置

自訂變化