10

Less を使用して、font-families を次のように定義しています。

@georgia: georgia, times, 'times new roman', 'nimbus roman no9 l', serif;

次に、ミックスインが少なくなります。

.font(@family: arial, @size: 1.0em, @lineheight: 1.0, @weight: normal, @style: normal, @variant: normal) {
  font: @style @variant @weight @size~"/"@lineheight @family;
} // font

最後に、次のように使用します。

p {
  .font(@georgia, 1.0em, 1.5)
}

しかし、カスタム フォントを使用してフォント ファミリを定義したいとも考えています。

@something: 'custom-font', arial, ...;

しかし、最初にカスタムフォントを登録する必要があります:

@font-face {
  font-family: 'custom-font';
src:url('fonts/custom-font.eot');
src:url('fonts/custom-font.eot?#iefix') format('embedded-opentype'),
    url('fonts/custom-font.woff') format('woff'),
    url('fonts/custom-font.ttf') format('truetype'),
    url('fonts/custom-font.svg#icon') format('svg');
font-weight: normal;
font-style: normal;
}

@font-faceこのコードをすべて繰り返さずに、フォント名とパスを渡してフォントを登録できるように、LESS mixin を作成することはできますか?

これを私のフォントミックスインと統合する方法がわかりません...

または、これを行うためのさらに良い方法があれば...

ありがとう、ミゲル

4

7 に答える 7

4

古い投稿であることは知っていますが、この問題をこのように解決しました。他の人の助けになることを願っています。

まず、@font-face 内で繰り返されるすべての要素を含むパラメトリック mixin を作成しました。

.loadFont(@Weight; @Name; @Local; @Eot:'@{Local}.eot'; @Woff:'@{Local}.woff'){
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: @Weight;
    src: url(@Eot);
    src: local(@Name), local(@Local), url(@Eot) format('embedded-opentype'), url(@Woff) format('woff');
}

次に、すべてのWebフォントをロードしました（この場合はopen sans）

@font-face {.loadFont(100;'Roboto Thin';'Roboto-Thin')}
@font-face {.loadFont(300;'Roboto Light';'Roboto-Light')}
@font-face {.loadFont(400;'Roboto Regular';'Roboto-Regular')}
@font-face {.loadFont(500;'Roboto Medium';'Roboto-Medium')}
@font-face {.loadFont(700;'Roboto Bold';'Roboto-Bold')}
@font-face {.loadFont(900;'Roboto Black';'Roboto-Black')}

次に、要素に適用する CSS ルールを使用して 2 つ目のパラメトリック mixin を作成しました

.font(@weight:400; @size:14px; @font-family:'Open Sans', sans-serif){
    font:@arguments;
}

そして最後に、このような要素でそれを使用します

div.someClass{
    .font(); //to accept all default parameters 
}
div.otherClass{
    .font(100; 40px); //to specify weight and size
}

補足として。ファイルの横にすべてのファイル*.eotとファイルがあり、パラメーターとして名前が付けられています（|| ）*.woffLESS@LocalOpen-Sans.woffOpen-Sans.eot

于 2014-02-11T19:45:34.917 に答える
1

LESS は実際に、パラメーターを使用したミックスインをサポートしています。ここを参照してください: http://lesscss.org/#-parametric-mixins

于 2013-08-02T14:28:24.610 に答える
0

U font-face (font Proxima Nova as expl) にこの mixin を試すことができます:

.fontFace(@fontWidth) {
    @fontName: "Proxima Nova @{fontWidth}";
    @fileName: "../fonts/ProximaNova-@{fontWidth}";
    @font-face {        
        font-family: '@{fontName}';
        font-weight: 400;
        font-style: normal;
        src: url('@{fileName}.eot');
        src: url('@{fileName}.eot?#iefix') format('embedded-opentype'),
             url('@{fileName}.woff') format('woff'),
             url('@{fileName}.ttf') format('truetype'),
             url('@{fileName}.svg#@{fontName}') format('svg');
    }
}

.fontFace('Regular');
.fontFace('RegularIt');
.fontFace('Bold');

@fontName: Proxima Nova;
@font:          "@{fontName} Regular";
@font_italic:   "@{fontName} RegularIt";
@font_bold:     "@{fontName} Bold";

h2 {
    font: 400 50px @font_bold;  
}

そして、同じこととして、SASS/SCSS のこのスタッフ:

@mixin font ($weight) {
    @font-face {
        $fontName: 'Proxima Nova ' + $weight;
        $fileName: '../fonts/ProximaNova-' + $weight;

        font-family: $fontName;
        font-weight: 300;
        font-style: normal;
        src: url($fileName + '.eot ');
        src: url($fileName + '.eot?#iefix') format('embedded-opentype'),
           url($fileName + '.woff2') format('woff'),
           url($fileName + '.ttf') format('truetype'),
           url($fileName + '.svg##' + $fontName) format('svg');
    }
}
@include font(regular);
@include font(bold);
@include font(light);

$fontName: 'Proxima Nova ';
$font: $fontName + regular, "Helvetica Neue", sans-serif;
$font_bold: $fontName + bold;
$font_light: $fontName + light;

h2 {
    font: 300 15px $font_bold;
}
于 2016-10-01T09:41:05.947 に答える
-5

これが、テスト済みで機能しているSASSの私の表現です。

@mixin fontface($family: sans-serif, $weight: normal, $style: normal, $path: '../fonts', $filename: 'font'){ @font-face{ font-family: $family; src:url('#{$path}/#{$filename}.eot'); src:url('#{$path}/#{$filename}.eot?#iefix') format('embedded-opentype'), url('#{$path}/#{$filename}.woff') format('woff'), url('#{$path}/#{$filename}.ttf') format('truetype'), url('#{$path}/#{$filename}.svg#icon') format('svg'); font-weight: $weight; font-style: $style; } }

于 2014-05-22T06:27:34.117 に答える