Как объединить несколько стилий(начертаний) шрифтов в один файл?

Question

[Алёша]

Подскажите сервис(если есть) для объединения стилей шрифтов, сейчас это выглядит так (prntscr.com/c8zdfc) хотелось бы получить один файл шрифта.

Answer 1

[Сергей delphinpro]

8 лет фронтэндю. Первый раз вижу такое странное желание... =) Зачем? Смысл?

Comments

[Алёша]

вручную

[Сергей delphinpro]

Владимир Вишневский: Так а ктож вас заставляет писать это вручную? =) 2016 год за окном

$FiraSansFontPath: '/design/fonts/FiraSans';
$FiraSansFontFamily: 'Fira Sans';
$FiraSansFontVersion: 2;

// Объявляем миксин
@mixin font-face($fontFamily, $fileName, $fontWeight, $fontStyle, $fontPath: $FiraSansFontPath) {
    @font-face {
        font-family: $fontFamily;
        src: url('#{$fontPath}/#{$fileName}.eot');
        src: local('^'),
        url('#{$fontPath}/#{$fileName}.eot?#iefix') format('embedded-opentype'),
        url('#{$fontPath}/#{$fileName}.woff2?v=#{$FiraSansFontVersion}') format('woff2'),
        url('#{$fontPath}/#{$fileName}.woff?v=#{$FiraSansFontVersion}') format('woff'),
        url('#{$fontPath}/#{$fileName}.ttf?v=#{$FiraSansFontVersion}') format('truetype');
        font-weight: $fontWeight;
        font-style: $fontStyle;
    }
}

// Кратенько подключаем нужные шрифты и их варианты
@include font-face($FiraSansFontFamily, 'firasanslight', 300, normal);
@include font-face($FiraSansFontFamily, 'firasanslight', 300, italic);

@include font-face($FiraSansFontFamily, 'firasans', 400, normal);
@include font-face($FiraSansFontFamily, 'firasansitalic', 400, italic);

@include font-face($FiraSansFontFamily, 'firasansmedium', 500, normal);
@include font-face($FiraSansFontFamily, 'firasansmediumitalic', 500, italic);

@include font-face($FiraSansFontFamily, 'firasansbold', 700, normal);
@include font-face($FiraSansFontFamily, 'firasansbolditalic', 700, italic);

[Алёша]

Сергей: это less, sass? Еще вопрос если ли смысл перегнать все шрифты в base64?

[Сергей delphinpro]

Владимир Вишневский: это scss, что в общем-то не имеет значения. Любой препроцессор.
К шрифтам в base64 лично я отношусь скептически. Размер увеличивается на треть.

[Павел]

Сергей: а у вас есть какой нибудь гист? Жажду больше таких лайфхаков!

[Сергей delphinpro]

mrusklon: иногда складываю в гист на гитхабе, сохраняю (или форкаю, если чужое что-то интересное попало) в аккаунтах на jsfiddle и codepen, хотя к кодпену только пытаюсь себя приучить=).
https://jsfiddle.net/user/DelphinPRO/fiddles/
А в основном таскаю удачные решения из старых проектов без какой-либо систематизации.

Answer 2

[Игорь Воротнёв]

Веб-шрифты не объединяются так как вы хотите (насколько мне известно, а известно вроде бы неплохо). Подключаются ручками, процесс можно автоматизировать (вам уже посоветовали как). Перегонять в base64 смысла нет.