Как отдать браузеру нестандартный шрифт, используя CSS - Zhbert's Home Нажмите "Enter", чтобы перейти к контенту

Как отдать браузеру нестандартный шрифт, используя CSS

Как известно, при рендеринге браузер старается использовать системные шрифты, которые предустановлены (или уже установлены вручную) в ОС. Но что делать, если таких шрифтов там нет? Например, нужно использовать какой-то совсем нестандартный шрифт или заставить браузер под Linux’ом корректно отображать чисто виндовый шрифт, которого в системе точно нет.

Выход из этой ситуации прост — нужно отдать браузеру шрифт с сервера, на котором работает сайт. Сделать это довольно просто.

Для начала находим нужный нам шрифт, скорее всего он будет в формате *.ttf. Для примера я взял использованный мной ранее специфичный шрифт — Digital-7, представляющий собой классический семисегментный индикатор, который я использовал для имитации экрана виртуального девайса. Скачиваем себе файл шрифта.

Далее его нужно сконвертировать в несколько форматов. Да, это будет один и тот же шрифт, но в разных форматах. Необходимо это для того, чтобы во всем зоопарке браузеров работало у вас все одинаково, а не классически «Под виндой в хроме норм, а под линуксом в файрфоксе все разлетелось». Нужны следующие форматы:

Формат файлаБраузеры, для которых он нужен
*.eotIE9 Compat Modes
*.woff2Последние версии браузеров
*.woffПоследние версии + IE9
*.ttfСтарые Safari, Android, iOS
Таблица типов файлов и соответствующих ему браузеров

Сконвертировать файл *.ttf в нужные форматы можно с помощью онлайн-конвертера, например этого — https://onlinefontconverter.com/. Там все просто, расписывать процесс не буду.

После этого нужно скопировать все полученные файлы, включая исходный *.ttf в каталог, где лежит CSS-файл. В самом файле пишем следующую настройку для семейства шрифтов:

@font-face {
    font-family: 'Digital-7 Mono';
    src: local('Digital-7Mono.eot'),
        url('Digital-7Mono.eot?#iefix') format('embedded-opentype'),
        url('Digital-7Mono.woff2') format('woff2'),
        url('Digital-7Mono.woff') format('woff'),
        url("digital-7-mono.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

Не забудьте проверить, что имена файлов в блоке указаны верно, иначе работать ничего не будет.

В принципе, на этом все. При обращении к шрифту браузер будет проверять, есть ли такой шрифт в системе, и при его отсутствии запрашивать его у сервера, который и будет отдавать браузеру нужную версию файла.

Будьте первым, кто оставит комментарий!

Добавить комментарий

Ваш адрес email не будет опубликован.