Шрифты CSS: Как конвертировать несколько файлов TTF в один файл?

Question

Я получил несколько файлов шрифтов TTF. Необходимо конвертировать в 1 файл, который я могу использовать в CSS.

Как я могу это сделать?

Спасибо

Answer 1

Вы не можете сделать это, каждый шрифт нуждается в своем отдельном файле. Вы можете использовать сервис для преобразования файлов ttf в eot и svg, а затем использовать такой код в вашем файле style.css (при условии, что это имя вашей таблицы стилей):

@font-face {
    font-family: 'FuturaM';
    src: url('fonts/FuturaMedium.eot');
    src: url('fonts/FuturaMedium.eot?#iefix') format('embedded-opentype'),
         url('fonts/FuturaMedium.ttf') format('truetype'),
         url('fonts/FuturaMedium.svg#FuturaMedium') format('svg');
}

Надеюсь это поможет!

Answer 2

Каждый файл TTF состоит из различных стилей шрифта, которые обычно являются обычными, полужирным и курсивом. Каждый файл TTF связан с уникальным стилем шрифта.
Таким образом, невозможно объединить разные файлы TTF, даже если они принадлежат одному шрифту. Вы не можете объединить яблоко, апельсин и манго только потому, что они все фрукты, верно? (Хромой пример, извините)

Answer 3

Я не знаю, поддерживает ли его CSS, но существует формат файла True Type Collection: https://en.wikipedia.org/wiki/TrueType

Answer 4

Это можно сделать с помощью кодировки base64, используя стандартное объявление @font-face. При использовании препроцессора вы можете отключить определенные шрифты, просто комментируя их (используя sass/less comments).

Вот статья, объясняющая больше об этом методе. http://sosweetcreative.com/2613/font-face-and-base64-data-uri

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

Лично у меня есть основная таблица стилей с "обязательными шрифтами" и "расширенная" таблица стилей с дополнительными шрифтами, которая гарантирует, что размер передачи не выйдет из-под контроля, когда используется много шрифтов. Мой порог составляет около 250 Кб, включая все стили, что составляет около 2-3 файлов шрифтов. Все, что находится за этой точкой, входит в "extended.css".

ура