前端技术周刊 2018-06-01

前端快爆

• 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。