2016年7月

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

晚安~

参考文献:

前几天在写一个活动页的时候发现一个你一样问题，先还原一下现场

页面中有一个地方要做一个一直旋转的动画，类似转盘的效果，很简单是不是？是的！

.rotate{
    animation: rotate 1s linear infinite;
}


@keyframes rotate{
    from{ transform: rotate3d(0,0,1,0deg) }
    to{ transform: rotate3d(0,0,1,360deg) }
}

简洁明了，有木有，还带 3D 加速，完美是不是？
然而。。。
为什么 safari 下并不动。。。。 = =!，老夫可是最新的 safari 9.1.1 呀！

额，这就尴尬了~

请教一下同事，然后试着改成了这样

@keyframes rotate{
    0%   { transform: rotate3d(0,0,1,0deg) }
    50%  { transform: rotate3d(0,0,1,180deg) }
    100% { transform: rotate3d(0,0,1,360deg) }
}

然后，诶~ 转了！
等等！！！ 为什么转的姿势这么奇怪！
你知道来回摇头是什么姿势么？没错！就是这样！转到 180 度的时候，它又返回去了！！！
你怎么还来回的转呢？！！！

看来这样子不行！
再换一个姿势试一下，google 一下，有人说是开始和结束的位置是一样的（毕竟转了 360 度嘛），所以 safari 会以为没有动，所以就不转了。

好吧，那我们换成不一样的试试

@keyframes rotate{
    from{ transform: rotate3d(0,0,1,0deg) }
    to{ transform: rotate3d(0,0,1,359deg) }
}

改成 359 度呢？

答案是： 还 TM 不行！！！

WTF！！！

然后，还有人给出答案说，再多加几个关键帧，因为加了 50% 的时候它确实转了，不过转的后半段的姿势不是我们想要的，那我们如果把它加一个关键帧，是不是就不会再转回去了呢？

@keyframes rotate{
    0%   { transform: rotate3d(0,0,1,0deg) }
    50%  { transform: rotate3d(0,0,1,180deg) }
    75%  { transform: rotate3d(0,0,1,270deg) }
    100% { transform: rotate3d(0,0,1,360deg) }
}

然后你会发现，它转起来，还是那么奇怪！！！
呵呵呵呵呵呵呵呵呵呵。。。。。。

然后，老夫又试了几种办法，最终发现有两种方法可以正常转动

一种就是不用 3D 加速，直接变成这样

@keyframes rotate{
    from{ transform: rotate(0deg) }
    to{ transform: rotate(360deg) }
}

呵呵，这样竟然。。。。。

但是我知道有些强迫症肯定还是要用 3D 加速，那么，你可以试试这样

@keyframes rotate{
    0%   { transform: rotate3d(0,0,1,0deg) }
    25%  { transform: rotate3d(0,0,1,90deg) }
    50%  { transform: rotate3d(0,0,1,180deg) }
    100% { transform: rotate3d(0,0,1,360deg) }
}

是的！就是这么奇葩！加上一个 25% 的关键帧，它喵的就正常了？！！！

至于具体是设么原因造成的，额。。。。 我真的没查到 QAQ~
我猜是 safari 的 bug 吧。。。

如果有知道的朋友，希望能留言告诉我一下，多谢了~

OK，今天就先这样吧！ 好想吸毒~ QAQ