PTT數位生活區 / Browsers (瀏覽器)

[字型] 字型渲染2017

看板Browsers (瀏覽器)作者 ((・ω・)ノ)時間9年前 (2017/02/12 23:17), 9年前編輯推噓32(32推 0噓 48→)
留言80則, 12人參與, 最新討論串1/1
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
→
02/12 23:20, , 1F
mactype補丁
02/12 23:20, 1F
→
02/12 23:21, , 3F
設定ForceNoHinting = 1 可以在WIN7關閉Hinting
02/12 23:21, 3F
推
02/12 23:59, , 4F
不錯，還不知道新增了這個CSS，可以更新到killserfi作為
02/12 23:59, 4F
→
02/12 23:59, , 5F
選項
02/12 23:59, 5F
推
02/13 01:40, , 6F
實用推
02/13 01:40, 6F
推
02/13 01:55, , 7F
唔…我用了之後有些字型會有疊影的狀況出現？
02/13 01:55, 7F
→
02/13 01:55, , 8F
02/13 01:55, 8F
→
02/13 01:55, , 9F
在其他網站中英文字型有些也出現相同的狀況
02/13 01:55, 9F
@hohiyan 看起來像是字型混合顯示的時候渲染發生問題 重新開機試試看 如果有使用patch 重新覆蓋dll和設定檔後 重開幾次清掉快取試試 覆蓋前要先關閉mactype (dll要覆蓋到mactype安裝目錄和windows系統目錄 注意EasyHK32要放SysWOW64 EasyHK64要放到System32)
推
02/13 09:23, , 10F
推麻友
02/13 09:23, 10F
推
02/13 09:45, , 11F
推
02/13 09:45, 11F
→
02/13 09:45, , 12F
想問麻友大火狐的左邊側欄是用哪個套件呢?
02/13 09:45, 12F
→
02/13 14:04, , 13F
左邊是工具列 Vertical Toolbar
02/13 14:04, 13F
→
02/13 14:04, , 14F
我渲染顯示是正常的 換個字體試試看 還有Fx版本？
02/13 14:04, 14F
→
02/13 14:04, , 15F
Fx雖然48開始支援 -webkit 但是預設是關閉的
02/13 14:04, 15F
→
02/13 14:05, , 16F
要在about:config裡面打開layout.css.prefixes.webkit
02/13 14:05, 16F
→
02/13 14:05, , 17F
49以後預設值才是打開的 caniuse則是標50以後才支援stroke
02/13 14:05, 17F
→
02/13 14:05, , 18F
所以最好換到50以後的版本測試
02/13 14:05, 18F
更正 我眼殘 can i use 也是寫49版開始支援-webkit-text-stroke 48版要調整layout.css.prefixes.webkit
推
02/13 20:42, , 19F
發現51版裝Stylish開網頁會慢 若直接改字型為蘋方體 Median
02/13 20:42, 19F
→
02/13 20:43, , 20F
也會有加粗的效果 但是不會變慢
02/13 20:43, 20F
→
02/13 20:43, , 21F
02/13 20:43, 21F
@abram 你的渲染好漂亮 顏色比較淡 但是邊緣比較平滑 系統是不是WIN10？ 圖裡面看起來是蘋方的簡體字型(SC) 例如各地低溫的「低」 底部是一點 雙北的「北」左邊的豎和下面的提相接的位置 蘋方有繁體字型(TC) 繁簡二個字型都安裝的話 可以繁體中文網頁用TC 簡體網頁用SC 寫法會接近當地習慣 可惜的是沒有蘋方日文 所以用Medium字重顯示 而不用渲染 看純中文網頁沒問題 看日文網頁就少了渲染 有些網頁會中日文混合 蘋方Medium和日文Regular排在一起 Regular會顯得太細 看起來會不平均 蘋方缺少了粗體字重 只好用中粗代替粗體 蘋方中粗的粗細設計得很接近Medium 所以有時候會看不太出來網頁上使用的粗體字標題 和標準字內文的對比差異 但是用Medium字重取代直接描邊加粗 有個很大的優點 字體會比較紮實 還有筆畫比較複雜的字 單純描邊加粗 如果加得太粗 筆畫會黏在一起 變成一團黑 有合理設計處理過內白的Medium才可以避免這種問題
推
02/14 09:04, , 22F
效果滿不錯的，不過我粗細改為0.15px
02/14 09:04, 22F
@abc0922001 粗細會因為使用的字型種類 大小 字重 螢幕種類 解析度 DPI設定 而有不同的合適值 可以依個人喜好調整 我試過幾個螢幕 可以用 0.0125em 作為初始值慢慢往上調整
推
02/14 09:25, , 23F
蘋方體在 win10 的效果比 noto 好 (有照3F的方法做)
02/14 09:25, 23F
@aeolus0829 WIN10的話不用 ForceNoHinting = 1 WIN8.1/WIN10本身有關閉Hinting的功能 GridFitMode = 1 (直接copy patch裡面的設定檔就可以了 作者都寫好了) WIN7因為沒有這個功能 所以HiDPI字型渲染比WIN10差 patch的作者意外發現 在WIN7下如果將文字稍微旋轉的話 系統會取消文字的Hinting 所以做出了讓WIN7也可以關閉Hinting的功能 如果是用WIN8.1/WIN10 就不需要設定這個選項 據傳聞 三月中要發表的RS2字型渲染會有更重大的進步(?)
推
02/14 09:53, , 24F
都用stylish配webfonthttp://i.imgur.com/s8l84Eo.jp
02/14 09:53, 24F
→
02/14 09:53, , 25F
g
02/14 09:53, 25F
→
02/14 09:54, , 26F
02/14 09:54, 26F
→
02/14 09:55, , 27F
有點小瑕疵不過很好閱讀
02/14 09:55, 27F
→
02/14 09:55, , 28F
不用裝任何字體軟體
02/14 09:55, 28F
推
02/14 10:11, , 29F
02/14 10:11, 29F
推
02/14 10:27, , 30F
請問樓上，webfont是什麼？
02/14 10:27, 30F
推
02/14 10:44, , 31F
阿，Google到了
02/14 10:44, 31F
推
02/14 11:06, , 32F
02/14 11:06, 32F
→
02/14 11:07, , 33F
我是用這個
02/14 11:07, 33F
※ 編輯: mayuyu (61.219.36.126), 02/14/2017 11:27:08
→
02/14 11:40, , 34F
@twistedvate 好像有缺字 劍心的「劍」這個字高度和其他字
02/14 11:40, 34F
→
02/14 11:40, , 35F
不一樣
02/14 11:40, 35F
推
02/14 11:59, , 36F
複製的時候，邊線好明顯，改用webfont的方式了
02/14 11:59, 36F
→
02/14 12:00, , 37F
仿照仿照twistedvate大分享的連結，來編stylish
02/14 12:00, 37F
推
02/14 13:19, , 38F
我改用noto sans tc 發現簡體字會缺字，可能要再用sc
02/14 13:19, 38F
→
02/14 13:19, , 39F
的吧
02/14 13:19, 39F
推
02/14 13:24, , 40F
因為我都用簡轉繁了沒困擾，這字型自己用下來還蠻耐
02/14 13:24, 40F
→
02/14 13:24, , 41F
看的啦
02/14 13:24, 41F
推
02/14 13:31, , 42F
真希望微軟中字字型預設能跟mac一樣…
02/14 13:31, 42F
→
02/14 13:32, , 43F
還是自己套樣式比較快
02/14 13:32, 43F
能否提供您用的樣式 看起來有缺字 你貼的圖片裡劍心的「劍」這個字的高度和其他字不一樣 http://i.imgur.com/ZpOzuSN.jpg
可能是設定的字型裡找不到這個日文漢字 所以系統用了其他字型替補
推
02/14 13:42, , 44F
回家安裝noto sans cjk tc，應該就不會缺字問題了
02/14 13:42, 44F
推
02/14 14:23, , 45F
回原PO大 我是win7 但是我為了硬體加速把DirectWrite關掉
02/14 14:23, 45F
→
02/14 14:24, , 46F
發現這樣跟Mactype相容性最好 速度也最快 我的蘋方體是SC的
02/14 14:24, 46F
→
02/14 14:25, , 47F
但是用起來沒有覺得怪怪的 不知道哪裡可以抓到繁體的 我再
02/14 14:25, 47F
→
02/14 14:25, , 48F
來試試看
02/14 14:25, 48F
@abram 啊 原來你把DirectWrite(D2D)關掉了 所以你的渲染效果是MacType的渲染效果而不是DirectWrite 難怪會那麼平滑 我用WIN10+4K都無法那麼漂亮xD 也許是因為關掉了D2D加速 所以你使用stylish渲染網頁的時候 會覺得開網頁的速度變慢 使用MacType可以將字體調整到非常粗非常銳利完全不會模糊 對比圖 DirectWrite Patch+Stroke Stylish 圖晚點補 MacType(我使用的設定) 圖晚點補 看起來可能還是MacType好一點 不過為了D2D加速 我只好放棄用MacType渲染Fx和Chrome
推
02/14 14:33, , 49F
更新 我剛剛抓到蘋方繁體版了 字型如下所示 但是好像比較差
02/14 14:33, 49F
→
02/14 14:33, , 50F
02/14 14:33, 50F
→
02/14 14:34, , 51F
1. 可以注意到「電」那個字的雨字旁 我比較喜歡SC和日文版
02/14 14:34, 51F
→
02/14 14:35, , 52F
的雨部內部是左上右下的四個點 而非像是窘表情似的 ><
02/14 14:35, 52F
你提到的電字的寫法正是台灣的標準寫法xD http://i.imgur.com/HHgr6fQ.png
如果不在意寫法的話 用蘋方SC取代TC完全沒問題 反過來用TC取代SC的話 會有很多簡體字無法顯示
→
02/14 14:36, , 53F
2. 蘋方繁體抓到也有分中粗、中黑等六個字型 但是FX裡面卻
02/14 14:36, 53F
→
02/14 14:37, , 54F
只能選蘋方繁體，沒有細項的中粗中黑可以選 用一陣子可
02/14 14:37, 54F
→
02/14 14:37, , 55F
能寧可改回SC轉繁體的版本來用好了
02/14 14:37, 55F
可以用stylish指定字重 或者是安裝的時候不要裝Regular 只裝Medium Fx選蘋方會用Medium取代Regular
推
02/14 15:07, , 56F
我覺得Fx渲染一直都比chrome好XD
02/14 15:07, 56F
→
02/14 15:10, , 57F
SC版的繁體還有好幾個地方我看不慣，像辶、骨、亮，
02/14 15:10, 57F
→
02/14 15:10, , 58F
還是TC的好，而中文版的眾我看不慣
02/14 15:10, 58F
→
02/14 15:11, , 59F
更正，日文版的眾
02/14 15:11, 59F
推
02/14 16:12, , 60F
youtube那是什麼style啊？好讚啊
02/14 16:12, 60F
@kaoh08 YouTube的樣式是這個 https://userstyles.org/styles/130610/youtube-umbra 圖晚點補
推
02/14 20:54, , 61F
02/14 20:54, 61F
→
02/14 20:55, , 62F
02/14 20:55, 62F
→
02/14 20:57, , 63F
使用Win10+Cent Browser+135％縮放
02/14 20:57, 63F
→
02/14 20:57, , 64F
我的Stylish設定 https://goo.gl/z09eFZ
02/14 20:57, 64F
推
02/15 10:33, , 65F
其實我倒比較習慣chrome(stylish 用的字體是微軟正黑體)
02/15 10:33, 65F
→
02/15 10:34, , 66F
(網頁比例125%)
02/15 10:34, 66F
→
02/15 10:36, , 67F
(網頁比例110%)
02/15 10:36, 67F
→
02/15 11:22, , 68F
蘋方體 125% 也不錯
02/15 11:22, 68F
→
02/15 16:36, , 69F
蘋方跟微軟正黑我也喜歡
02/15 16:36, 69F
推
02/16 05:59, , 70F
太黑了 眼睛看了很累
02/16 05:59, 70F
太黑可以調淡一點 不要加那麼粗 D2D設定裡也可以調整對比度
推
02/16 07:33, , 71F
蘋方Regular滿搭中日文的
02/16 07:33, 71F
圖裡面的日文是明瞭體(Meiryo)而不是蘋方包含的日文假名 要強制yahoo.jp用蘋方 在選項->內容->字型->進階->語言->日文設定裡 無襯線選蘋方 取消勾選下方的「優先使用網頁的字型」 看完記得要把這個設定勾回來 不然顯示會不正常 我說的中日文混合的情況 是指日文網頁混合Arial和Meiryo 這樣漢字會使用蘋方 但假名會使用Meiryo 由於蘋方改用Medium Meiryo就會顯得比較細 所以用Medium取代Regular有些地方字體會粗細不平均
推
02/16 08:41, , 72F
樓上的渲染看起來比重恰好 字型也很穩重 很接近完美呢！
02/16 08:41, 72F
推
02/16 08:48, , 73F
ji大的字型則是略勝 大量文字下閱讀較輕鬆 辨識度高
02/16 08:48, 73F
→
02/16 08:50, , 74F
我指蘋方體那個 想看看兩邊設定相結合
02/16 08:50, 74F
※ 編輯: mayuyu (61.219.36.116), 02/16/2017 09:58:35
推
02/16 15:29, , 75F
原來看yahoo.jp還有這麼多學問 謝謝mayuyu大的教學啦～
02/16 15:29, 75F
推
02/16 15:38, , 76F
更新真蘋方Regular的顯示 http://i.imgur.com/g1fg81Z.jpg
02/16 15:38, 76F
→
02/16 15:39, , 77F
難怪賈伯斯靠字型就可以稱霸一方阿
02/16 15:39, 77F
推
02/16 17:36, , 78F
這一帖好棒啊~~~感謝大大，之前找到的資源都好像有點久了.
02/16 17:36, 78F
推
02/16 17:59, , 79F
感謝這篇用起來很滿意 https://i.imgur.com/cpnqfDD.png
02/16 17:59, 79F
→
02/16 18:00, , 80F
02/16 18:00, 80F
‣ 更多 mayuyu 的文章
文章代碼(AID): #1Oe7oa-Y (Browsers)
Browsers 近期熱門文章
更多 近期熱門文章 >>
PTT數位生活區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 mayuyu 的文章
文章代碼(AID): #1Oe7oa-Y (Browsers)