web-dev-qa-db-ja.com

@include font-faceSCSSの問題

SCSSにいくつかのフォントをインポートさせようとしたときに、次のことが発生しました。

私は正確に コンパスのウェブサイトからのドキュメント をコピーしましたが、CSSがコンパイルされているとき、コンパスは私のsrcURLの後ろに乱数を追加します。私が書いたSCSSコードと結果のCSSは次のようになります

[〜＃〜] scss [〜＃〜]

@include font-face("NexaBold", font-files("nexa_bold-webfont.woff", "nexa_bold-webfont.ttf", "nexa_bold-webfont.svg", "nexa_bold-webfont.eot"));

結果のCSS

@font-face {
   font-family: "NexaBold";
   src: url('/fonts/nexa_bold-webfont.woff?1417439024') format('woff'), url('/fonts/nexa_bold-webfont.ttf?1417439024') format('truetype'), url('/fonts/nexa_bold-webfont.svg?1417439024') format('svg'), url('/fonts/nexa_bold-webfont.eot?1417439024') format('embedded-opentype');
}

ありがとう！

sasscompass-sasscompass
6
Arnold Oosterom

ブラウザのキャッシュフォントはURLに基​​づいているため、乱数が追加されました。これらの乱数により、コードをコンパイルしてhtmlに配置するたびに、フォントが再度ダウンロードされます。

Visual Studio 2013を使用していて、コードをsassでコンパイルすると、次のようになります。

@font-face {
  font-family: "NexaBold";
  src: font-files("nexa_bold-webfont.woff", "nexa_bold-webfont.ttf", "nexa_bold-webfont.svg", "nexa_bold-webfont.eot"); }

これがfont-face mixinのコンパスソースです。

@mixin font-face(
  $name, 
  $font-files, 
  $eot: false,
  $weight: false,
  $style: false
) {
  $iefont: unquote("#{$eot}?#iefix");
  @font-face {
    font-family: quote($name);
    @if $eot {
      src: font-url($eot);
      $font-files: font-url($iefont) unquote("format('eot')"), $font-files; 
    }
    src: $font-files;
    @if $weight {
      font-weight: $weight;
    }
    @if $style {
      font-style: $style;
    }
  }
}

私のコンパスバージョンを見ると、ファイルパスの最後に乱数が追加されていません。

私自身、コンパスなしでfont-faceを使用することをお勧めします。以下のコードを使用してください：

@font-face {
    font-family: 'IranSans';
    src: url('/css/fonts/IranSans.eot'); /* IE9 Compat Modes */
    src: url('/css/fonts/IranSans.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/css/fonts/IranSans.woff') format('woff'), /* Modern Browsers */
    url('/css/fonts/IranSans.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/css/fonts/IranSans.svg') format('svg'); /* Legacy iOS */
}
12
Mohamad Shiralizadeh

この行をconfig.rbに追加するだけです。

asset_cache_buster :none
2
nikopiko