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