什么是iPhone系统字体?
iPhone(iOS)系统的默认字体是 San Francisco(简称 SF),由 Apple 专为清晰度和可读性设计。它分为两个子系列:
- SF Pro:用于常规界面(如设置、信息等)
- SF Compact:用于 Watch 和紧凑空间
普通 Web 开发者无法直接加载 .ttf 文件(受版权保护),但可通过系统字体栈调用。
CSS 中如何正确使用 iPhone 系统字体?
使用以下通用字体栈,确保在 iOS 设备上自动使用 San Francisco 字体:
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
说明:
-apple-system:触发 iOS/macOS 使用 San FranciscoBlinkMacSystemFont:Chrome 在 macOS 上的兼容写法- 后续字体为各平台兜底方案,保证跨平台一致性
实际效果对比
以下段落使用了推荐的字体栈,在 iPhone 上将显示为 San Francisco 字体:
Hello, this is a sample text rendered with the system font stack. On an iPhone, you should see San Francisco.
注意事项
- 不要尝试自行下载并托管 San Francisco 字体文件——违反 Apple 许可协议。
- 在 Safari、Chrome(iOS)等浏览器中,上述字体栈会自动生效。
- 如需精确控制字重,可配合
font-weight使用(如 400、500、600、700)。
扩展阅读
Apple 官方文档:Typography – Human Interface Guidelines