默认使用特定操作系统的系统字体可以提高性能，因为浏览器或者 webview 不必去下载任何字体文件，而是使用已有的字体文件。 font-family: system-ui 字体设置的优势之处在于它与当前操作系统使用的字体相匹配，对于文本内容而言，它可以得到最恰当的展示。
举两个例子，天猫的字体定义与 Github 的字体定义：
天猫：font-family: "PingFang SC",miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif;
Github：font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
简单而言，它们总体遵循了这样一个基本原则：
1、尽量使用系统默认字体使用系统默认字体的主要原因是性能，并且系统字体的优点在于它与当前操作系统使用的相匹配，因此它的文本展示必然也是一个让人舒适展示效果。
2、兼顾中西，西文在前，中文在后中文或者西文（英文）都要考虑到。由于大部分中文字体也是带有英文部分的，但是英文部分又不怎么好看，但是英文字体中大多不包含中文。通常会先进行英文字体的声明，选择最优的英文字体，这样不会影响到中文字体的选择，中文字体声明则紧随其次。
3、兼顾多操作系统选择字体的时候要考虑多操作系统。例如 MAC OS 下的很多中文字体在 Windows 都没有预装，为了保证 MAC 用户的体验，在定义中文字体的时候，先定义 MAC 用户的中文字体，再定义 Windows 用户的中文字体；
4、兼顾旧操作系统，以字体族系列 serif 和 sans-serif 结尾当使用一些非常新的字体时，要考虑向下兼容，兼顾到一些极旧的操作系统，使用字体族系列 serif 和 sans-serif 结尾总归是不错的选择。
对于上述的一些字体可能会有些懵，譬如 -apple-system, BlinkMacSystemFont，这是因为不同浏览器厂商对规范的实现有所不同，对于字体定义更多的相关细节，可以再看看这篇文章 -- Web 字体 font-family 再探秘
可访问性（A11Y）可访问性，在我们的网站中，属于非常重要的一环，但是大部分前端（其实应该是设计、前端、产品）同学都会忽视它。
我潜伏在一个叫无障碍设计小组的群里，其中包含了很多无障碍设计师以及患有一定程度视觉、听力、行动障碍的用户，他们在群里经常会表达出一个观点，就是国内的大部分 Web 网站及 APP 基本没有考虑过残障人士的使用（或者可访问性做的非常差），非常的令人揪心。
尤其在我们一些重交互、重逻辑的网站中，我们需要考虑用户的使用习惯、使用场景，从高可访问性的角度考虑，譬如假设用户没有鼠标，仅仅使用键盘，能否顺畅的使用我们的网站？
假设用户没有鼠标，这个真不一定是针对残障人士，很多情况下，用户拿鼠标的手可能在干其他事情，比如在吃东西，又或者在 TO B 类的业务，如超市收银、仓库收货，很可能用户拿鼠标的手操作着其他设备（扫码枪）等等。
本文不会专门阐述无障碍设计的方方面面，只是从一些我觉得前端工程师需要关注的，并且仅需要花费少量代价就能做好的一些无障碍设计细节。记住，无障碍设计对所有人都更友善。
色彩对比度颜色，也是我们天天需要打交道的属性。对于大部分视觉正常的用户，可能对页面的颜色敏感度还没那么高。但是对于一小部分色弱、色盲用户，他们对于网站的颜色会更加敏感，不好的设计会给他们访问网站带来极大的不便。
什么是色彩对比度