小编Bre*_*nda的帖子

我的Ruby on Rails应用程序讨厌自定义字体,我不知道为什么.以下是我遇到的一些错误和故障排除方法.

首先,只有在PC上的Google Chrome上发生了毁灭性的显示错误.文本将重叠,同一div中的段落将具有不同的宽度,按钮将具有缩短的宽度,副本将在页面上向右移动......到某些站点不可用的点.我终于弄清楚浏览器似乎没有正确理解字体.如果我使用像Arial和Georgia这样的网络安全字体,问题就会消失.所以我想也许我服务器上的@ font-face字体可能已损坏了.Chrome问题似乎也只发生在Chrome的更高版本(20及更高版本)上.关于这一点最奇怪的部分是它只是间歇性地发生.有时页面显示正常,有时看起来很疯狂.这在多台计算机上发生,缓存清除似乎不会影响错误.

然后,我从Adobe集成了Typekit,以便从服务器中提供字体.现在显示错误消失了,但所有Windows浏览器都忽略了typekit字体并显示了后备字体.这是Windows上的IE,Firefox和Chrome,各种版本.

该站点是Ruby on Rails的一部分,部分是PHP(WordPress),这些问题只发生在Ruby on Rails页面上.我认为已损坏的字体文件是在网站的PHP端可以很好地工作的相同字体文件.

以下是服务器托管字体的初始Chrome问题的一些屏幕截图.

该网站目前有服务器托管字体实时(Chrome错误).网站上发生这种情况的页面:http://levoleague.com/jobs

关于为什么我的应用拒绝字体的任何想法？

在Safari动画延迟中,我在Safari中遇到了令人沮丧的错误.

这个动画在Chrome,Firefox,IE11,IE10的桌面上运行得非常漂亮,但我在Safari中获得了不同的结果.在等量的暂停(由动画延迟控制)之后,包的各个部分都应该显示.

桌面Safari有时会正确显示,而其他时候会减慢行李过渡的第一部分并加速结束,或者它会将几个过渡组合在一起.在iPhone 6上的移动Safari和移动Chrome中,有时它会一起忽略动画延迟并立即转换整个行李.当性能不一致时,我很难排除故障.我添加了一些JavaScript以确保在开始动画之前所有资源都已加载到页面上,但这似乎没有帮助.任何人都知道这里发生了什么？

http://codepen.io/brendamarienyc/pen/qdoOZM

@-webkit-keyframes bag-1 {
  0%, 
    19.9% {
    opacity: 0;
  }
  20%,
    100% {
    opacity: 1;
  }
}
@keyframes bag-1 {
  0%, 
    19.9% {
    opacity: 0;
  }
  20%,
    100% {
    opacity: 1;
  }
}
.satchel-1 {
  -webkit-animation-name: bag-1;
          animation-name: bag-1;
  -webkit-animation-duration: 22500ms;
          animation-duration: 22500ms;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  opacity: 0;
}
.preload .satchel-1 {
  -webkit-animation-name: none !important;
          animation-name: none !important;
}

@-webkit-keyframes bag-2 {
  0%, 
    39.9% {
    opacity: 0;
  }
  40%,
    100% { …