New Bulletproof @ font-face składnia przy użyciu danych URI w Compass

Question

używam kompasu font-face mixin wraz z inline-font-files i font-files, aby stworzyć coś na wzór tej The New Bulletproof @Font-Face Syntax korzystających Data URIs dla WOFF, TTF i plików OTF.

Używam względnych adresów URL dla eot (z powodu braku obsługi IE dla danych URI) i dla plików svg, (z powodu hash #FontName, jak sądzę). Plik eot nie stanowi problemu, ponieważ istnieje parametr, ale ponieważ font-face w programie Compass nie różni się od innych formatów, nie mogę po prostu użyć inline-font-files do dołączenia danych czcionki, ponieważ spowoduje to również wstawienie wersji svg.

Czy istnieje sposób, aby zrobić coś font-face powrotny jak poniżej:

@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; 

} 

Chodzi o to, że nie może dowiedzieć się, jak zrobić wersje WOFF, OTF i TTF użyciu URI danych, umożliwiając jednocześnie SVG Wersja do korzystania ze standardowego adresu URL. Najlepsze, co wymyśliłem, to:

@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); 

Która spowoduje rozbicie svg na swoją własną @ twarz-czcionki. Czy to prawidłowe CSS na tym samym koncie, że mogę utworzyć wiele reguł @ font-face z tą samą nazwą rodziny przy użyciu różnych wag i stylów? Jeśli tak, czy będzie działać tak dobrze, jak powyższy przykład CSS (wydaje się)? I oczywiście jest lepszy sposób na osiągnięcie tego w Compass/sass?

Answer 1

Dla zainteresowanych, obejście wspomniane w pytaniu wydaje się działać całkiem dobrze. Dobrym pomysłem jest przeniesienie atrybutu pliku eot z reguły URI danych @ font-face na tę, która używa standardu url(). Czasami wydaje się, że dane: generowane adresy URL są zbyt długie, co powoduje rozbicie całej reguły @ font-face. Upewnij się także, że reguła URI danych jest załadowana jako ostatnia, ponieważ Firefox 5 i nowsze wydają się ładować tylko ostatnią regułę. Stąd zachować czcionek wbudowanych (WOFF, TTF, OTF) w ostatnim reguły i związane czcionek (SVG, EOT) w pierwszym, jak w przykładzie:

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

Answer 2

Update. I acutally używany bardzo mały wstawek z witryny Bourbon mixin:

// Bourbon Mixin for top notch webfont support: https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_font-face.scss 
@mixin font-face($font-family, $file-path, $weight: normal, $style: normal) { 
    @font-face { 
     font-family: $font-family; 
     src: url('#{$file-path}.eot'); 
     src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'), 
      url('#{$file-path}.woff') format('woff'), 
      url('#{$file-path}.ttf') format('truetype'), 
      url('#{$file-path}.svg##{$font-family}') format('svg'); 
     font-weight: $weight; 
     font-style: $style; 
    } 
} 

// Bourbon Mixin webfont setup: http://thoughtbot.com/bourbon/#font-face 
@include font-face(ProximaNova, 'fonts/proximanova_semibold_macroman/ProximaNova-Sbold-webfont'); 
@include font-face(ProximaNova, 'fonts/proximanova_bold_macroman/ProximaNova-Bold-webfont', bold); 
@include font-face(ProximaNova, 'fonts/proximanova_semibolditalic_macroman/ProximaNova-SboldIt-webfont', normal, italic); 

Answer 3

Ten mixin dość dużo garnitury moje potrzeby w odniesieniu do danych URI: s dla niektórych formatów i HTTP załadunku innymi:

@mixin fontspring-font-face($family, $file, $svg_hash: $file, $weight: false, $style: false) { 

    @font-face { 
     font-family: quote($family); 
      src: font-files("#{$file}.eot"); 
      src: font-files("#{$file}.eot?#iefix") format('eot'), inline-font-files("#{$file}.woff", woff, "#{$file}.ttf", truetype), font-files("#{$file}.svg##{$svg_hash}") format('svg'); 

      @if $weight { 
       font-weight: $weight; 
      } 
      @if $style { 
       font-style: $style; 
      } 
    } 
} 

EDIT: Powinienem chyba dodać, że wygenerowany CSS ma tendencję do włamywania się do IE. Najprawdopodobniej, ponieważ pliki zawarte w plikach czcionek inline są duże, co powoduje niepoprawną wartość url(data:), co z kolei sprawia, że ​​cała właściwość src jest nieważna. Wygląda na to, że utrzymanie wersji URI danych w osobnej dyrektywie css jest najlepszym rozwiązaniem.