跳到內容

昭源字體線上測試

30

預設配置

自訂變化

400
0

昭源宋體 (Chiron Sung HK) 和昭源黑體 (Chiron Hei HK) 是為繁體中文使用者而設、採用現代筆形風格、平衡標準字形和印刷體慣用筆形以適合作熒幕顯示和印刷用途的免費中文字體。

使用者可於此測試區輸入文字,並利用工具欄的選項,預覽兩款昭源字體在不同參數下的顯示效果。


注意:
- 網頁字型收字比桌面用的 OTF/TTF 版少,不反映桌面版的收字量。
- 輸入文字後,瀏覽器或須下載相應字碼的網頁字型子集,這會導致額外的數據用量。

香港增補字符集補編字元測試:𭉝 (U+2D25D),𫬷 (U+2BB37),𢫏 (U+22ACF)
香港增補字符集字元:嘅咗啲㗎嗰𤷪𤺧𠺝𦟌𨋢𠱁𩜠𡃁
粵語網站字頭:𢆶𢇛𠦒𡖊𢦔𡊄𢻻𣧑𥎊𦉆𦕈𦘴𦙫𦚟𦜐𦜓𤨏𢸄𣡌𣽉𤒦𤴡𤶀𥼝𩵒
台、客語字元:𠞩𠯗𢼌𣁳𣮈𦊓𦜆𧉟𩛩𩸙𩸶𪜶𰣻𰹬𢳪𤞚𥯟𩜰𫟧𫠛𫣆
Source Serif 4 特有字元示例:ĄĆĈṂćẓ₽ўᵘ

網頁字型

昭源黑體及宋體均提供適用於網頁的網頁字型 (webfont) 版本,只須載入相關的 CSS 檔案再在 stylesheet 指定字體即可使用。

網頁字型是 OTF 檔的子集版,涵蓋整個 Big-5/HKSCS-2016 字集,其餘為《康熙字典》字頭、特殊粵語專用字等。日本平假/片假名屬於 HKSCS 字集,亦有收入。網頁字型針對繁體中文用途,不支援簡體中文、諺文等。

載入方式

1. 自行託管 (self-hosting)

根據安裝頁面的指示下載字體壓縮檔並解壓縮後,WEBFONT/ 目錄內的就是昭源字體網頁字型。

字體屬可變式字型格式,因此只需載入「正體」(WEBFONT/css/vf.css) 及「斜體」(WEBFONT/css/vf-italic.css) 兩個 CSS 檔案(用家可按需要決定是否載入斜體),就可以任意調整字重。

順帶一提,WEBFONT/ 目錄內的 demo/ 子目錄有兩個 HTML 檔案,分別使用正體和斜體字型印出所有網頁字型的覆蓋字元,作為應用示範。

2. npm

本字體亦備有 npm 套件可供使用(宋體黑體)。安裝方法如下:

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

然後就可以在適當位置載入樣式檔,例如:

@import '~chiron-sung-hk-webfont/css/vf.css'; // 宋體正體
@import '~chiron-sung-hk-webfont/css/vf-italic.css'; // 宋體斜體

@import '~chiron-hei-hk-webfont/css/vf.css'; // 黑體正體
@import '~chiron-hei-hk-webfont/css/vf-italic.css';  // 黑體斜體

3. CDN (jsDelivr)

除了下載字型檔,網頁開發者也可以利用 jsDelivr 提供的免費 CDN 服務使用昭源黑體網頁字型。方法如下:

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

使用

以下是簡單用例。

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

    /* 指定字重。由於是 VF 字型,字重值可在 250 至 900 間任意調整 */
    font-weight: 310;

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

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