在 Web 设计中使用系统 UI 默认字体

内容高于设计,但也源自设计。我们发现一种趋势:Web 设计逐渐靠近底层加载平台,从而更佳协调和统一地呈现内容。其中非常重要的一点是在提供文字内容时,采用和底层平台相同的字体。在各种网页排版所用的字体中,使用默认 UI 字体是一种保险而不保守的做法。而且这意味着无需再使用如 Google Web fonts 一类的在线字体服务(web-font delivery service)或使用事先存在服务器上的字体文件。

使用默认 UI 字体可以通过两种方式实现:

非常用方法 #

.caption {
    font: caption;
}

不是很常见,即使 CSS 文档里面有。意思就是使用底层平台,也就是所用操作系统中对应控件的字体、字体大小、风格粗细等等,达到完全一致。

使用这种方法会导致几个常见问题:

常用方法 #

html[lang^="en-"] body {
    font-family:
    /* 1 */ -apple-system, BlinkMacSystemFont,
    /* 2 */ "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    /* 3 */ "Helvetica Neue", sans-serif;
}

以上提供的代码仅适用于内容语言为英文。使用这种方法同样会造成一些问题:

细节 #

/* 1 */ macOS #

/* 2 */ 其他系统 #

/* 3 */ 备用字体 #

包括中文字体的解决方法 #

html[lang^="zh-"] body {
    font-family: system, -apple-system, BlinkMacSystemFont,"PingFang SC", 
"Segoe UI", "Microsoft YaHei UI", 
"Source Han Sans", "wenquanyi micro hei", 
"Hiragino Sans GB", "Hiragino Sans GB W3", 
"Roboto", "Oxygen", "Ubuntu", 
"Cantarell", "Fira Sans", "Droid Sans", 
"Helvetica Neue", Helvetica, Arial, sans-serif;
}

细节 #

关于「苹方」 #

「苹方」有不同的字重可供选择,可以直接使用。

.some-element {
    font-family: "PingFang SC ExtraLight"; /* 或者 "PingFang SC Thin" */
    font-family: "PingFang SC Light";
    font-family: "PingFang SC"; /* 或者 "PingFang SC Regular" */
    font-family: "PingFang SC Medium";
    font-family: "PingFang SC Semibold";
    font-family: "PingFang SC Heavy";
}

或者预先定义好,使用 "PingFang-SC" 引用,浏览器根据 font-weight 去选择不同的变体。

@font-face {
    font-family: "PingFang-SC";
    font-weight: 100;
    src: local("PingFang SC Thin");
}

@font-face {
    font-family: "PingFang-SC";
    font-weight: 300;
    src: local("PingFang SC Light");
}

@font-face {
    font-family: "PingFang-SC";
    font-weight: 400;
    src: local("PingFang SC Regular");
}

@font-face {
    font-family: "PingFang-SC";
    font-weight: 500;
    src: local("PingFang SC Medium");
}

@font-face {
    font-family: "PingFang-SC";
    font-weight: 700;
    src: local("PingFang SC Semibold");
}

@font-face {
    font-family: "PingFang-SC";
    font-weight: 800;
    src: local("PingFang SC Heavy");
}

body {
    font-family: "PingFang-SC", sans-serif;
}

参考文章 #

  1. Using System UI Fonts In Web Design: A Quick Practical Guide, Marcin Wichary, 2015
  2. 在 Web 内容中使用系统字体,minwe,2016

Respond on Mastodon, webmention this post, or contact me directly.

You can use Hypothes.is to select texts and highlight.

You've copied this page url!

Search it in your Mastodon server, and reply that toot by @fanrongbin.com@fanrongbin.com.