網頁字型：昭源環方

環方

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

目錄結構

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

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

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

字碼表分層説明

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

層	對應 CSS 檔案	説明
T0	`vf.t0.css`	以 Google Fonts 中 Noto Sans HK 為基礎再加上整套 LGC 字體和一些常用字覆蓋。包含大部份 Big5/HKSCS 字碼區字元。
T1	`vf.t1.css`	餘下的 Big5/HKSCS 字碼區字元。T0 加此一層級完整覆蓋 Big5/HKSCS 字碼區。
T2	`vf.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/ 目錄刪除。

指定使用字體

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

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

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

樣式表 (StyleSheet) 載入方式

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

1. 自行託管 (self-hosting)

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

2. Node.js 套件

本字體也有提供 Node.js 套件供使用。

套件名稱	字體	格式	npm 連結
chiron-go-round-tc-webfont	OpenType	連結
chiron-go-round-tc-webfont-truetype	TrueType	連結

使用 npm 之類工具安裝所需套件後，參考以下指令載入 CSS 檔案：

@import '~chiron-go-round-tc-webfont/css/vf.css'; /* OpenType 版本 */
@import '~chiron-go-round-tc-webfont-truetype/css/vf.css'; /* TrueType 版本 */

3. CDN (jsDelivr)

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

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

字體	格式	網頁
環方	OpenType	連結
環方	TrueType	連結

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

昭源字體線上測試

預設配置

自訂變化