[-Fx-] MSJhengHei Style (UserStyle) 自訂字型

[t7yang (t7: 我認為這是一種背叛)]

        凌晨時突然看到B大的回覆，刺激了了一下，想說不要那麼死腦筋

        結果就給我是成功了，本篇就是利用 font-face 改 Firefox 中文字型

        而且測試到目前為止幾乎沒有甚麼大問題，有修了一些問題

        這個一併解決了幾個問題：

        1. 解決自訂字型造成圖示字型出錯（借助 font-face 自訂 unicode 範圍）
        2. 解決了之前簡體網站一直無法正確自訂字型的問題
        3. 不會造成 Codecademy 的游標錯位問題（安心學程設）


        幾點需要說明：
        1. 仍需要到［選項］→［內容］把字型設定為微軟正黑體
        2. 此 User Style 目前只適用於 Firefox，可能不相容其他瀏覽器
        3. Mac 的使用者應該也可以用的，正常來說會跳過微軟正黑體
           而選擇 Heiti TC。
        4. 拿掉了日文和英文的設定，因為無法使用 Sans-serif 和 Serif
           的方式來設定，一一列舉的方式太困難，尤其是英文的部分



        範例比較圖：
        http://i.imgur.com/V4VmipM.png

        原始碼網址：
        http://pastebin.com/cTkZTBD1

        特別銘謝：
        ettoolong
        timshan
        birdhackor
        等一眾給予協助板友們


        有任何問題歡迎回報
        來睡覺了，各位早安

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 140.113.73.123
推 hohiyan:awesome!!
→ timshan:恭喜!!
推 art1:終於搞定囉
→ Madevil:仍然不會按照 unicode-range 變化呀...
→ t7yang:我沒擴大測試其他unicode範圍，所以不是很確定是否range的
→ t7yang:效果有發揮，如果沒有的話應該就是要針對字型強制轉換
→ t7yang:這部分遇到英文字型的時候就會很麻煩
→ t7yang:不過unicode-range目前在FX有bug倒是真的，無法套用也算正
→ t7yang:常，看MF甚麼時候要修囉
推 Nexqachy:請問這檔案要放哪?還是用油猴安裝就好呢?
→ t7yang:裝 Stylish 然後自己新增樣式，我有試過發表在UserStyle
→ t7yang:可是系統說parse error不給我發。
→ Wcw5504:像新細明體或雅黑應該就可以不用指定range了 反正會去設的
→ Wcw5504:大都中文...
→ t7yang:其實unicode-range無法發揮作用的話加不加都無所謂
→ t7yang:等一下修改的原始碼，把range拿掉好了
※ 編輯: t7yang          來自: 140.113.73.123       (07/25 17:32)
推 kaoh08:大推! 字距變得比Op還好看
推 typepeter:推
→ typepeter:如果可以放上UserStyle的話,連手機都可以用
→ t7yang:手機的話應該沒有正黑體，所以替換的字型部分可能要換一下
→ Wcw5504:A系統的話應該就是設Droid Sans Fallback 反正也只有它可
→ Wcw5504:以去裝Stylish
→ t7yang:等等再修改一下，多加幾個字型上去，方便不同系統的使用者
→ SicInfit:Android 需要改字體嗎？（或者說 Windows 以外的系統需要
→ SicInfit:嗎？）
推 icypyh:推~
→ Wcw5504:手機基本上可以不用改啦... 內建的字型都是固定的 也沒其
→ Wcw5504:他的可以叫吧
推 watertip:ㄟ  可以白話文說明怎麼裝嗎? 看起來好棒好想試~ please
→ t7yang:推文中有寫，安裝在Stylish的新樣式中或放在userChrome.css
→ t7yang:我要發表在UserScript系統報錯，不給我發，我也沒辦法
→ t7yang:不然要做版本維護有點麻煩
釋出 1.3 版，詳見更新記錄
※ 編輯: t7yang          來自: 140.113.73.123       (07/26 14:26)
→ SicInfit:辛苦了，雖然基本上這在 Mac 是沒啥用處...
→ SicInfit:除非是有安裝 Office 造成萬惡的新細明體出現在系統中XD
→ SicInfit:不然 Windows 以外的系統預設字體看起來都算是舒服的。
→ t7yang:以後有試過在Ubuntu安裝儷黑體，確實很好看，不過儷黑體
→ t7yang:最大的確定就是不符合「國字標準字體」的規範，不然就完美
→ t7yang:目前常見的字型除了標楷體外，好像就微軟正黑體符合規範
→ SicInfit:蘋果都叫大陸公司做字體啊= = 不過儷黑也過時了就是
→ SicInfit:現在的 Heiti TC 我覺得還可以，不過粗體的話 Hiragino
→ SicInfit:比較好看。（當然都是在 Mac 上來說，畢竟同字體拿到不同
→ SicInfit:系統上，還是會因為平滑方式、hinting、kerning 等因素造
→ SicInfit:成呈現效果的差異。）
→ t7yang:看你的過時定義是指甚麼囉，不然字型檔也是可以釋出更新的
→ t7yang:如果他們真的重視台灣的使用者話，就應該釋出符合國字標準
→ t7yang:規範的中文字型。然後就是我自己其實蠻看重字型到底符不符
→ t7yang:合國字標準字體的規範（對這方面有點「潔癖」）
→ sb107912:那你可以試試這個 點"全字庫正楷體/正宋體"到頁面下載
→ sb107912:http://www.cns11643.gov.tw/AIDB/welcome.do
→ sb107912:ubuntu有套件:fonts-cns11643-sung/fonts-cns11643-kai
→ t7yang:問題是楷體跟明體都不好看啊~~ XD
→ t7yang:楷體太正式了，一般瀏覽器上的閱讀還是習慣黑體或圓體
→ SicInfit:Heiti TC 沒記錯是有改進過幾次。我的過時是指 10.6 以後
→ SicInfit:它就已經不再是中文的系統首選字型了。總之我是想說 Mac
→ SicInfit:直接用內建的，應該還比替換成 LiHei Pro 再套用陰影好看
→ SicInfit:，其它系統也不太需要。就是只有嫌棄 Windows 字體的意思
→ SicInfit:囉XDD
→ t7yang:啊 這樣啊，請問目前MAC OS預設中文哪個，因為我不知道
→ t7yang:所以設定為 LiHei Pro
→ t7yang:不過你這樣講到是讓我想到 text-shadow的屬性應該要分開
→ t7yang:不過如果MAC上沒有我遇到這個問題的話，是否這個 Style 就
→ t7yang:不需要考量 Mac 的使用者了
→ SicInfit:正常來講是不用，唯一就可能是像我前面所說的，裝了
→ SicInfit:Office 後也添加了醜醜的新細明體害某些網頁可以去調用，
→ SicInfit:否則 Mac 預設就是用黑體，字體平滑也比 Windows 好多了
→ t7yang:所以現在MAC OS預設適用 HeiTi TC 這套字型
→ sb107912:我是覺得mac user有另外的修改方法
→ sb107912:http://0rz.tw/eoA88 像是這個
→ sb107912:字型好不好看 順眼否 就因人而異了 XD
→ t7yang:不錯是不錯啦，只是日文字型肯定不符合標準字體 XD
→ Madevil:以前還沒有附正黑體的時代我是用日文的 MS Gothic 來替代
→ Madevil:新細明體, 大致上 Windows 本身懂得處理缺字問題
→ sb107912:持續更新 字體支援多的 還有微軟雅黑(Microsoft YaHei)
雅黑比正黑還差，字有高低不齊的問題，而且百分之百不符合國字標準字體規範
如果真的不喜歡替換雅黑的話，建議個別使用者自行修改
→ Wcw5504:雅黑字形太粗了，感覺不太協調 大概只有放在標題勉強可看
→ Wcw5504:在一般內文那種大小套用的話很糊
釋出 1.4 修正標楷體對應錯誤的問題
※ 編輯: t7yang          來自: 140.113.73.123       (07/27 15:16)
推 kaoh08:推! 不過要陰影的話還是交給mactype負責吧
→ t7yang:我也有想過啦，那還是分開好了 XD
→ t7yang:v1.5 已移除陰影效果。但是其實如果啟用硬體加速的話 某些
→ t7yang:顯卡會使得 Mactype 沒辦法發揮作用，當初就是為了享受硬體
→ t7yang:加速所帶來的效益，才發現這點，因此才會用 CSS 加陰影效果
推 timshan:其實我覺得陰影用CSS來寫就好 Fx的字體渲染其實就夠強了
→ timshan:用MacType感覺很多餘...
推 typepeter:陰影交給CSS+1 現在這樣寫比較好
簡單講就是眾口難調，我自己是也有用 Mactype，只是 N 社的顯卡開硬體加速 MT 就
無法在 Firefox 內發揮作用，因此才會又用 CSS 的方式來加陰影效果。

其實我也是覺得用 CSS 的方式比較好（比較「正規」，MT 比較像旁門左道 XDD）
因為不是每個人都喜歡安裝一些會影響到作業系統的軟體

同時也考慮到不是每個人都喜歡陰影效果，所以最後決定把陰影效果加回來
不過是以註解的方式，想要陰影效果的朋友們就把 /* */ 註解符號拿掉就好了

或是安裝Firefox Strong Font Rendering (UserStyle)
不過我是很自信我調出來陰影參數比它調的好

v1.6 http://pastebin.com/cTkZTBD1 以註解的方式新增陰影效果，要陰影效果的話
                                  請自行拿掉註解

※ 編輯: t7yang          來自: 140.113.73.123       (07/27 20:11)
推 sb107912:雅黑在ubuntu下顯示正常 在win7下模糊 我覺得是其他問題
→ sb107912:我也不會解決 XD
→ sb107912:我是覺得微軟正黑的字體筆劃的線太細了
正黑體確實太細，看起來很虛，不過在微軟作業系統佔大多數的現在，可以免費、符合
規範的中文字型真的很少。

→ sb107912:符合"標準字體"又有在更新的 我想到信黑體 不過要很多$
還真的沒聽過信黑體，不過稍微搜尋了一下，那位柯老師確實滿令人佩服的
授權費確實很嚇人，不過未來有錢的話可能會支持一下 XD
不過我覺得最讓人佩服的是，信黑體的 weight 比起其他的中文字型多很多

→ sb107912:沒在更新的就華康中黑體 我只知道這些字體 XD
華康的字型算經濟實惠，華康經典這麼多字型才賣三張小朋友左右而已
然後中黑體還有支援簡體中文，這點算蠻好的
不過華康的字型缺點也蠻明顯的，就是unicode字型太少，可能他們的產品線太多
每個都要支援到unicode會傷成本吧

→ sb107912:華康中黑還有在更新的話 請糾正我一下 XD
→ Wcw5504:中黑字太小的話會很糊 等寬特性用在BBS倒是很適合
我人的淺見是適合用來當瀏覽器的字型主要要符合：
- 起碼支援簡正體
- 符合標準字體規範
- 字的粗細不能太細或有鋸齒、高低不平（像正黑體這種會多出空格的奇葩就少見了）
- 支援等寬

不過要找到這樣的字型而且對多數人來說是可以免費使用的確實不容易 XD
※ 編輯: t7yang          來自: 140.113.73.123       (07/28 17:06)
→ t7yang:中黑體的艸部其實不標準 XD
推 Wcw5504:正黑的空白是有人提供修法 http://ppt.cc/Nhto
→ t7yang:如果問題真的是這樣就可以解決的話，那微軟就真的很扯了
→ t7yang:居然擺著這個問題一直不解決，還叫人家不要用是哪招
推 candice0:請問t大如果本來就有用Mactype 需要把檔案裡面的正黑改成
→ candice0:新細明體嗎?  謝謝您XD
→ t7yang:可以說明一下你為什麼你會這樣問嗎？
→ t7yang:MT跟用甚麼字型好像沒差，還是你用 XP 沒有正黑體
推 rockmanx52:因為沒人管吧? W8的新注音Bug到最後也是直接把新注音
→ rockmanx52:完全拔掉....
推 black0604:排除似乎沒有效？因為如果開啟陰影但進了ptt
→ black0604:還是會出現陰影
推 black0604:應該ok了，用{}把後面的內容括起來就可以了