@font-face 带有多个 font-size css 声明会使 Firefox 缓慢爬行

Question

CSS：

@font-face {
    font-family: Gabriola;
    font-weight: normal;
    font-style: normal;
    src: local("Gabriola Regular"), local("Gabriola"),
        url("Gabriola.eot"),                        /* IE 5+ */
        url('Gabriola.woff') format('woff'),        /* FF 3.6, Chrome 5, IE9 */
        url('Gabriola.ttf') format('truetype'),     /* Opera, Safari */
        url('Gabriola.svg#Gabriola') format('svg'); /* iOS */
}
body {
    font-family: Gabriola, sans-serif;
    font-size: 1.3em;
}
.wine_name { font-size:2em; }
.price { font-size:2.6em; color:#CCC; }
.sugar { font-size:2em; color:#980000; }
br { page-break-after: always; }

页面显示得很快，因为我已经安装了 Gabriola。当我删除 local() 引用时，文件会下载...但 Firefox 在最终渲染页面之前冻结了大约 20 秒。这是因为有多个字体大小声明。当我删除它们时，无论我是否指定 local() 源，它都会快速渲染。还有其他人遇到过这个问题吗？

Answer 1

也许我很不耐烦，但我最近似乎经常回答自己的问题：S

事实证明，A）字体文件本身有问题和/或 B）Firefox 不擅长解析某些类型的字体。我

下载了不同的脚本字体（akaDora）并测试了它......它工作得很好。没有滞后。没有延迟。当然，现在我的任务是为 Gabriola 寻找不会让 Firefox 呕吐的字体文件。有人认识他们吗？我从 http://www.fonts2u.com/ 测试了两种字体。