如何避免 web font 在瀏覽器中的鋸齒現象,製作字型時有沒有什麼方法可以優化字型的細節?

時間 2021-06-01 22:53:40

1樓:齊凡

每種瀏覽器對web font檔案都有各自的喜好,IE對.eot支援得比較好,一般不會有鋸齒,Firefox對.woff支援得比較好,效果堪稱完美。

chrome對.svg支援得比較好,一般不會有鋸齒,同時chrome也支援.woff,不過對.

woff支援得比較差。

一般產生鋸齒的情況都出在以chrome為核心的瀏覽器上,如果@font-face語句裡有.woff也有.svg,chrome會優先使用.

woff。不可避免地會產生鋸齒。如果把.

woff檔案引用去掉,chrome就會使用.svg檔案,就不會產生鋸齒了。但這樣頁面在Firefox瀏覽器下就會有問題。

試試有字型檔(www.youziku.com)吧,它是有檢測瀏覽器版本,如果是chrome瀏覽器自動推送.svg

2樓:Belleve

可能唯一的方法是使用復合字型,西文用 TTF,用 ttfautohint 生成間距資料;漢字用 CFF,不要加 PS hint。

但是這辦法最近在 chrome 裡不好用了,因為 chrome 裡 CFF 字型的 Gamma 會變得很奇怪。

3樓:梁海

中文 web font 目前還不怎麼可用,所以以下都針對這兩年越來越成熟的西文 web font 來說:Mac OS X 對一切字型一視同仁,web font 的渲染效果和系統自帶字型一樣好。

Windows 裡字型渲染的「鋸齒」結果主要都是因為:1. 一些 TrueType 輪廓字型缺乏必要的 hinting [1];2.

ClearType 渲染的 TrueType 輪廓字型天生就這德行。

如果沒有 hinting,正文本型無法在 Windows 裡清晰顯示 [1],不論 ClearType 開啟與否。

Windows 字型渲染風格的重點就是黑白分明。ClearType 之前(或不開啟 ClearType 的時候)由小字號時的點陣實現(大字型大小時用平滑的灰度抗鋸齒),ClearType 時代由 ClearType 實現(無論大小字型大小,一律亞畫素抗鋸齒,但抗鋸齒風格很粗糙,大字型大小時曲線上的鋸齒非常明顯——「ClearType is effectively a hybrid of subpixel and black-and-white rendering」[2])。所以說「ClearType 渲染的 TrueType 輪廓字型天生就這德行」。

因為 ClearType 對曲線的抗鋸齒質量實在太差,在 web font 領域,專業的用於大字型大小顯示的標題字型(英語稱「display face/font」)會提供 PostScript 輪廓的版本。因為 ClearType 不支援 PostScript 輪廓的字型,所以系統會對其使用傳統的灰度抗鋸齒,這樣效果比 ClearType 好 [3]。而 DirectWrite 可以處理 PostScript 輪廓的字型,並且效果很不錯。

所以,為了讓 web font 在 Windows 上顯示得好一些:對於正文本型,一定要有 hinting。

對於標題字型,一定要用 PostScript 輪廓。

這兩條倒不算「細節」。前一條是多年來為 Windows 提供字型時的基本要求,後一條是將業界標準的主流技術用在 Windows 的落後技術上來做 hack。

似乎 web font 服務商都不怎麼標註字型是否有 hinting 以及是 TrueType 輪廓還是 PostScript 輪廓,最好選擇字型的時候留意一下。來自 FontFont 的 FF * Web 系列字型都是為螢幕顯示優化字形並人工 hint 的版本,很值得考慮。[4]

[1] 看 Typekit 的〈Skolar Web hinted for better screen rendering〉這篇日誌裡的對比圖: http://

[2]〈A Closer Look At Font Rendering〉這篇文章介紹了一些字型渲染、web font 的基礎知識: http://www.

[3] 看 Typekit 的〈Improved font rendering on Windows〉這篇日誌裡的對比圖: http://

[4] FontFont 在 Typekit 的頁面: https://

火狐瀏覽器 Firefox 好還是谷歌瀏覽器 Chrome 好?

飛雪連天射白鹿 我是習慣用谷歌了 之前分享過谷歌瀏覽器的一些實用技巧。那些你可能不知道的谷歌瀏覽器實用技巧 Chrome 瀏覽器擴充套件神器油猴 實用油猴指令碼推薦,讓你的谷歌瀏覽器更強大 更好用的還是谷歌有很多優秀的Chrome擴充套件。那些有趣 實用的 Chrome 擴充套件神器 昌維 這個問題...

Microsoft Edge 瀏覽器如何匯出收藏夾?

不用那麼複雜,Edge瀏覽器的收藏夾可以在同一微軟賬戶間同步。如果是新安裝了系統或是Edge瀏覽器,登入使用後第二天就會同步,瀏覽器的收藏夾裡就會有之前的收藏內容。此外,Win10的14965.1001預覽版的Edge瀏覽器已經可以匯出收藏夾為.html檔案,供其它瀏覽器使用。 import jso...

如何遮蔽 Microsoft Edge 瀏覽器(2021 年 8 月 24 日)新建標籤頁的廣告?

cy yx 安裝擴充套件New Tab Changer New Tab Changer Microsoft Edge Addons 然後把新標籤頁設為chrome search local ntp local ntp.html 就行了效果圖 雲生 那為啥不用拓展呢,這是我的標籤頁,這個拓展可以說是非...