@具有多个字体大小css声明的字体将Firefox拖得很慢

CSS:

---

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

也许我有点不耐烦，但最近我似乎回答了很多我自己的问题：S

结果是要么A）字体文件本身有问题，要么B）Firefox不擅长解析某些类型的字体

---

我下载了一个不同的脚本字体（akaDora）并对其进行了测试…它工作得很好。没有滞后。不要耽搁。现在，我的任务当然是为Gabriola找到不会让Firefox呕吐的字体文件。有人知道他们吗？我从中测试了这两种字体。

我甚至尝试过延迟加载字体，以防由于某种原因与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; }