阿里媽媽前端技術週刊 2022-08-22:iconfont 新版字型平臺上線、Chrome 支援 HEVC 視訊硬解

語言: CN / TW / HK

前端快爆

  • iconfont 釋出全新的webfont 平臺,支援線上子集化(裁剪)字型。傳統的字型子集化工具速度不夠快,在子集之後,還丟失了連字、豎排等非常重要的字型特性。為此,iconfont 研發了全新的字型 子集化平臺 ,不僅可以 保留連字、豎排 等特性,甚至還支援對 可變字型的子集 ,這是國內首家支援此技術的線上平臺。子集後的字型檔案通常只有幾 KB 到幾十 KB,這取決於字元數量的多少,但相比於原始的 TTF 或 OTF 檔案,體積將大大減小,從而實現網頁字型的秒載入。
iconfont 線上子集化(裁剪)字型 https://www.zhihu.com/video/1545142331149611008
  • Chrome 104 釋出,主要帶來以下新功能:
    • 支援了 CSS Media Queries Level 4 中的新語法
      • 比較運算子 =><>=<= ,新語法除了更加簡短易懂,還具有更加準確的優勢。此前Firefox 63 已經支援,在不支援的瀏覽器,可以使用 PostCSS 外掛 postcss-media-minmax 來相容。
/* 之前 */
@media (width: 200px) { }
@media (min-width: 200px) { }
@media (min-width: 200px) and (max-width: 900px) { }

/* 現在 */
@media (width = 200px) { }
@media (width >= 200px) { }
@media (200px <= width <= 900px) { }
  • 支援了 notor 、巢狀語法
@media not (width: 300px) { }
@media (width: 300px) or (width: 320px) { }
  • 支援在 @media 中使用 calc() 等計算函式。
@media (width <= calc(100% - 20px)) { }
/* 同樣適用於舊的語法 */
@media (max-width: calc(100% - 20px)) { }
    • 支援了 CSS object-view-box 屬性,可以對 img 等替換元素進行原生的裁剪、縮放等操作。
    • 實驗性支援了硬體解碼 HEVC(H.265) 視訊格式,最高支援 8K HDR。目前需要通過 --enable-features=PlatformHEVCDecoderSupport 來啟用。值得一提的是,這個功能是由國人來實現的,分別是來自位元組的朱思達和來自英特爾的 Jianlin Qiu。 檢視詳細的啟用方法
    • 支援了 自定義格式的非同步剪貼簿 API ,這允許開發者在剪貼簿中讀取和寫入任意未經清理的資料格式,這將更加方便與非 Web 平臺標準的格式進行互動,例如 word 的 docx 格式。詳見文章。
    • Expires/Max-Age 屬性上限 :當 cookie 設定有明確的 Expires/Max-Age 屬性時,該值現在將被限制為不超過 400 天。此前沒有這些限制,cookie 的過期時間可能會長達數千年。
    • 支援了三個新的 獨立的 transform 屬性translate , rotatescale ,使開發人員可以更簡單的建立 transform 動畫,而無需考慮在 transform 屬性中的互動關係。此前 Safari 14.1、Firefox 72 已經支援。
  • Deno 即將迎來重大變革
    • 團隊一直在通過更新降低 Deno 對 npm 包的匯入門檻,預計未來三個月內,80% 到 90% 的 npm 包都能在 Deno 中執行。
    • Deno 的下個版本將包含新的 HTTP 伺服器,這也是有史以來速度最快的 JavaScript Web 伺服器,外部函式介面(FFI)也迎來了振奮人心的更新。

點評:或許真的是被 bun 刺激到了?

  • Firefox Nightly 105 中,實驗性支援了 COLRv1 向量彩色字型格式(Demo),需要開啟 gfx.font_rendering.colr_v1.enabled Flag, 此前已經在Chrome 98 中實現。同時還在 @font-faceurl 屬性中支援了新的 tech() 函式,用來選擇具體的字型技術。
  • 從 FFmpeg 5.1 開始,正式支援JPEG XL 和AVIF(Chrome 85+、Firefox 93+、Safari 16+) 圖片格式,二者對比如下:
    • AVIF 與其直接競爭者 JPEG XL相比有如下優勢:
      • 在非常低的保真度(libjpeg q30 及以下)下壓縮率提高 30%
      • 如果你已經有了 AV1 解碼器,支援 AVIF 的解碼器體積很小
      • 非常適合動畫,可以用來取代 GIF(因為這是一個完整的視訊編解碼器)
    • JPEG XL 則有如下優勢:
      • 在最重要的保真度(libjpeg q60 及更高版本)上的壓縮率提高了 20-40%
      • 漸進式解碼,使其非常適合 Web 上載入(Chrome 94 也實現了AVIF 的漸進解碼)
      • 無損 JPEG 再壓縮
      • 更高的位深度(用於攝影)
      • 編碼速度提高 10 倍
      • 最佳無失真壓縮格式
      • 整體而言解碼器尺寸更小
      • 支援 CMYK 和 Spot Color(專色通道)
      • 最小的標頭檔案開銷

優秀 Demo