css - 如何 gzip @font-face 示例？

Question

有人可以提供一个如何 gzip 网络字体套件的示例吗？生成器为我提供了这段代码...需要更改哪些地方？

@font-face {
    font-family: 'DesigersBold';
    src: url('desib__-webfont.eot');
    src: url('desib__-webfont.eot?#iefix') format('embedded-opentype'),
         url('desib__-webfont.woff') format('woff'),
         url('desib__-webfont.ttf') format('truetype'),
         url('desib__-webfont.svg#DesigersBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

Answer 1

您使用的是 Apache 并且可以访问 httpd.conf 吗？如果是这样，是否已启用 gzip 压缩？

你可以寻找这一行:

AddOutputFilterByType DEFLATE

或者

SetOutputFilter DEFLATE

如果是前者，您应该能够添加以下 MIME 类型，以便指令和参数如下所示。此处声明的 MIME 类型适用于 .EOT、.TTF 和 .SVG。我从我的 Apache conf 文件夹中的 mime.types 文件中提取它们。我相信 .WOFF 已经压缩，因此您不需要将其压缩。

AddOutputFilterByType DEFLATE application/vnd.ms-fontobject application/x-font-ttf image/svg+xml

后一个指令 SetOutputFilter 将其所在容器内的所有文件 gzip 压缩。如果此位置包含您的字体文件，则它们在交付给客户端时应该已经 gzip 了。