Please enable Javascript to view the contents

在網站中使用Google Fonts

 ·  ☕ 1 分钟  ·  👩🏿‍🚀 iLYuSha

選擇合適的字體

Step 1 前往Goole Fonts網站

Goole Fonts

Step 2 選擇語言

中文的部分除了繁體與簡體之外還有支援香港字形。
按照習慣選擇 Chinese (Traditional)

Step 3 選擇字體

目前繁體字體只提供下列兩種字體:

  • Noto Sans TC思源黑體
  • Noto Serif TC思源宋體
    進入字體頁面可以輸入內容看看預覽效果,調整大小與粗細。

Step 4 產生樣式

調整完成點選網站右上角的 SELECT THIS FONT,會在右下角跳出樣式窗口,在此窗口還可以在 CUSTOMIZE 進一步設置樣式支援的粗細與語系。

設定Google Fonts

標準設置

STANDARD 應該會出現類似下面代碼的樣式:

1
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap&subset=chinese-traditional" rel="stylesheet">

將這段代碼複製到網站的 [head][/head] 之間。

@import設置

切換 @import會出現:

1
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap&subset=chinese-traditional');

@import 這段放入 [style][/style] 之間。

zzo主題設置

在zzo主題設置上僅需要兩個步驟,此處以 Noto Sans TC 為例:

修改 font.toml

root/data/font.toml 這個位置找到 font.toml ,修改預設字體內容:

1
2
title_font = "\"Noto Sans TC\", sans-serif"
content_font = "\"Noto Sans TC\", serif"

添加修改head

root/layouts/partials/head/custom-head.html 這個位置找到 custom-head.htm ,加載下列樣式。

1
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap&subset=chinese-traditional" rel="stylesheet">

分享

伊琉沙 AKA 哇咔咔
作者
iLYuSha
遊戲開發者 / 密室機關師