2017年4月18日 星期二

教學:Chrome 使用 Stylish 更換字型(CSS繪製的圖形不會變成方塊)

承上一篇文章
其實我對CSS完全沒有概念,所以不知道這樣的作法正不正規,
至少看起來使用上是正常沒有問題的。

自己參考了能Goolgle到的所有方式,修改了幾乎可以順利替換全部的字型,而且不會讓CSS繪製的圖形變成方塊。
效果可參考以下圖片:


我已經上傳到
https://userstyles.org/
搜尋Google Noto Sans CJK TC Medium安裝即可
--------------------------CSS碼如下------------------------------------
*{text-shadow: #707070 0.05px 0.05px 0.05px}
讓文字有陰影效果,後面的三個數字可以字型調整喜歡的陰影程度

*{font-weight: 400!important}
加粗文字,以上這兩個的數字都可以自己調整看看,但微調好像都不會有效果,例如100~400看起來都沒有變化。

*{font-family: "Noto Sans CJK TC Medium"}
所有字型都取代成"Noto Sans CJK TC Medium",這裡不加!important強制取代,所以不會造成CSS繪製的圖形變成方框,而是用以下的方式取代原有的字型,所以有些網站萬一沒有在上面被替換掉字型,使用的字型又是特殊的,就會沒有效果,我會陸續的去更新沒有替換到的部份,所以只要在userstyles下載就好,有替換我就會上去更新。
/*Chinese Fonts*/
@font-face {font-family: "Arial";src: local("Noto Sans CJK TC Medium")}
@font-face {font-family: "Microsoft YaHei";src: local("Noto Sans CJK TC Medium")}
@font-face {font-family: "Microsoft JhengHei";src: local("Noto Sans CJK TC Medium")}
@font-face {font-family: "Microsoft JhengHei UI";src: local("Noto Sans CJK TC Medium")}

有些網站還是有例外,上述方式都失效的時候,就必須指定特定的CSS區段強制更換字型。
例如以下這些網站,但以下的CSS碼在userstyles網站上傳的時候,會檢查不過,所以安裝之後以下的部份要自己把註解移除即可。
/*T客邦*/
._popIn_recommend_art_title a{font-family: "Noto Sans CJK TC Medium"!important}

/*Facebook*/
#facebook *{font-family: "Noto Sans CJK TC Medium"!important}

/*PCHOME*/
.E3 .body li a, .category dl dt{font-family: "Noto Sans CJK TC Medium"!important}

沒有留言:

張貼留言