图片是 Web 页面上最重要的媒体元素，它可有效的向用户传递信息，但在 Web 的近三十年发展历史中，它们的适应性一点都不强。关于图片的一切，比如图片的尺寸、格式和裁剪都被其单一的 src 属性设定像顽石一样的固定下来。特别是当高清屏幕（高分辨率屏幕）和 Web 响应式设计的到来，Web 开发者更进一步感受到了图片在 Web 上使用的限制。庆幸的是，近几年随着 Web 技术的发展，<img> 元素也得到进一步的改变，它不再局限于 src 属性引入图片，也不在局限于 width 和 height 属性设置图片尺寸。Web 开发者可以使用新的 srcset 和 sizes 属性让图片更好的适应于高分辨率的屏幕和响应式设计。除此之外，HTML5 还提供了一个新的元素标记 <picture> 来更改显示的图片以适应不同的图片显示尺寸，而且还可以在background-image 使用 image-set() 函数为不同DPR屏幕显示不同图片。虽然在《聊聊img元素》一文中详细介绍过 <img> 的使用，而且在该文中有介绍过 srcset、sizes 以及 HTML5 的 <picture> 的使用，但并无法很好的帮助大家在响应式设计中使用图片。为了更好的了解和掌握响应式图片在Web中的使用，将和大家一起深度探讨这方面的话题。希望对大家在使用图片的时候有所帮助。

响应式图片在响应式 Web 设计中一直以来都是较为头疼的地方，除了图片的适配难于处理之外，还有就是图片的加载问题。庆幸的是，HTML 给 <img> 标签新增了srcset和sizes属性，我们可以在这两个属性上提供足够的信息，来告诉浏览器，从而让浏览器自已根据所对应的环境加载最合适的图片。那么在这一部分，我们主要来探讨 <img> 的 srcset和sizes属性，以及了解浏览器是如何根据这些信息来选择合适的图片。如果你对这方面知识感兴趣的话，请继续往下阅读。

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

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

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

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 的使用和性能优化来展开讨论。

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

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

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