分類
Blogger教學

Blogger字型設定

此篇以設定「思源黑體」作示範,其他Google Web Fonts也是類似設置。

漂亮的網站,當然需要適合的字型配合,馬上換字型啦!

第3步:設定字型

此篇以設定「思源黑體」作示範,其他Google Web Fonts也是類似設置。

「思源黑體」是Google和Adobe合作製作的開源字型,可到 Google Noto Fonts 看實際效果。也可下載到電腦安裝使用。

圖1 – 「思源黑體」字型樣本

由於「思源黑體」繁體中文版尚未正式被納入Google Fonts,需要在 Google Fonts : Early Access 中尋找 Noto Sans TC

圖2 – 在Google Fonts : Early Access中尋找Noto Sans TC

可在CSS中直接貼上連結匯入:

@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

其實notosanstc.css就是以下:

/*
* Noto Sans TC (Chinese_traditional) http://www.google.com/fonts/earlyaccess
 */
@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 100;
  src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans TC';
  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');
}
@font-face {
   font-family: 'Noto Sans TC';
   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');
 }
@font-face {
   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 500;
   src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 700;
   src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 900;
   src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.otf) format('opentype');
}

如果不會用到全部的粗度,建議直接貼上會用到的 font-weight 部分就好,可節省載入時間。

AC選擇 font-weight 300 及 500,分別作為一般及粗體字型:

/*
* Noto Sans TC (Chinese_traditional) http://www.google.com/fonts/earlyaccess
 */
@font-face {
  font-family: 'Noto Sans TC';
  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');
}
@font-face {
   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 500;
   src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.otf) format('opentype');
}
圖3 – 到後台貼上CSS

貼上自訂CSS後,修改範本XML中的font-family:

圖4 – 修改font-family及font-weight

小貼士:如果想英文字型與中文不相同,須將英文字型放於中文字型前,這樣兩種字型都能顯示。

儲存範本後完成設定!

圖5 – 實際效果


Google Fonts : Early Access 還有其他中文字型可選:

發表回覆

你的電郵地址並不會被公開。 必要欄位標記為 *

本網站受 reCAPTCHA 保護,並適用 Google 隱私政策服務條款