将系统字体应用到 GitHub.com

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

系统字体栈 大约一年前开始流行,毫无疑问地受到 Mark Otto 将其应用到 GitHub 上的影响。

在我看来,原因 是 (1) 性能提升 和 (2) 网站外观与操作系统保持一致。但对 Mark 来说

Helvetica 字体创建于 1957 年,当时个人电脑还只是一个梦想。Arial 字体创建于 1982 年,在网络上 95% 的电脑上都可用。数百万,甚至数十亿的网页目前都使用这个过时的字体栈,为更新的浏览器和设备提供更旧的内容。

随着显示质量的提高,我们对这些显示器的使用也必须随之改进。像 Apple 的 San Francisco 和 Microsoft 的 Segoe 这样的系统字体旨在做到这一点,利用视网膜屏幕、动态字距调整、更多字体粗细以及改进的可读性。如果操作系统可以利用这些变化,那么我们的 CSS 也一样可以。

我也喜欢团队在字体声明末尾添加表情符号字体的想法,这样可以获得尽可能好的支持

p { 
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

直链 →