這邊介紹 Webfont 網路字型，透過 url () 指令，可以載入外部的字型
所使用的是 Google Fonts Early Access 提供的思源黑體 Noto Sans TC (Chinese Traditional) 繁體中文
通常只要將 @import url(//fonts.googleapis.com/earlyaccess/notosanstc.css); 寫在網站頁頭 <head> 就可以使用這個外部字型
但 Noto Sans 粗細預設值是 Regular 400，這個字型粗細閱讀文章，感覺太粗了，需要使用 Light 300 的字型粗細
所以必需前往 fonts.googleapis.com/earlyaccess/notosanstc.css 複製正確的字型粗細 CSS 代碼
由於 Discuz! 會用到正常字體與主題列表字體兩種字型粗細，所以選擇 Light 300 + Regular 400 的字型粗細 CSS 代碼
@font-face {
font-family: 'Noto Sans TC3';
font-style: normal;
font-weight: 300;
src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.otf) format('opentype');
text-shadow: #999 0.01em 0.01em 0.05em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smooth: always;
}
@font-face {
font-family: 'Noto Sans TC4';
font-style: normal;
font-weight: 400;
src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.otf) format('opentype');
text-shadow: #999 0.01em 0.01em 0.05em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smooth: always;
}
每個 @font-face 聲明提供了字型系列的名稱，可當做多個聲明、字型屬性 (例如樣式、粗細和延伸)，以及為字型資源指定位置優先順序清單的 src 描述元的邏輯群組。
定義 font-family: Noto Sans TC 名稱為 Noto Sans TC3、Noto Sans TC4，以便 Discuz! 後台調用字型名稱
添加字型陰影效果、增加字型圓滑度
text-shadow: #999 0.01em 0.01em 0.05em
添加字型反鋸齒效果、增加字型平滑度
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
font-smooth: always
將 CSS 代碼添加至 Discuz! 後台的其他頭部信息進行測試，代碼前後需要添加 <style> 與 </style>
測試後確定要添加字型，可以將 CSS 代碼寫進 template/default/common/common.css，代碼前後不需要添加 <style> 與 </style>
Discuz! 後台添加正常字體與主題列表字體調用的字型名稱
Discuz! 後台更新緩存後即生效
沒有留言:
張貼留言