Новый пуленепробиваемый синтаксис @font-face с использованием URI данных в Compass

Я использую смесь компаса font-faceвместе с inline-font-filesи font-files, чтобы создать что-то вроде The New Bulletproof @Font-Face Syntaxс использованием Data URI. ] для файлов woff, ttf и otf.

Я использую относительные URL-адреса для eot (из-за отсутствия поддержки IE для данных URI) и для файлов svg (из-за хеша #FontName, я думаю).Файл eot не представляет проблемы, так как для этого есть параметр, но поскольку font-faceв Compass обрабатывает svg так же, как и другие форматы, я просто не могу использовать inline-font-filesдля включите данные шрифта, так как это также сделает версию svg встроенной.

Есть ли способ заставить font-faceвозвращать что-то вроде следующего:

@font-face {
    font-family: 'PTSans';
    src: url('pts55fwebfont.eot');
    src: url('pts55fwebfont.eot?#iefix') format('embedded-opentype'),
         url('data:WOFF_DATA') format('woff'),
         url('data:TTF_DATA') format('truetype'),
         url('pts55fwebfont.svg#PTSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Дело в том, что я не могу понять, как заставить версии woff, otf и ttf использовать Data URI в то же время позволяя версии svg использовать стандартный URL-адрес. Лучшее, что я придумал, это:

@include font-face('PTSans', inline-font-files('ptsans/pts55fwebfont.woff', woff, 'ptsans/pts55fwebfont.ttf', truetype), 'ptsans/pts55fwebfont.eot', normal, normal);
@include font-face('PTSans', font-files('ptsans/pts55fwebfont.svg#PTSansRegular'), $weight: normal, $style: normal);

Что разобьет svg на собственный @font-face. Является ли допустимым CSS в той же учетной записи, что я могу создать несколько правил @font-face с одним и тем же именем семейства, используя разные веса и стили? Если это так, будет ли он работать так же хорошо, как приведенный выше пример CSS (кажется)? И, конечно же, есть ли лучший способ сделать это в Compass/sass?

9
задан Simon 17 May 2012 в 20:38
поделиться