【问题标题】:How to specify the system’s default serif and sans-serif font-family?如何指定系统默认的 serif 和 sans-serif font-family?
【发布时间】:2017-12-19 13:35:00
【问题描述】:

当我十多年前学习 CSS 时,使用“默认字体”(无论是什么意思)的标准(也是唯一)方法是:

font-family: serif;
font-family: sans-serif;

然后,去年,Apple 添加了custom syntax for their new system font,如果我没记错的话,Blink 也做了类似的事情。

如果我只想要默认的无衬线或衬线字体,那么了解 CSS 的人能否总结一下我的 font-family 属性应该是什么样子? (我特别不想要网络字体。)

【问题讨论】:

  • 您的问题中不是已经有了答案吗?链接的问题似乎是关于不再公开的所谓“旧金山”字体。
  • @Oriol 你是什么意思?链接的问题说我需要不同的语法来获取 Mac 上的系统字体,我基本上想知道在其他平台上我需要考虑哪些其他异常。
  • 当您说“默认字体”时,您是指给定平台上的默认 UI 字体吗?
  • 基本上。对于更严格的定义,“在目标平台上感觉最不格格的字体”。

标签: css fonts


【解决方案1】:

CSS 字体模块第 4 级草案介绍了new generic font families

对于大多数语言和脚本,现有的泛型可以映射到 与该脚本相当的东西。这对网络很有用,所以 像 serifsans-serif 这样的泛型映射到合理的东西 独立于内容的语言。但排版传统 世界各地差异很大,许多脚本有各种常见的 字体设计不能干净地映射到这些现有的泛型中。 在各种使用类似字体的情况下 的平台,扩展预定义的 CSS 泛型集很有用 涵盖这些字体样式的字体系列。

如果你想获得“在目标平台上感觉最不合适的字体”,那就是system-ui

system-ui 字体系列代表默认 UI 字体 给定平台

【讨论】:

  • 听起来不错。我会继续这样做,并等待 Safari 赶上它。
【解决方案2】:

这是一个在大多数平台(OSX、iOS、Windows、Windows Phone、Android)上默认为系统字体的 css sn-p:

font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto;
  • -apple-system — Safari 中的旧金山(在 Mac OS X 和 iOS 上);旧版 Mac OS X 上的 Neue Helvetica 和 Lucida Grande。
  • system-ui — 给定平台上的默认 UI 字体。
  • BlinkMacSystemFont — 相当于 -apple-system,适用于 Mac OS X 上的 Chrome。
  • "Segoe UI" — Windows (Vista+) 和 Windows Phone。
  • Roboto — Android(Ice Cream Sandwich (4.0)+)和 Chrome 操作系统。

片段本身,借自以下issue on github

您可以在article on css-tricks 中查找其他操作系统或更旧版本的字体。

【讨论】:

    猜你喜欢
    • 2019-08-25
    • 2013-06-23
    • 2012-11-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-02-09
    相关资源
    最近更新 更多