关于字体那些事儿

事情起源于一次 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

晚安~

参考文献:

标签: 字体, -apple-system, blinkmacsystemfont

添加新评论

icon_question.gificon_razz.gificon_sad.gificon_evil.gificon_exclaim.gificon_smile.gificon_redface.gificon_biggrin.gificon_surprised.gificon_eek.gificon_confused.gificon_cool.gificon_lol.gificon_mad.gificon_twisted.gificon_rolleyes.gificon_wink.gificon_idea.gificon_arrow.gificon_neutral.gificon_cry.gificon_mrgreen.gif