＊問題：字體在屏幕上顯示的時候需要將字體柵格化為一個個像素點，采用黑白像素點渲染，無法體現字體的細節之處，會造成邊緣呈現鋸齒狀的不平滑。
＊分析：字體渲染引擎的平滑方式：灰階渲染 和 亞像素渲染。
（1 灰階渲染是通過控制字體輪廓上 像素點的亮度，達到字體原始形狀的方法；
（2 亞像素渲染則利用了 LCD 屏幕中每個像素是由 RGB 三個亞像素的顏色和亮度混合而成一個完整像素的顏色這一原理，將字體上的輪廓點由三個亞像素體現達到原始形狀的方法，與灰階渲染相比，分辨率在垂直方向上放大了三倍，因此，渲染效果更好。但是，所消耗的內存也更多 。
因此在手機屏幕上，為了減少 CPU 的開銷，使用灰階渲染。
在 macOS上，采用的是亞像素渲染這種方式。這就會導致白色、亮色的字體，在深色背景下會顯得過粗 ，嚴重情況下看上去會模糊。 (但是如果是淺色背景下就沒有這個反差了)
＊解決：控制瀏覽器渲染字體的方式
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
