前端技術週刊 2018-06-01

前端快爆

• Firefox 62 正式開啓 Shadow DOM，此前 Chrome 6四、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。