css系统自带字体_CSS系统字体

css系统自带字体

A little bit of history

一点历史
Today

今天
The impact of Web Fonts

网络字体的影响
Enter System Fonts

输入系统字体
Popular websites use System Fonts

热门网站使用系统字体
I’m sold. Give me the code

我卖了给我密码
- A note on system-ui
  
  关于system-ui
I’m sold. Give me the code

我卖了给我密码
Use font variations by creating @font-face rules

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

一点历史 (A little bit of history)

For years, websites could only use fonts available on all computers, such as Georgia, Verdana, Arial, Helvetica, Times New Roman. Other fonts were not guaranteed to work on all websites.

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

If you wanted to use a fancy font you had to use images.

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

In 2008 Safari and Firefox introduced the @font-face CSS property, and online services started to provide licenses to Web Fonts. The first was Typekit in 2009, and later Google Fonts got hugely popular thanks to its free offering.

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

@font-face was implemented in all the major browsers, and nowadays it’s a given on every reasonably recent device. If you’re a young web developer you might not realize it, but in 2012 we still had articles explaining this new technology of Web Fonts.

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

今天 (Today)

You can use whatever font you wish to use, by relying on a service like Google Fonts, or providing your own font to download.

您可以依靠Google字体之类的服务来使用想要使用的任何字体，也可以提供自己的字体进行下载。

You can, but should you?

可以，但是应该吗 ？

If you have the choice (and by this I mean, you’re not implementing a design that a client gave you), you might want to think about it, in a move to go back to the basics (but in style!)

如果您可以选择(并且这意味着您没有实现客户给您的设计)，则可能需要考虑一下，然后再回到基础知识(但要有风格！)。

网络字体的影响 (The impact of Web Fonts)

Everything you load on your pages has a cost. This cost is especially impactful on mobile, where every byte you require is impacting the load time, and the amount of bandwidth you make your users consume.

您在页面上加载的所有内容都需要付费。此成本对移动设备特别重要，因为移动设备上所需的每个字节都会影响加载时间以及用户占用的带宽量。

The font must load before the content renders, so you need to wait for that resource loading to complete before the user is able to read even a single word you wrote.

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

But Web Fonts are a way to provide an awesome user experience through good typography.

但是，Web字体是一种通过良好的排版提供令人敬畏的用户体验的方法 。

输入系统字体 (Enter System Fonts)

Operating Systems have great default fonts.

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

System Fonts offer the great advantage of speed and performance, and a reduction of your web page size.

系统字体提供了速度和性能的极大优势，并减小了网页大小 。

But as a side effect, they make your website look very familiar to anyone looking at it, because they are used to see that same font every day on their computer or mobile device.

但是，副作用是，它们使您的网站看上去对任何浏览它的人都很熟悉 ，因为它们习惯于每天在计算机或移动设备上看到相同的字体。

It’s effectively a native font.

它实际上是一种本地字体 。

And as it’s the system font, it’s guaranteed to look great.

并且由于它是系统字体，因此可以保证外观很棒 。

我卖了给我密码 (I’m sold. Give me the code)

This is the CSS line you should add to your website:

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

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

The browser will interpret all these font names, and starting from the first it will check if it’s available.

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

Safari and Firefox on macOS “intercept” -apple-system, which means the San Francisco font on newer versions, Helvetica Neue and Lucida Grande on older versions.

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

Chrome works with BlinkMacSystemFont, which defaults to the OS font (again, San Francisco on macOS).

Chrome与BlinkMacSystemFont一起使用，该默认设置为OS字体(再次在macOS上为San Francisco)。

Segoe UI is used in modern Windows systems and Windows Phone, Tahoma in Windows XP, Roboto in Android, and so on targeting other platforms.

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

Arial and sans-serif are the fallback fonts.

Arial和sans-serif是后备字体。

If you use Emojis in your site, make sure you load the symbol fonts as well:

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

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";
}

You might want to change the order of the font appearance based on your website usage statistics.

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

关于`system-ui` (A note on `system-ui`)

Maybe you will see system-ui mentioned in System Fonts posts online, but at the moment it’s known to cause issues in Windows (see https://infinnie.github.io/blog/2017/systemui.html and https://github.com/twbs/bootstrap/pull/22377)

也许您会在线上看到system-ui字体发布中提到的system-ui ，但目前已知它会在Windows中引起问题(请参见https://infinnie.github.io/blog/2017/systemui.html和https：// github .com / twbs / bootstrap / pull / 22377 )

There is work being done towards standardizing system-ui as a generic font family, so in the future you will just write

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

body {font-family: system-ui;
}

See https://www.chromestatus.com/feature/5640395337760768 and https://caniuse.com/#feat=font-family-system-ui to keep an eye on the progress. Chrome, Safari already support it, Firefox partially, while Edge does not yet implement it.

请参阅https://www.chromestatus.com/feature/5640395337760768和https://caniuse.com/#feat=font-family-system-ui以了解进度。 Chrome，Safari已支持它，Firefox已部分支持，而Edge尚未实现。

通过创建@ font-face规则使用字体变体 (Use font variations by creating @font-face rules)

The approach described above works great until you need to alter the font on a second element, and maybe even on more than one.

在您需要更改第二个元素(甚至可能多个元素)上的字体之前，上述方法非常有效 。

Maybe you want to specify the italic as a font property rather than in font-style, or set a specific font weight.

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

This nice project by Jonathan Neal https://jonathantneal.github.io/system-font-css/ lets you use System Fonts by importing a module, and you can set

Jonathan Neal的这个不错的项目https://jonathantneal.github.io/system-font-css/允许您通过导入模块来使用系统字体，并且可以设置

body {font-family: system-ui;
}

This system-ui is defined in https://github.com/jonathantneal/system-font-css/blob/gh-pages/system-font.css.

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

You are now able to use different font variations by referencing:

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

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

(Read more)

https://css-tricks.com/snippets/css/system-font-stack/

https://css-tricks.com/snippets/css/system-font-stack/
https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/

https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
https://medium.design/system-shock-6b1dc6d6596f

https://medium.design/system-shock-6b1dc6d6596f

翻译自: https://flaviocopes.com/css-system-fonts/

css系统自带字体