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 是表示使用苹果系统默认的字体,那么,它具体是指的什么字体呢? 大概了解了一下苹...

safari 下旋转动画的迷之 bug

前几天在写一个活动页的时候发现一个你一样问题,先还原一下现场 页面中有一个地方要做一个一直旋转的动画,类似转盘的效果,很简单是不是?是的! .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: rot...