主页 / 问题 / 1071370
Accepted
Кевин
Asked:2020-01-18 19:39:34 +0000 UTC2020-01-18 19:39:34 +0000 UTC

-apple-system 对 font-family 属性意味着什么？

  • 772

我在 Tailwind 框架的 css 代码中找到了以下行：

html {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
}

这个片段有什么作用-apple-system，是否需要它？

css

1 个回答

  1. Best Answer
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

    此行声明了 Mac OS 系统字体堆栈，以及所有流行平台和浏览器上的标准字体，如果您使用 font-family，则每次要将字体应用于元素时都必须调用完整的字体堆栈，这将增加代码的大小。

    -apple-system- 适用于 iOS Safari、MacOS Safari、MacOS Firefox 的字体（旧金山）

    BlinkMacSystemFont- （旧金山）适用于 macOS Chrome

    Segoe UI- 适用于 Windows

    字体堆栈是这样工作的——如果列表中的第一个字体没有加载，浏览器将尝试加载第二个，等等。

    使用所有这些是有意义的，这样您的应用程序就不会与使用它的环境有所不同，例如，这与网站无关。

    如果您仍想通过@font-face使用此声明一次字体：

    @font-face {
  font-family: system;
  font-style: normal;
  font-weight: 300;
  src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
}

p {
font-family: "system";
}

    • 7

相关问题