Как пример gzip @ font-face? - PullRequest
Новая
       4

Как пример gzip @ font-face?

7 голосов
/ 01 марта 2012

Может кто-нибудь привести пример того, как 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;
}

Ответы [ 2 ]

9 голосов
/ 01 марта 2012

Используете ли вы Apache и имеете ли вы доступ к httpd.conf?Если да, включено ли сжатие GZIP?

Вы можете искать эту строку: 

AddOutputFilterByType DEFLATE

или 

SetOutputFilter DEFLATE

Если это первое, вы сможете добавить следующие типы MIME, чтобы директиваи параметры выглядят так, как показано ниже.Типы MIME, объявленные здесь, предназначены для .EOT , .TTF и .SVG .Я вытащил их из файла mime.types в моей папке Apache conf.Я полагаю, что .WOFF уже сжат, поэтому вам не нужно, чтобы он был сжат. 

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

Последняя директива SetOutputFilter распаковывает все файлы в контейнере, в котором она указана. Если это местоположение включает ваши файлы шрифтов, онидолжен быть уже разархивирован при доставке клиенту.

0 голосов
/ 31 декабря 2013

Отправьте некоторые параметры (поддельные), сервер будет обрабатывать эти ответы как text / plain и просто сжимает как текст / plain, если установлено DEFLATE по тексту / обычный. 

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

Просто отлично работает!

...