使用Ruby on Rails应用程序的所有Windows浏览器上的Typekit和@fontface问题,特别是Chrome

Question

我的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

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

Answer 1

看起来这是一个CSS问题，你需要overflow-wrap: break-word;