CSS系统字体

如何在CSS中使用系统字体来改善您的网站并在速度和页面加载时间方面为用户提供更好的体验

一点历史

为了年，网站只能使用所有计算机上可用的字体，例如格鲁吉亚，韦尔达纳，Arial，Helvetica，Times New Roman。不能保证其他字体在所有网站上都可以使用。

如果要使用精美字体，则必须使用图像。

在2008年，Safari和Firefox引入了@font-faceCSS属性和在线服务开始为Web字体提供许可证。首先是2009年的Typekit，后来由于免费提供了Google字体，因此受到了极大的欢迎。

@font-face已在所有主流浏览器中实现，如今，它已在所有合理的最新设备上实现。如果您是一个年轻的Web开发人员，您可能没有意识到，但是在2012年，我们仍然有文章介绍这种Web字体的新技术。

今天

你能够通过依赖于Google字体之类的服务来使用想要使用的任何字体，或者提供自己的字体进行下载。

你能够， 但你应该？

如果您有选择的余地（我的意思是，您没有实现客户给您的设计），则可能需要考虑一下，然后再回到基础知识（但要有风格！）。

网络字体的影响

您加载到页面上的所有内容都有一个成本。此成本对移动设备尤其重要，因为移动设备上所需的每个字节都会影响加载时间以及使用户消耗的带宽量。

字体必须在内容呈现之前加载，因此您需要等待以便在用户甚至只能读取您写的单个单词之前完成该资源加载。

但是网络字体是一种提供很棒的用户体验通过良好的排版。

输入系统字体

操作系统具有出色的默认字体。

系统字体具有以下优点速度和表现和减少您的网页大小。

但副作用是，它们使您的网站看起来非常熟悉对于任何观看它的人来说，因为他们习惯于每天在计算机或移动设备上看到相同的字体。

实际上是本机字体。

这是系统字体，保证看起来很棒。

例如，您可能知道其中之一：

  • 的GitHub
  • 中等的
  • 鬼
  • 引导程序
  • Booking.com

..他们已经使用系统字体多年了。

甚至运行数百万个网站的Wordpress仪表板也使用系统字体，而与阅读有关的Medium决定使用系统字体。

如果对他们有用，那么它也很可能对您也有用。

我卖了给我密码

这是您应该添加到网站的CSS行：

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
  "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif;
}

浏览器将解释所有这些字体名称，并从第一个字体开始检查它是否可用。

macOS上的Safari和Firefox“拦截”-apple-system，这意味着较新版本的字体为San Francisco，较旧版本的字体为Helvetica Neue和Lucida Grande。

Chrome使用BlinkMacSystemFont，该字体默认为OS字体（再次在macOS上为San Francisco）。

Segoe UI用于现代Windows系统和Windows Phone，Windows XP中的Tahoma，Android中的Roboto等，以其他平台为目标。

Arial和sans-serif是后备字体。

如果您使用表情符号在您的网站中，请确保同时加载符号字体：

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

您可能需要根据网站使用情况统计信息更改字体外观的顺序。

关于的注释system-ui

也许你会看到system-ui在线系统字体文章中提到的问题，但目前已知会在Windows中引起问题（请参见https://infinnie.github.io/blog/2017/systemui.html和https://github.com/twbs/bootstrap/pull/22377）

目前正在努力将system-ui标准化为通用字体系列，因此将来您将只编写

body {
  font-family: system-ui;
}

看https://www.chromestatus.com/feature/5640395337760768和https://caniuse.com/#feat=font-family-system-ui随时关注进度。 Chrome，Safari已支持它，Firefox已部分支持，而Edge尚未实现。

通过创建@ font-face规则来使用字体变体

上述方法有效伟大的直到您需要更改第二个元素上的字体，甚至可能需要更改多个字体为止。

也许您想将斜体指定为font财产而不是font-style，或设置特定的字体粗细。

乔纳森·尼尔（Jonathan Neal）的这个好项目https://jonathantneal.github.io/system-font-css/允许您通过导入模块来使用系统字体，并且可以设置

body {
  font-family: system-ui;
}

这system-ui在中定义https://github.com/jonathantneal/system-font-css/blob/gh-pages/system-font.css。

现在，您可以通过引用使用不同的字体变体：

.special-text {
  font: italic 300 system-ui;
}

p {
font: 400 system-ui;
}

阅读更多

免费下载我的CSS手册


更多CSS教程：


在线技术百科！