如何使用 CSS 将 Apple 的新 San Francisco 字体添加到网页？

根据开发者和用户的研究，人眼可以轻松阅读网页上新设计的 Apple San Francisco 字体。CSS 属性可以阻止 Apple 字体在任何网站上使用。任何网页内容都可以使用新的 San Francisco 字体，Apple 的产品也预装了这些字体供用户使用。

Craig Hockenberry 先生通过 CSSCSS 解释了在网页上使用字体的过程。CSS 在 font-family 属性中应用具有各种变体的 Apple 字体。

语法

以下语法用于在元素上添加 Apple 的新 San Francisco 字体。

描述

• Firefox 和 Internet Explorer 使用 Apple 系统，而 Chrome 使用 BlinkMacSystemFont。
• 您可以通过链接下载 San Francisco 字体用于系统使用。下载后，您必须一次安装一个版本。
• 链接：https://github.com/supermarin/YosemiteSanFranciscoFont

其他可用变体

使用 CSS 为 Apple 字体使用以下变体。

• font-family: -apple-system-body
• font-family: -apple-system-headline
• font-family: -apple-system-subheadline
• font-family: -apple-system-caption1
• font-family: -apple-system-caption2
• font-family: -apple-system-footnote
• font-family: -apple-system-short-body
• font-family: -apple-system-short-headline
• font-family: -apple-system-short-subheadline
• font-family: -apple-system-short-caption1
• font-family: -apple-system-short-footnote
• font-family: -apple-system-tall-body

示例

以下示例显示了 Apple 的新 San Francisco 字体在 html 元素上的应用。我们可以通过元素名称、ID 名称和类名称来添加字体样式。

示例 1

示例显示了 Apple 的新 San Francisco 字体在 html 元素上的应用。字体系列应用于 html 页面的 body 元素。

输出

输出显示了网页的 Apple 字体。

示例 2

示例显示了 Apple 的新 San Francisco 字体在 HTML 元素上的应用。字体系列也应用于 HTML 页面的段落 (p) 元素。

输出

输出显示了网页的 Apple 字体。

示例 3

示例显示了 Apple 的新 San Francisco 字体在 html 元素上的应用。字体系列应用于 HTML 页面的多个元素。

输出

输出显示了网页的 Apple 字体。

示例 4

以下示例显示了网页上带有 ID 和类名称的 Apple 字体。我们可以选择 html 标签的特定元素。

输出

输出显示了网页的 Apple 字体。

结论

Apple 为 Internet Explorer 和 Firefox 浏览器创建了用户友好的字体。这些字体有助于用户轻松阅读网页上的内容。