9

woff、ttf、および otf ファイルのデータ URIを使用して、 The New Bulletproof @Font-Face Syntaxの行に沿って何かを作成するために、 コンパスのfont-facemixin をinline-font-filesandと共に使用しています。font-files

私は eot (データ URI に対する IE サポートがないため) と svg ファイル (私が推測する #FontName ハッシュのため) には相対 URL を使用します。そのためのパラメーターがあるため、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;

}

問題は、svg バージョンが標準 URL を使用できるようにしながら、woff、otf、および ttf バージョンでデータ URI を使用する方法を理解できないことです。私が思いついた最高のものはこれです：

@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 に分割されます。異なるウェイトとスタイルを使用して、同じファミリ名で複数の @font-face ルールを作成できる同じアカウントで有効な CSS ですか? その場合、上記の CSS の例と同じように機能しますか (そう思われます)? もちろん、Compass/sass でこれを達成するためのより良い方法はありますか?

4

3 に答える 3

5

興味のある方は、質問に記載されている回避策がうまく機能しているようです。eot ファイル属性を、データ URI の @font-face 規則から標準のurl(). data: 生成された 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-22T11:11:09.870 に答える
4

アップデート。私は実際に、Bourbon mixin サイトのすばらしい小さな 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);
于 2012-06-19T02:13:33.273 に答える
0

このミックスインは、一部の形式のデータ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-19T11:40:24.923 に答える