Шрифт Face Mixin для менее

Ответ 1

Вы можете определить свой собственный mixin для включения пользовательских шрифтов, но поскольку LESS не реализует никаких директив управления, только охранники для mixins (которые бесполезны в аспекте текущего вопроса), вы не можете сократить код mixin для шрифта определение.

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

Ответ 2

Я знаю его старое сообщение, но я решил эту проблему следующим образом: надеюсь, что это поможет кому-то другому.

Сначала я создал параметрический mixin с любым типом, который будет повторяться внутри @font-face:

.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');
}

Затем загрузились все мои веб-шрифты (в этом случае 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')}

Затем был создан второй параметрический mixin с правилом CSS для применения к элементам

.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 и *.woff рядом с файлом LESS и названы в качестве параметра @Local (Open-Sans.woff || Open-Sans.eot)

Ответ 3

Мне нравится структурировать мои шрифты в папках, например:

/fonts/OpenSans-Bold/OpenSans-Bold.eot
/fonts/OpenSans-Bold/OpenSans-Bold.svg
/fonts/OpenSans-Bold/OpenSans-Bold.ttf
/fonts/OpenSans-Bold/OpenSans-Bold.woff

И я использую этот LESS MIXIN для font-face:

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

Где:

@pTheme: "../../themes/[THEME NAME]";

Пример вызова Mixin:

.font-face('OpenSans-Bold');

Я создал переменную @pTheme, поэтому я могу использовать ее также в фоновом изображении, например:

background: url("@{pTheme}/images/logo.png") no-repeat;

Ответ 4

LESS действительно поддерживает наличие mixins с параметрами. См. Здесь: http://lesscss.org/#-parametric-mixins

Ответ 5

Я знаю, что этот вопрос немного стар, но я побежал с ответом Mészáros Lajos. Он должен был учитывать несколько вещей, которые он не делает в настоящее время:

• Семейство шрифтов и имя файла шрифта не должны совпадать; на самом деле, для "жирного" и "курсивного" вы можете использовать ссылку "Стиль". См.: http://www.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/. Это предотвращает "искусственный смелый" и "искусственный курсив", который случается, когда браузер не понимает отношения между вашими шрифтами (например, он не знает, что MyFont-Bold является правильным шрифтом для использования, когда у вас есть сильный тег внутри текст, который использует MyFont).
• Имя семейства шрифтов и идентификатор SVG не должны совпадать; например, файл montserrat-regular.svg может иметь SVG-идентификатор montserratregular. Да, вы можете исправить это, переименовав свои файлы, и, возможно, вам следует, но если вы будете получать файлы удаленно (CDN), у вас может не быть такой роскоши.
• Личные предпочтения, я переключил порядок варианта и веса. В сокращении шрифтов CSS сначала стоит вариант, поэтому, чтобы сохранить что-то похожее, я поставил его здесь первым.
• Опять же, личные предпочтения, я удалил значения по умолчанию, потому что я не хотел вызывать этот метод, не будучи явным. Когда вам нужно указать все, вы с меньшей вероятностью забудете, что на самом деле вам нужно изменить SVG ID для этого шрифта.
• Так как Chrome-окна в настоящее время не поддерживают псевдонимы WOFF, я переключил заказ на перемещение SVG сразу после EOT (старый IE нуждается в EOT сначала или сломается). Кредит

.fontface(@family, @filename-base, @style, @weight, @svgID){
    font-family: @family;
    src:url('@{filename-base}.eot');
    src:url('@{filename-base}.svg#@{svgID}') format('svg'),
        url('@{filename-base}.eot?#iefix') format('embedded-opentype'),
        url('@{filename-base}.woff') format('woff'),
        url('@{filename-base}.ttf') format('truetype');
    font-weight: @weight;
    font-style: @style;
}

Ответ 6

U может попробовать этот mixin для font-face (шрифт Proxima Nova as expl):

.fontFace(@fontWidth) {
    @fontName: "Proxima Nova @{fontWidth}";
    @fileName: "../fonts/[email protected]{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;
}

Ответ 7

Здесь мое исполнение для 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; } }