[字型] 字型渲染2017

[mayuyu ((・ω・)ノ)]

Firefox從48以後支援text-stroke

比較圖
以下圖片要1:1顯示避免縮放失真才能看得出來差異
縮小的話看起來都很黑
放大的話看起來都很糊
所以要1:1顯示看起來才能看得出差別

Firefox 50.1.0 + WIN7 + MacType DirectWrite補丁(ForceNoHinting = 1)
http://i.imgur.com/HQdtwCH.png
文字顏色還是偏淡

使用text-shadow加陰影
text-shadow: 0 0 1px
http://i.imgur.com/MLRcOIt.jpg
變粗了，但是陰影加得太重了，看起來霧霧的很吃力

改用text-stroke增加文字描邊的厚度
-webkit-text-stroke: 0.0500em
http://i.imgur.com/9bciUlH.png
超粗，而且不會像text-shadow那樣霧霧的，
但是文字邊緣比較不平滑，
同時太粗了，筆畫較複雜的字會黏成一團，
分辦起來有些吃力，例如上方橫幅「拍賣」的「賣」這個字。

把厚度減少一點
-webkit-text-stroke: 0.0250em
http://i.imgur.com/pH4ZEtk.png
沒那麼粗，不過看起來比較合理

在Chrome上的情況
-webkit-text-stroke: 0.0300em
http://i.imgur.com/XaOVqw0.png
顏色好像比較淡

其他範例
D2D
http://i.imgur.com/wXmGSiv.png
text-stroke
http://i.imgur.com/3ijpfE8.png

D2D
http://i.imgur.com/6X64YVO.png
text-stroke
http://i.imgur.com/f0msLPR.png

D2D
http://i.imgur.com/eyJuyEA.png
text-stroke
http://i.imgur.com/BnwZVNm.png

text-stroke
http://i.imgur.com/nIFjfLt.png

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 61.219.36.51
※ 文章網址: https://www.ptt.cc/bbs/Browsers/M.1486912676.A.FA2.html
→ mayuyu: mactype補丁
→ mayuyu: http://silight.hatenablog.jp/entry/MacTypePatch
→ mayuyu: 設定ForceNoHinting = 1 可以在WIN7關閉Hinting
推 t7yang: 不錯，還不知道新增了這個CSS，可以更新到killserfi作為
→ t7yang: 選項
推 hohiyan: 實用推
推 hohiyan: 唔…我用了之後有些字型會有疊影的狀況出現？
→ hohiyan: 例如 http://imgur.com/dzXva5U
→ hohiyan: 在其他網站中英文字型有些也出現相同的狀況
@hohiyan 看起來像是字型混合顯示的時候渲染發生問題
重新開機試試看 如果有使用patch 重新覆蓋dll和設定檔後
重開幾次清掉快取試試 覆蓋前要先關閉mactype
(dll要覆蓋到mactype安裝目錄和windows系統目錄
注意EasyHK32要放SysWOW64 EasyHK64要放到System32)

推 abc0922001: 推麻友
推 tina1007: 推
→ tina1007: 想問麻友大火狐的左邊側欄是用哪個套件呢?
→ mayuyu: 左邊是工具列 Vertical Toolbar
→ mayuyu: 我渲染顯示是正常的 換個字體試試看 還有Fx版本？
→ mayuyu: Fx雖然48開始支援 -webkit 但是預設是關閉的
→ mayuyu: 要在about:config裡面打開layout.css.prefixes.webkit
→ mayuyu: 49以後預設值才是打開的 caniuse則是標50以後才支援stroke
→ mayuyu: 所以最好換到50以後的版本測試
更正 我眼殘 can i use 也是寫49版開始支援-webkit-text-stroke
48版要調整layout.css.prefixes.webkit

推 abram: 發現51版裝Stylish開網頁會慢 若直接改字型為蘋方體 Median
→ abram: 也會有加粗的效果 但是不會變慢
→ abram: http://i.imgur.com/uUQFxLF.jpg
@abram 你的渲染好漂亮 顏色比較淡 但是邊緣比較平滑
系統是不是WIN10？
圖裡面看起來是蘋方的簡體字型(SC) 例如各地低溫的「低」
底部是一點 雙北的「北」左邊的豎和下面的提相接的位置
蘋方有繁體字型(TC) 繁簡二個字型都安裝的話
可以繁體中文網頁用TC 簡體網頁用SC 寫法會接近當地習慣
可惜的是沒有蘋方日文 所以用Medium字重顯示 而不用渲染
看純中文網頁沒問題 看日文網頁就少了渲染
有些網頁會中日文混合 蘋方Medium和日文Regular排在一起
Regular會顯得太細 看起來會不平均
蘋方缺少了粗體字重 只好用中粗代替粗體
蘋方中粗的粗細設計得很接近Medium
所以有時候會看不太出來網頁上使用的粗體字標題
和標準字內文的對比差異
但是用Medium字重取代直接描邊加粗 有個很大的優點
字體會比較紮實 還有筆畫比較複雜的字 單純描邊加粗
如果加得太粗 筆畫會黏在一起 變成一團黑
有合理設計處理過內白的Medium才可以避免這種問題

推 abc0922001: 效果滿不錯的，不過我粗細改為0.15px
@abc0922001 粗細會因為使用的字型種類 大小 字重
螢幕種類 解析度 DPI設定 而有不同的合適值
可以依個人喜好調整
我試過幾個螢幕 可以用 0.0125em 作為初始值慢慢往上調整

推 aeolus0829: 蘋方體在 win10 的效果比 noto 好 (有照3F的方法做)
@aeolus0829 WIN10的話不用 ForceNoHinting = 1
WIN8.1/WIN10本身有關閉Hinting的功能 GridFitMode = 1
(直接copy patch裡面的設定檔就可以了 作者都寫好了)
WIN7因為沒有這個功能 所以HiDPI字型渲染比WIN10差
patch的作者意外發現 在WIN7下如果將文字稍微旋轉的話
系統會取消文字的Hinting 所以做出了讓WIN7也可以關閉Hinting的功能
如果是用WIN8.1/WIN10 就不需要設定這個選項
據傳聞 三月中要發表的RS2字型渲染會有更重大的進步(?)

推 twistedvate: 都用stylish配webfonthttp://i.imgur.com/s8l84Eo.jp
→ twistedvate: g
→ twistedvate: http://i.imgur.com/s8l84Eo.jpg
→ twistedvate: 有點小瑕疵不過很好閱讀
→ twistedvate: 不用裝任何字體軟體
推 twistedvate: 日文渲染http://i.imgur.com/ZpOzuSN.jpg
推 abc0922001: 請問樓上，webfont是什麼？
推 abc0922001: 阿，Google到了
推 twistedvate: https://goo.gl/I1mmAB
→ twistedvate: 我是用這個
※ 編輯: mayuyu (61.219.36.126), 02/14/2017 11:27:08
→ mayuyu: @twistedvate 好像有缺字 劍心的「劍」這個字高度和其他字
→ mayuyu: 不一樣
推 abc0922001: 複製的時候，邊線好明顯，改用webfont的方式了
→ abc0922001: 仿照仿照twistedvate大分享的連結，來編stylish
推 abc0922001: 我改用noto sans tc 發現簡體字會缺字，可能要再用sc
→ abc0922001: 的吧
推 twistedvate: 因為我都用簡轉繁了沒困擾，這字型自己用下來還蠻耐
→ twistedvate: 看的啦
推 twistedvate: 真希望微軟中字字型預設能跟mac一樣…
→ twistedvate: 還是自己套樣式比較快
能否提供您用的樣式 看起來有缺字
你貼的圖片裡劍心的「劍」這個字的高度和其他字不一樣
http://i.imgur.com/ZpOzuSN.jpg
可能是設定的字型裡找不到這個日文漢字 所以系統用了其他字型替補

推 abc0922001: 回家安裝noto sans cjk tc，應該就不會缺字問題了
推 abram: 回原PO大 我是win7 但是我為了硬體加速把DirectWrite關掉
→ abram: 發現這樣跟Mactype相容性最好 速度也最快 我的蘋方體是SC的
→ abram: 但是用起來沒有覺得怪怪的 不知道哪裡可以抓到繁體的 我再
→ abram: 來試試看
@abram 啊 原來你把DirectWrite(D2D)關掉了
所以你的渲染效果是MacType的渲染效果而不是DirectWrite
難怪會那麼平滑 我用WIN10+4K都無法那麼漂亮xD
也許是因為關掉了D2D加速 所以你使用stylish渲染網頁的時候
會覺得開網頁的速度變慢
使用MacType可以將字體調整到非常粗非常銳利完全不會模糊
對比圖
DirectWrite Patch+Stroke Stylish
圖晚點補
MacType(我使用的設定)
圖晚點補

看起來可能還是MacType好一點 不過為了D2D加速
我只好放棄用MacType渲染Fx和Chrome

推 abram: 更新 我剛剛抓到蘋方繁體版了 字型如下所示 但是好像比較差
→ abram: http://i.imgur.com/NlMRg5v.jpg
→ abram: 1. 可以注意到「電」那個字的雨字旁 我比較喜歡SC和日文版
→ abram:    的雨部內部是左上右下的四個點 而非像是窘表情似的 ><
你提到的電字的寫法正是台灣的標準寫法xD
http://i.imgur.com/HHgr6fQ.png
如果不在意寫法的話 用蘋方SC取代TC完全沒問題
反過來用TC取代SC的話 會有很多簡體字無法顯示

→ abram: 2. 蘋方繁體抓到也有分中粗、中黑等六個字型 但是FX裡面卻
→ abram:    只能選蘋方繁體，沒有細項的中粗中黑可以選  用一陣子可
→ abram:    能寧可改回SC轉繁體的版本來用好了
可以用stylish指定字重
或者是安裝的時候不要裝Regular 只裝Medium
Fx選蘋方會用Medium取代Regular

推 abc0922001: 我覺得Fx渲染一直都比chrome好XD
→ abc0922001: SC版的繁體還有好幾個地方我看不慣，像辶、骨、亮，
→ abc0922001: 還是TC的好，而中文版的眾我看不慣
→ abc0922001: 更正，日文版的眾
推 kaoh08: youtube那是什麼style啊？好讚啊
@kaoh08 YouTube的樣式是這個
https://userstyles.org/styles/130610/youtube-umbra
圖晚點補

推 abc0922001: Chrome縮放100％ http://i.imgur.com/nz5vmuf.jpg
→ abc0922001: Chrome縮放135％ http://i.imgur.com/GsYAIYO.jpg
→ abc0922001: 使用Win10+Cent Browser+135％縮放
→ abc0922001: 我的Stylish設定 https://goo.gl/z09eFZ
推 ji394xu3: 其實我倒比較習慣chrome(stylish 用的字體是微軟正黑體)
→ ji394xu3: http://i.imgur.com/aYrmDJe.jpg (網頁比例125%)
→ ji394xu3: http://i.imgur.com/XsNJnh0.jpg (網頁比例110%)
→ ji394xu3: http://i.imgur.com/pLVl2I5.jpg 蘋方體 125% 也不錯
→ abc0922001: 蘋方跟微軟正黑我也喜歡
推 kaoh08: 太黑了 眼睛看了很累
太黑可以調淡一點 不要加那麼粗
D2D設定裡也可以調整對比度

推 abram: http://i.imgur.com/PXOtpGT.jpg  蘋方Regular滿搭中日文的
圖裡面的日文是明瞭體(Meiryo)而不是蘋方包含的日文假名
要強制yahoo.jp用蘋方 在選項->內容->字型->進階->語言->日文設定裡
無襯線選蘋方 取消勾選下方的「優先使用網頁的字型」
看完記得要把這個設定勾回來 不然顯示會不正常
我說的中日文混合的情況 是指日文網頁混合Arial和Meiryo
這樣漢字會使用蘋方 但假名會使用Meiryo
由於蘋方改用Medium Meiryo就會顯得比較細
所以用Medium取代Regular有些地方字體會粗細不平均

推 kaoh08: 樓上的渲染看起來比重恰好 字型也很穩重 很接近完美呢！
推 kaoh08: ji大的字型則是略勝 大量文字下閱讀較輕鬆 辨識度高
→ kaoh08: 我指蘋方體那個 想看看兩邊設定相結合
※ 編輯: mayuyu (61.219.36.116), 02/16/2017 09:58:35
推 abram:  原來看yahoo.jp還有這麼多學問 謝謝mayuyu大的教學啦～
推 abram:  更新真蘋方Regular的顯示 http://i.imgur.com/g1fg81Z.jpg
→ abram:  難怪賈伯斯靠字型就可以稱霸一方阿
推 RaRaYA: 這一帖好棒啊~~~感謝大大，之前找到的資源都好像有點久了.
推 BetaCat: 感謝這篇用起來很滿意 https://i.imgur.com/cpnqfDD.png
→ BetaCat: https://i.imgur.com/gPsJD3b.png