2018年5月12日 星期六

[HTML+CSS] 修改Blogger的中文字型

該死的洋人。
從GUI修改字型的話,只有那些Arial之類的,沒有中文字型。
邏輯是這樣的:找一個WebFont(畢竟是中文,WebFont是必須的),嵌入到部落格的模板HTML中。
WebFont的嵌入分兩個部分,一部份是連結,總之就是用<link>把字型檔讀進來;另一部份就是實用,在某個我們想要套用的對象上用CSS去聲明他的字型。
<link>簡單,找到<head>隨便插入就可。
以Google提供的WebFont為例的話,就是像這樣:
===
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" />
===.
字型可以從這裡找,Source Code Pro也在其中,是個很棒的等寬字型。
中文部分就使用Noto吧。要注意在上面的網址中找到的Noto是西文版的,沒有中日韓。
中日韓版本的叫做Noto Sans CJK TC或Noto Serif CJK TC(有分區域的,TC是正體中文),在這裡
連結是如此簡單。問題來了,字型的實用應該寫在哪裏?
在<head>寫一個CSS聲明body的字型是沒有用的,哪怕我們加上無數個!important(想當然的)。
我所知的方法是,總之先在HTML中搜尋「font」,會看到在一個叫做<b:skin>的標籤裡有很多看似被註解的XML tags,我們會看到一些關鍵字「body.font」、「header.font」等等,看來就是這裡了。
那些Variable標籤的屬性default裡記錄的東西一目瞭然,就是我們想修改的字型,而我們的WebFont就在這裡實用。
字型的實用有很多大佬給過意見了,這一篇就很實在。
簡單來說,英文,然後中文。
我的建議就是
===
'Source Code Pro', 'Noto Sans CJK TC',
===.
後面的Arial和一大票預設字型我是沒刪的。
留意一下,我們所修改的東西實質上是個字串,外面包的是雙引號,所以字型名稱的部分用的是單引號。

[HTML] ribody

怕自己忘記,稍微紀錄一下。 各種各種理由(其中一個就是Vue,不能綁定在body上),導致時常需要一個包在body中的div,當作body來用,像這樣: === <body>     <div id="divBody">   ...