Я использую смесь компаса 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?