字體（技術周刊2018-06-01）

來自專欄阿里媽媽前端快爆27 人贊了文章

前端快爆

• Firefox 62 正式開啟 Shadow DOM，此前 Chrome 64、Safari 11 均已支持。 ??
• React 16.4.0 發布，主要更新引入了 Pointer Event 的支持，getDerivedStateFromProps 將受到 setState 的影響以符合之前的 componentWillReceiveProps 實現。??
• Node.js 「之父」最近開源了新作品 deno，它是一個基於 V8 的 TypeScript 運行時，但目標並不是取代 Node.js，而是擁抱瀏覽器生態。??

點評：遺憾的是，國內很多開發者在項目 issue 上各種秀下限。「issue 是用來做的，不是用來玩的」，一首涼涼送給你們??……

• 相愛相殺十年，彭博社最新消息稱微軟已同意收購 GitHub。據稱，微軟和 GitHub 洽談已有好幾年，最近他們開始就合作正式進行談判，進一步討論收購事宜。目前雙方協議的條款尚未公布。GitHub 在 2015 年最後一輪融資中估值 20 億美元。??

點評：恭喜微軟喜提全球最大的「同性交友」網站，GitLab 在第一時間發來賀電，同時在首頁也推出了遷移指南??。

• CSS 驚現 mix-blend-mode 漏洞，黑客誘導用戶訪問一個惡意網頁，裡面嵌入 iframe 載入第三方網頁，然後在 iframe 之上疊加大量的 1*1像素的圖層，根據渲染時間差異，算出原始像素的顏色。以 Facebook 為例，20秒就可以拿到用戶名。如果花上20分鐘左右的時間的話，就可以獲取頭像。Chrome 63和 Firefox 60 已經修復該問題，解決方案就是矢量化 mix-blend-mode，Safari 因為已經是矢量化的了，所以不受影響。??

點評：IE 和 Edge 目前完全不受影響，因為它們壓根就不支持（滑稽??）

前端觀點

為什麼在設計 CSS 特性的時候需要考慮性能？

提問者指出，如果設計師一定要達成一個效果，他只有兩個選擇：用 CSS 原生特性，或者用 JS 實現。而 JS 幾乎總是比原生 CSS 慢的，既然如此，為什麼添加 CSS 特性還需要考慮性能問題呢？說說你的看法吧！

點評：可能國外不是九年義務教育，真的很秀。

優秀 Demo

• CSS 手錶動畫

• 搜索圖標動畫

專題：字體

字體匹配

• PC 推薦配置：font-family: "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; ref：如何保證網頁顯示為最高質量黑體？
• 移動推薦配置：font-family: system-ui, PingFang SC, miui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, sans-serif ref：天貓超市的 Mobile Web 極致體驗
• Font.css：各平台的黑體、宋體、仿宋、楷體的兼容方案，和各平台兼容字體測試。
• 字體漫談 ：詳細介紹從字體的分類到 CSS 中字體匹配的演算法。
• 系統中默認存在的字體列表：Windows、Mac OS。

WebFont

Font：

• 圖標字體 iconfont
• Google WebFont

字體格式：

• 在線轉換各種字體格式：Webfont generator、Font Squirrel
• 中文雲字體服務提供商：justfont、方正字型檔、有字型檔

中文字體 Subset：

• 中文字體其實也可以用在網頁上的，介紹了中文 Subset 服務
• 字蛛：提供了中文 Subset 服務

渲染

• 對比柵格化技術
• Kerning：font-kerning
• 字形異體

字體排印

• 中文排版需求：W3C 規範。
• 目前 CSS 實現豎排文本較為通用的方式是什麼？
• 平面排版時，運用哪些方法可以突出中文的美感？
• 中英文混排時中文與英文之間是否要有空格？
• 為什麼在知乎上表引用時，用直角引號（「」）而不是彎引號（「」）？
• 寫給大家看的中文排版指南
• 新時代編程字體推薦：碼農最愛
• 「後扁平化時代」的 i18n 和 L10n
• 縱橫對齊不是現代方法
• 【字裡行間 Chapter 1 從無襯線字體的故事說起】: 系列文章，詳細介紹了中英文無襯線字體

本期編輯：@壹絲，審閱：humphry

推薦閱讀：