CSS应用苹果的San Francisco字体

时间:2022-06-01 21:22:17

优先选择苹果字体,并兼容其它平台的字体。

font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu,"Helvetica Neue",Arial,sans-serif;
  • -apple-system:这是苹果系统的字体,在Safari上字体为San Francisco,在旧版的的Mac上为Neue Helvetica 和Lucida Grande字体。
  • system-ui:系统的默认字体。
  • BlinkMacSystemFont:这是用于Mac的Chrome,等同与-apple-system。
  • "Segoe UI":Windows (Vista+) 以及 Windows Phone的字体。
  • Roboto:Android 4.0+ 以及 Chrome OS字体
  • Ubuntu:Ubuntu系统的字体

参考:https://css-tricks.com/snippets/css/system-font-stack/ 以及https://github.com/necolas/normalize.css/issues/665