代码之家 › 专栏 › 技术社区 › 1.21 gigawatts

是否有一个跨平台、跨浏览器的关键字可以用来指代系统字体?

css html javascript

1.21 gigawatts · 技术社区 · 7 年前

有跨站台吗。我可以使用的跨浏览器关键字,它将引用CSS中的用户系统字体?

苹果提供了一个 -apple-system

.myStyle {
    font-family: -apple-system; /* works on OSX */
    font-family: -system;
}

2 回复 | 直到 7 年前

Rahul 7 年前

不,据我所知不是,但有一个解决办法

/* System Fonts as used by GitHub */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

或

/* Define the "system" font family */
@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");
}

/* Now, let's apply it on an element */
body {
  font-family: "system";
}

资料来源: https://css-tricks.com/snippets/css/system-font-stack/