css系统自带字体_CSS系统字体堆栈参考

女爷i 2022-11-27 05:20 286阅读 0赞

css系统自带字体

Fonts on a website can easily become a large part of the total bundle size that browsers have to download before being able to display a page in its final look and form. Plus, we need to worry about all kinds of things like the infamous [Flash of Unstyled Text][] (FOUT). Arguably, though, part of this whole issue has been resolved, thanks to the [font-display property][].

网站上的字体很容易成为浏览器必须下载的总包大小的很大一部分，浏览器才能以最终外观和形式显示页面。 另外，我们需要担心各种各样的事情，例如臭名昭著[的无样式文本][Flash of Unstyled Text] (FOUT) [Flash][Flash of Unstyled Text] 。 可以说，由于[font-display属性][font-display property] ，整个问题的一部分已经解决。

Added to that is the fact that the text found on a website is almost always the most important part, so we don’t want text that doesn’t look right or that’s hard to read. What’s a savvy web designer to do to satisfy both performance as well as look and feel?

另外，事实上，在网站上找到的文本几乎总是最重要的部分，因此我们不希望文本看起来不正确或难以阅读。 一位精明的网页设计师要做什么才能同时满足性能和外观？

One solution is to actually resort to using a font that’s already installed on the device of the user. In the past that was not a very elegant solution because some popular systems didn’t come with beautiful font faces baked-in. Things are different now however, and every major operating systems ships with a sans serif system font that looks and reads nice.

一种解决方案是实际诉诸使用已在用户设备上安装的字体。 过去，这并不是一个非常优雅的解决方案，因为某些流行的系统没有附带漂亮的字体。 但是现在情况有所不同，每个主要的操作系统都附带一个Sans Serif系统字体，看起来和读起来都很漂亮。

So the trick just becomes to provide all those default system font names as the value for the font-family property for the element(s) that should use a system font. The browser will then use the first one that it can find on the current system. Keep in mind that this will also mean that the text will look different based on what system it is being read on. That’s not necessarily a bad thing however, as the text will feel native to the OS its being read on.

因此，技巧就变成了提供所有那些默认的系统字体名称，作为应该使用系统字体的元素的font-family属性的值。 然后，浏览器将使用它在当前系统上可以找到的第一个。 请记住，这也意味着根据阅读系统的不同，文本看起来会有所不同。 但是，这不一定是一件坏事，因为文本对于阅读OS来说是原生的。

## Sans Serif系统字体栈 **(**Sans Serif System Font Stack**)** ##

Without further ado, here’s the version of the system font stack used on this very website:

事不宜迟，以下是此网站上使用的系统字体堆栈的版本：

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

That stack is the same one used with WordPress, and has been working pretty well so far for content on Alligator.io. On this site, the titles use the [Recursive][] [variable font][] for a little bit more panache, but the content itself uses the system font.

该堆栈与WordPress所使用的堆栈相同，并且到目前为止，对于Alligator.io上的内容一直运行良好。 在此站点上，标题使用了[递归][Recursive] [变量字体][variable font] ，但有些麻烦，但内容本身使用了系统字体。

Here’s a breakdown of those fonts/keywords, if you’re curious:

如果您好奇的话，以下是这些字体/关键字的分类：

*  \-apple-system and BlinkMacSystemFont: Keywords used to refer to the system font on Apple devices, usually [San Francisco][] or Helvetica Neue, depending on the version of the operating system. On some newer browsers the keyword system-ui can now be used to do the job of those two keywords.
    
    \-apple-system和BlinkMacSystemFont ：用来指代Apple设备(通常是[San Francisco][]或Helvetica Neue)上的系统字体的关键字，具体取决于操作系统的版本。 在某些较新的浏览器上，关键字system-ui现在可以用来完成这两个关键字的工作。
 *  Segoe UI: Used on Windows systems.
    
    Segoe UI ：在Windows系统上使用。
 *  Roboto: System font for Android devices.
    
    Roboto ：Android设备的系统字体。
 *  Oxygen-Sans: Linux systems using KDE.
    
    Oxygen-Sans ：使用KDE的Linux系统。
 *  Ubuntu: Ubuntu Linux
    
    Ubuntu ：Ubuntu Linux
 *  Cantarell: Linux systems using Gnome (other than Ubuntu).
    
    Cantarell ：使用Gnome的Linux系统(Ubuntu除外)。
 *  Helvetica Neue: A common fallback font available on many systems (especially Apple systems), just in case the previous ones all failed.
    
    Helvetica Neue ：许多系统(尤其是Apple系统)上都可以使用的通用后备字体，以防万一先前的系统全部失败。
 *  sans-serif: If all else fails, fallback to the default browser sans-serif font. Often not the most pleasing result, hence why we don’t just use `font-family: sans-serif`.
    
    sans-serif ：如果其他所有方法均失败，则回退到默认的浏览器sans-serif字体。 通常不是最令人满意的结果，因此为什么我们不仅仅使用`font-family: sans-serif` 。

As with most things in life, there are many different flavors of the system font stack and each ones varies a little bit. For example, [here’s the stack that GitHub uses][here_s the stack that GitHub uses].

与生活中的大多数事物一样，系统字体堆栈有许多不同的风格，每种风格都有所不同。 例如， [这是GitHub使用的堆栈][here_s the stack that GitHub uses] 。

## 等宽系统字体堆栈 **(**Monospace System Font Stack**)** ##

While there’s no system font stack for a serif-based font, there’s one for a monospace font, which can be really useful for code snippets and such. Here’s the one [used by Bootstrap v4][] (with GitHub using a very similar version as well):

虽然没有基于衬线的字体的系统字体堆栈，但是有一个等宽字体的堆栈，这对于代码段等非常有用。 这是[Bootstrap v4所][used by Bootstrap v4]使用的版本(GitHub也使用了非常相似的版本)：

code {
      font-family: SFMono-Regular, Menlo, Monaco,
                   Consolas, "Liberation Mono", 
                   "Courier New", monospace;
    }

## 使用[@ font-face的][font-face]系统字体 **(**System Fonts Using [@font-face][font-face]**)** ##

In case you’re getting tired of repeating the same string of multiple font names at multiple places in your CSS, there’s a trick documented in [this CSS-Tricks article][] to allow making use of a [@font-face][font-face 1] at-rule to define a single name that refers to the whole stack.

如果您厌倦了在CSS的多个位置重复使用多个字体名称的相同字符串的情况， [此CSS-Tricks文章中][this CSS-Tricks article]记录了一个[技巧][this CSS-Tricks article] ，允许您使用[@ font-face][font-face 1]规则定义一个指整个堆栈的名称。

> 翻译自: [https://www.digitalocean.com/community/tutorials/css-system-font-stack][https_www.digitalocean.com_community_tutorials_css-system-font-stack]

css系统自带字体

[Flash of Unstyled Text]: https://css-tricks.com/fout-foit-foft/
[font-display property]: https://www.digitalocean.com/css/font-face/#controlling-font-loading-enter-font-display
[Recursive]: https://www.recursive.design/
[variable font]: https://www.digitalocean.com/community/tutorials/css-variable-fonts
[San Francisco]: https://github.com/supermarin/YosemiteSanFranciscoFont
[here_s the stack that GitHub uses]: https://markdotto.com/2018/02/07/github-system-fonts/#the-stack
[used by Bootstrap v4]: https://www.client9.com/css-system-font-stack-monospace-v2/
[font-face]: https://www.digitalocean.com/community/users/font-face
[this CSS-Tricks article]: https://css-tricks.com/snippets/css/system-font-stack/
[font-face 1]: https://www.digitalocean.com/community/tutorials/css-font-face
[https_www.digitalocean.com_community_tutorials_css-system-font-stack]: https://www.digitalocean.com/community/tutorials/css-system-font-stack