0

フォントフェイスのものを簡素化するために、少しLESS mixinがあります

.fontface(@font){
    @font-face {
        font-family: '@{font}';
        src: url('../fonts/@{font}.eot');
        src: local('☺'), url('../fonts/@{font}.woff') format('woff'), url('../fonts/@{font}.ttf') format('truetype'), url('../fonts/@{font}.svg#webfont5SwbW1jA') format('svg');
        font-weight: normal;
        font-style: normal;
    }
}

ローカル コンピューター (OS/X) で、lessc を実行しています。

.fontface(@font){
    @font-face {
        font-family: '@{font}';
        src: url('../fonts/@{font}.eot');
        src: local('☺'), url('../fonts/@{font}.woff') format('woff'), url('../fonts/@{font}.ttf') format('truetype'), url('../fonts/@{font}.svg#webfont5SwbW1jA') format('svg');
        font-weight: normal;
        font-style: normal;
    }
}

.fontface('MyFont');
.fontface('MyOtherFont');

戻り値

@font-face {
  font-family: 'MyFont';
  src: url('../fonts/MyFont.eot');
  src: local('☺'), url('../fonts/MyFont.woff') format('woff'), url('../fonts/MyFont.ttf') format('truetype'), url('../fonts/MyFont.svg#webfont5SwbW1jA') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'MyOtherFont';
  src: url('../fonts/MyOtherFont.eot');
  src: local('☺'), url('../fonts/MyOtherFont.woff') format('woff'), url('../fonts/MyOtherFont.ttf') format('truetype'), url('../fonts/MyOtherFont.svg#webfont5SwbW1jA') format('svg');
  font-weight: normal;
  font-style: normal;
}

ただし、ビルドサーバー（CentOS 6.2）で実行すると返されます

@font-face {
  font-family: 'MyFont';
  src: url('../fonts/MyFont.eot');
  src: local('☺'), url('../fonts/MyFont.woff') format('woff'), url('../fonts/MyFont.ttf') format('truetype'), url('../fonts/MyFont.svg#webfont5SwbW1jA') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'MyFont';
  src: url('../fonts/MyFont.eot');
  src: local('☺'), url('../fonts/MyFont.woff') format('woff'), url('../fonts/MyFont.ttf') format('truetype'), url('../fonts/MyFont.svg#webfont5SwbW1jA') format('svg');
  font-weight: normal;
  font-style: normal;
}

ビルド サーバーでは両方の mixin が同じものを返すのに、ローカルでは正常に動作するのはなぜですか?

両方のコンピューターが同じより少ないバージョンを報告します。

Sams-MacBook-Pro:Desktop sr$ lessc -v
lessc 1.3.0 (LESS Compiler) [JavaScript]


[sr@egdjnk01 ~]$ lessc -v
lessc 1.3.0 (LESS Compiler) [JavaScript]

私はnpm -g update less両方で実行しましたが、まだ異なる動作をしています。

@font-faceそれを削除してダミーのクラス名に置き換えると、出力は問題ありません。

4

1 に答える 1

1

この回答で@ScottS によって提案された現時点での回避策は 、次のように、手動で定義されたブロック.fontface内に mixin を配置することです。@font-face

.fontface(@font){
    font-family: '@{font}';
    src: url('../fonts/@{font}.eot');
    src: local('☺'), url('../fonts/@{font}.woff') format('woff'), url('../fonts/@{font}.ttf') format('truetype'), url('../fonts/@{font}.svg#webfont5SwbW1jA') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face{
    .fontface('MyFont');
}

@font-face{
    .fontface('MyOtherFont');
}

これにより、両方のコンパイラから正しい出力が得られます。

于 2012-12-12T12:50:51.500 に答える