在做 GithubProfile 項目的時候,使用了數字動畫展示的效果,如My GithubProfile頁面中的commits,stars以及followers數字。實際使用中,由於數字字型不等寬,造成在數字增長動畫時很明顯的震顫,體驗非常不好。font-feature-settings 是CSS的進階特性,用來提供對OpenType字型圖形展示調節。本文主要和大家介紹使用CSS3 font-feature-settings特性減除字型動畫震顫效果,需要的朋友參考下吧,希望能協助到大家。
這裡我最終使用了CSS的 font-feature-settings
的屬性來解決了這一問題,先來看解決前後的效果對比圖。
font-feature-settings
font-feature-settings
是CSS的進階特性,用來提供對OpenType字型圖形展示調節, MDN·font-feature-settings 。
首先CSS3提供了一組與OpenType字型特性顯示映射的屬性和值,這裡我們首先利用了 font-variant-numeric
,並將其值設為 tabular-nums
,這表示要求字型的數位影像保持尺寸一致,並像在表格中一樣對齊,這等同於OpenType字型中的 tnum
。
當沒有對應的屬性對應時,我們則可以使用 font-feature-settings
屬性,這裡我們直接將其設為要求的OpenType屬性 tnum
。
font-feature-settings
和 font-variant-numeric
屬性可以同時應用,它們其中任何之一都可以達到相同的效果,但是為了更多的相容支援,對它們同時做了定義。
相容性
font-feature-settings相容性:
font-variant-numeric相容性:
在CanIUse資料庫中未找到結果,貼上MDN的相容性說明
可以看出 font-feature-settings
的主流瀏覽器安全色支援比較好,所以使用時優先利用該特性。
Demo對比
這裡給出 montserrat
字型在開啟該特性前後的效果