一直以来，在 Web 布局中都是以方方正正的矩形向用户展示 UI 效果，而且众多 Web 开发者的意识中也是如此，Web 的布局是无法打破矩形排列的限制！但 Web 技术的发展速度是惊人的，每天都有新的东西出现在我们的眼前。就在这短短的几年时间内，用于 Web 布局的新特特别的多。换句话说，如果今天设计师跟你说：“亲，整一个类似杂志或报刊类的布局吧”！你会爽快的说 OK! 即，使用现在的新特性可以打破矩形框的限制，让你在 Web 上实现像杂志一样的排版布局。

前两个有关于 CSS Grid 案例，主要介绍了如何使用 CSS Grid 来构建 重叠布局 和 Full-Bleed 布局。今天我们来一起再来看另一个由 CSS Grid 构建的网格布局，即 交叉布局。通过这个案例来更好的帮助我们更进一步理解 CSS Grid 的相关属性在实际中（Web 布局）如何使用。

前面花了三篇的篇幅（Web Fonts vs. 系统字体、FOUT、FOIT 和 FOFT 和 Web Fonts 字体加载策略）围绕着 Web Fonts 的优化做了些探讨。但这些优化手段都还是会引起 Web 布局偏移。不过，CSS 的一些新特性，即 F-mods（字体度量覆盖描述符）来覆盖字体的一些度量参数，让系统字体字体（备用字体）和 Web Fonts 更接近，尽可能的减少布局偏移。

前面的篇幅（Web Fonts vs. 系统字体 和 FOUT, FOIT 和 FOFT）告诉我们，使用 Web Fonts 会造成布局偏移，页面渲染时会发生重排和重绘。这会让页面在渲染时变得更慢，用户体验会更差。如果我们要对此进行优化，减少 Web Fonts 引起的布局偏移，就要从字体加载方面去做相应的优化策略。我们接下来主要围绕着字体加载策略来展开今天的话题，感兴趣的同学请继续往下阅读。

在上一节中，我们一起探讨了 Web Fonts 和 系统字体之间的差异。在这一部分我们一起来探讨使用 Web Fonts 时，浏览器加载 Web Fonts 和渲染 Web Fonts 的策略。其实，聊 Web Fonts 就离不开 FOUT 、FOIT 和 FOFT 话题，特别是 FOUT 和 FOIT 。简单地说，FOUT、FOIT 和 FOFT 都是浏览器渲染文本的三种不同的表现，特别是 Web Fonts 被引入到 Web 中时，浏览器对 FOUT 和 FOIT 的优化就没有停止过。

Web Fonts 在 Web 中的使用已随处可见，比如聚划算页面中的 价格 使用的就是 Web Fonts（即 AlibabaSans102-Bd。虽然使用 Web Fonts 能在视觉上达到更好的效果（满足设计师的需求），但对于 Web 性能是有影响的，给用户的体验也是有影响的。如果Web Fonts 未加载，浏览器通常会延迟任何使用 Web Fonts 的文本（比如聚划算的价格）。这在许多情况下，将延迟 FCP（First Contenttful Paint），在某些情况下也会延迟 LCP（Largest Contentful Paint）。甚至更为严重的是导致布局偏移（Layout Shifts），会触发页面的重排和重绘（Web Fonts 和它的备用字体或系统字体在页面上占用不同的空间）， 也会触发 CLS（Cumulative Layout Shift）。更令人感到头痛的是，Web Fonts 造成布移偏移的原因是 FOUT（Flashes Of Unstyled Text），而且 FOUT 还是业内公认的难以解决的。简单地说，Web Fonts 对视觉效果是有显著帮助，但对Web性能和用户体验是有严重影响。如果在实际业务中能避免 Web Fonts 的使用应该尽可能的不用，如果实在不能避免，那就要在使用 Web Fonts时做一些策略上的选择。接下来，我们围绕着 Web Fonts 的使用和性能优化来展开讨论。

在接到邀请在团队分享有关于与 W3C 规范相关的话题时，就我个人而言还是很虚的。虽然从事 Web 前端开发已有近十年，接触 W3C 规范也有多年，但要出来聊与 W3C 规范相关话题，还是没有足够多的信心。在开始写 PPT 之前，我特意咨询了好好友 @小倩 小姐姐，并且参考了她分享的《走进W3C》。虽然对 W3C 没有全面的认识，但我还是想从我个人的角度来看和思考 W3C 规范。希望接下来的分享对初次接触 W3C 或想深入 W3C 的同学有所帮助。

Full-Bleed 是印刷界中的一个概念，被称为 全出血，即在印刷中，我们有出血量，这是纸张被修剪的地方以外的区域。正因如此，印刷设计师习惯于在设计工作中考虑出血量。我们通过设置安全区域来做到这一点。这几年，这种被称为“全出血”的概念也运用到 Web 的布局中。就是在受限宽度的一列中使用全宽元素的布局，比如在较窄的一列文本中使用一个边缘到边缘的图像。在社区中，也有人把这种布局效果称为 Full-Width 布局，也有人称为 Edge-To-Edge 布局。说实话，在Web中实现这种布局效果，已不是难事，社区中有很多种不同的技术方案，都可以达到这个布局效果。不过，今天我们以不同的角度来思考这个问题！

如果一直是跟着 CSS Grid 布局这个系列到这里，你应该还记得，在 CSS Grid 布局中，我们可以通过网格项目放置的方式，让不同的元素重叠在一起，并且通过 CSS 的 z-index 来控制网格项目在 z 轴上的层叠顺序。也就是说，以往需要使用 CSS 的 position 的绝对定位（absolute）来实现的布局，现在可以直接使用 CSS Grid 来解决。在这一节，我们主要来看如何使用 CSS Grid 实现元素叠加的布局效果。

你可能时常会在平时的开发中碰到文字显示在图片上的 UI 效果。在某些情况下，因为图片的不同，文本放置在图片上会让文本变得难于易读。针对于这种情况，不管是设计师还是Web开发者，都会有一些解决方案，比如在图片和文本之间添加一个渐变覆盖，或者有一个有色的背景，或给文本添加阴影等让文本变得更易于阅读。在这篇文章中，和大家一起来讨论这些解决方案，如果你感兴趣的话，请继续往下阅读。