标签 字体 下的文章

事情起源于一次 github 的改样式...

某一天安然君告诉我：“你看 github 是不是改字体大小了？”，然后我就兴冲冲地去看了一眼，噫！丑死了！

但是毕竟是作为一条职业前端，我还是很自然的点开了它的样式代码，看了一眼是这样儿的：

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
    Helvetica, Arial, sans-serif, 
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

哎？好像好多没见过的？那个 -apple-system 是个什么东西，好像没有见过？

遇到不认识的为什么不去问一下神奇海螺呢？

于是，我就去搜索了一下，然后事情大概是这样的：

从名字上就可以看出来，-apple-system 是表示使用苹果系统默认的字体，那么，它具体是指的什么字体呢？

大概了解了一下苹果的默认字体，大概是这样的：

  • IOS 9.0- 以及 OSX 10.5- 中文是 STXihei/STHeiti (华文黑体)，英文/数字 使用 Helvetica
  • OSX 10.6-10.10 中文字体改为 Heiti SC (黑体-简)，算是华文黑体的进化版
  • IOS 9.0+ 以及 OSX 10.11+ 中文改为 PingFang SC (苹方)，英文/数字 改为 San Francisco

所以，也就是说 -apple-system 会在不同版本的系统下，使用与之对应的系统字体

哇！是不是感觉世界一下子好多了，不用再写好几个字体来兼容不同版本了~ 点赞！一下子简便了好多！

然后说起简便，其实呢，在 IOS 8.4+ 的版本，还支持字体的动态样式，也算是一种简便的写法，大概是这样的

font: -apple-system-body
font: -apple-system-headline
font: -apple-system-subheadline
font: -apple-system-caption1
font: -apple-system-caption2
font: -apple-system-footnote
font: -apple-system-short-body
font: -apple-system-short-headline
font: -apple-system-short-subheadline
font: -apple-system-short-caption1
font: -apple-system-short-footnote
font: -apple-system-tall-body

这样设置的时候，会使用系统预置的字体样式，注意的是，这里不光会设置使用哪种字体，还会设置字体大小、字体粗细等属性，其实就是一整套的字体样式全部打包，可以方便的来使用。

这个算是番外篇，然后我们接着往下看， BlinkMacSystemFont 又是什么呢？

其实和上面说的 -apple-system 说的事情基本一样，就是 在 mac 上用 Chrome 访问页面时，会使用系统的默认字体，应该算是对不支持 -apple-system 的一个降级吧

像这种简便的写法其实还有很多，比如 caption, icon, menu, message-box, small-caption, status-bar，还有 W3C 还在讨论要不要加一个 system 来表示系统字体，这边就不细说了，可以单独查一下

再后面的就比较常见了，简单说一下

  • Segoe UI 是给 Windows 和 Windows Phone 的字体
  • Roboto 是给 Android 和 最新的 Chrome OS 的字体
  • Helvetica 上面也说过，是兼容旧版本的字体
  • Arial 微软经典的兼容的无衬线字体
  • sans-serif 无衬线类型的字体(表示一个字体类型)
  • Apple Color Emoji 苹果的 emoji 表情
  • Segoe UI Emoji Windows 的 emoji 表情
  • Segoe UI Symbol Windows 的各种图标符号

这样一看，是不是 github 的字体设置的很科学呀，毕竟是 “最大的同性交友网站”

我们以后写页面的时候也可以参考这样的设置来写。

不过，等等，是不是没有写 Linux 的字体？这样让我 "一大批" Linux 用户怎么办？(谁要管你们？！哼~

还好，我在另外一个地方看到了这样的设置:

font-family: -apple-system, BlinkMacSystemFont, 
    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", 
    "Fira Sans", "Droid Sans", "Helvetica Neue", 
    sans-serif;

把几个不一样的拿出来说一下

  • Oxygen 是 KDE 桌面环境下的字体
  • Ubuntu 是... 你猜？
  • Cantarell 是 Gnome 环境下的字体
  • Fira Sans 是 Firefox OS 的字体 (我都忘记这货还有个系统了！
  • Droid Sans 是兼容旧版本的 Android 的字体

嗯嗯，大概就是这样子，Linux 党们有没有一本满足？

哈哈哈哈哈哈，好吧，今天大概就是这个样子了，这个周末可能会多发几篇文章，把之前的补一下，但是应该都比较简单，主要是备忘，毕竟还有好多事情要做 QAQ

晚安~

参考文献: