optional 效果和fallback几乎一样，都是先在极短的时间内文本不可见，然后再自定义字体没有加载好之前使用后备字体。不过optional选项可以让浏览器自由决定是否使用甚至加载自定义字体。选择权交给浏览器的原因是，当用户的网络环境不好的时候，加载字体也许并不是一个好的选择。当这些自定义字体不影响网页的品牌形象或者无碍设计的时候，这个值可能是个很好的选择。
@font-face {
font-family: AmazingFont;
src: url('/fonts/amazingfont.woff2') format('woff2'),
url('/fonts/amazingfont.eot') format('eot');
font-display: fallback;
}
h1 {
font-family: AmazingFont, Arial, sans-serif;
}这个功能在浏览器中的支持程度仍然很低，但情况会很快得以改善。在使用浏览器前缀的情况下， Chrome 49+，Firefox 46+和Opera 36+都支持这个属性。 不过，未来Chrome 60和Opera 47将使得该属性无需前缀标志（译者注：文章写作时，这两个版本还没有发出）。
如果您想问当浏览器还未支持这个属性的时候，使用font-display将会发生什么？答案是这些浏览器会忽略该属性，字体渲染的行为将与以前一样。 如果您真的希望改善用户的体验，即使浏览器不支持该属性，您也可以使用到上述基于JavaScript的解决方案之一。
2. contain
如果您构建具有许多小部件（包括第三方）的复杂网站，则新的contain 属性可能是优化网页的好工具。 如果您考虑在构建当今网页时大量使用Web Components和React组件，此属性可能会特别有用。
如果您正在寻找一种将样式，布局和重绘计算范围限制为只有 DOM的局部的方法，则可以使用contains属性。 如果你不熟悉那些概念，我推荐你阅读这些文章 10中减少重排提升性能的方式。当你理解这些方式后，再推荐你另外一个好的学习资源 CSS Triggers.
引用 W3C 关于contain属性的定义,
contain属性允许开发者声明当前元素和它的内容尽可能的独立于其他部分的 Dom 树。
但这在实践中意味着什么呢？ 这意味着如果您有一个具有固定高度和宽度的小部件（独立的部分），当你想要更新它的内容和样式的时候，使用这个属性可以通过限定浏览器的计算来避免影响到其他的DOM结构。 浏览器将执行较少的计算，从而获得更好的性能。
这个属性是相当新的，因此它的支持程度不是很好。 目前，只有Chrome 52+和Opera 40+才支持它。 contains允许几个值，每个值都可以让你限制浏览器需要做多少渲染工作。 我们详细分析一下每个值：
none：默认值。使用此值不应用限制效果。
size：该值开启元素的大小限制。这意味着修改元素的大小可以不需要检查其后代。
