如何使用 CSS 在网页上添加 Apple 的新旧金山字体？

为了在网页上添加 Apple 的新旧金山字体，我们需要做以下几个步骤：

1. 下载字体文件

Apple 的新旧金山字体包含两种字体：San Francisco 和 SF UI。这些字体可以从 Apple Developer 网站上下载。可以选择下载.ttf 或者 .otf 格式的字体文件。

2. 将字体文件放到网站目录下

将下载的字体文件放到网站目录下，可以将它们放到一个叫做 "fonts" 的文件夹里。

3. 在 CSS 中引用字体文件

在 CSS 中使用 @font-face 规则来引用字体文件。这个规则定义了字体的名称、字体文件的位置和字体格式。

例如，以下代码定义了 San Francisco 字体：

@font-face {
  font-family: 'San Francisco';
  src: url('fonts/SF-Pro-Display-Regular.otf') format('opentype');
}

4. 使用字体

定义了字体之后，就可以在网页中使用它们了：

body {
  font-family: 'San Francisco', sans-serif;
}

注意，由于在不同的操作系统和浏览器中，字体的显示效果可能会有所不同，所以最好提供备用的字体，以确保网页的可读性。

以上就是在网页上添加 Apple 的新旧金山字体的步骤。通过这些简单的步骤，您可以使用这些流行的字体来为您的网站增添一些独特的风格。