要想在北斗

使用數據URI

我使用指南針font-face混入隨着inline-font-files和font-files新防彈@字體面對面語法創建沿着使用Data URIs爲WOFF，TTF和OTF文件的The New Bulletproof @Font-Face Syntax的東西線。要想在北斗

我使用eot的相對URL（由於缺乏對數據URI的IE支持）和svg文件（由於我猜的是#FontName散列）。 eot文件沒有問題，因爲有一個參數，但由於Compass中的font-face將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版本使用的數據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中完成這個更好嗎？

來源

2012-05-16 Simon

對於那些有興趣的人，問題中提到的解決方法似乎工作得很好。將eot file屬性從數據URI @ font-face規則移動到使用標準url()的屬性可能是一個好主意。有時數據：URL生成的時間太長，這會破壞整個@ font-face規則。此外，請確保數據URI規則最後加載，因爲Firefox 5及更高版本似乎只加載遇到的最後一條規則。因此，保持在最後一條規則的內嵌字體（WOFF，TTF，OTF），並在第一個鏈接的字體（SVG，EOT），像這樣：

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

來源

2012-05-22 11:11:09 Simon

更新。我實際上可以用一個偉大的小混入從波旁混入網站：

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

來源

2012-06-19 02:13:33 Nelga

缺少風格/重量和數據URI：s字體是否正確？但是這可能很容易添加。好的發現！ – Simon

這混入非常適合在關於數據URI我的需求：■對於一些格式和HTTP等的負載：

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

編輯：我應該補充一點，生成的CSS有在IE中打破的趨勢。最有可能是由於inline-font-files包含的文件太大，導致無效的url(data:)值，而這又會導致整個src屬性無效。它似乎保持數據URI版本在一個單獨的css指令是最好的解決方案。

來源

2012-06-19 11:40:24 Simon

回答

相關問題