Blogger設定網路字型記錄:Google與Adobe合作的思源黑體

前幾天重新開啟了部落格的寫作人生,
但是預設的字型和畫面實在是令人不敢恭維,
之後會慢慢找時間來研究改善,
目前先從字型開始下手吧!

一般來說,
傳統的網頁在設定字型的時候,
有兩種方式:
一是直接指定使用者電腦裡的字型、
二是讓網頁在開啟時下載完整的字型檔案到使用者的電腦。

上述的方式,都可以更改我們在網頁上看到的字型,
如果沒有設定的話,就會是系統預設或瀏覽器預設的字型,
以最常見的Windows來說,就是新細明體…

然而,
第一種方式,由於每一台電腦裡擁有的字型都不一樣,
很有可能我指定的字型,別人的電腦裡並沒有,
這樣還是會變回新細明體啊啊啊!

第二種方式,則是比較常見於英文字型,
因為英文字型通常檔案不大(就二十六個字母大小寫加數字符號,最多再來個粗斜體),
中文字型就不是這麼一回事了,
動輒數千上萬字,
更不用說免費的中文字型相對較少,
通常還有版權問題呢!

之前Google和Adobe合作推出了開放的中文字型:思源黑體和思源宋體。
https://fonts.google.com/?subset=chinese-traditional
不僅使用免費,
更可以透過雲端嵌入的方式,
看網頁中有哪些字,才動態載入那個字的字型檔,
大大地減少下載字型檔的時間,
增加了使用的便利性。

我現在的部落格,是用Blogger內建的主題,
再用「自訂」->「進階」->「新增CSS」的方式來改字型。
依照Google Fonts的說明頁面,
分為兩個步驟:
一是設定要讀取的字型檔及網址,
二是設定要套用此字型的元素(例如標題、內文、連結…等等)。

但是我不管怎麼試,
就是沒辦法更改部落格中的字型,
一度改到懷疑人生…
後來我另外寫新的網頁來交叉測試,
才發現問題出在:

Blogger的「新增CSS」無法直接使用@import讀取外部CSS。

像是

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

這個指令是沒有效果的,
而當我直接打開 https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap 這個網址,
然後把裡面的指令直接放到Blogger的「新增CSS」:

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Sans TC Regular'), local('NotoSansTC-Regular'), url(https://fonts.gstatic.com/s/notosanstc/v8/-nF7OG829Oofr2wohFbTp9i1OCEJ.otf) format('opentype');
}

很神奇,一切運作正常了~
害我試了那麼久,
把我的青春還給我啊啊啊!

發表迴響