Как правильно адаптировать шрифты для сайта хотя-бы под 2 языка?

У меня есть сайт , на моём компьютере всё работает как надо , но при изменении языка или запуске с другого устройства у сайта начинает "лететь" шрифт.Есть ли какой-нибудь способ к примеру при изменении языка на другой , на сайте бы менялись шрифты ? Вот мой сайт https://antonvolkov6666.000webhostapp.com/ сделал его только ради практики (так что не обращайте внимания на его недоделанность ).
  • Вопрос задан
  • 260 просмотров
Пригласить эксперта
Ответы на вопрос 3
nikolayshabalin
@nikolayshabalin
Выращиваю картошку в "МинскАгрПром"
Поспорю с Андреем.
2) Не храните все символы в одном шрифтовом файле, если у Вас мультиязычный сайт, то есть на сайте есть функционал, который позволяет сменить язык, то храните символы каждого "языка" в отдельных файлах. Это крайне просто.

Зачем так делать? Опять же повторюсь, если сайт мультиязычный, то нет смысла заставлять английского пользователя скачивать кириллические символы. Уменьшив файл в несколько раз вы ускорите загрузку шрифтовых файлов. Для этого в CSS есть директива unicode-range.

Например, для подключения кириллицы
@font-face {
    font-display: swap;
    font-family: 'Lato';
    src: url('/fonts/lato-light/lato-light.cyrillic.woff2') format('woff2'), 
        url('/fonts/lato-light/lato-light.cyrillic.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; // только кириллица
}


Как это работает? Браузер анализирует ваш DOM понимает какие символы используются на сайте и если есть совпадение, то шрифт закачивается, то есть в данном примере если на сайте есть кириллица, то lato-light.cyrillic.woff2 скачается и отрисуется, а шрифт lato-light.latin.woff2 даже не закачается.

Для разделения символов можно использовать инструмент fontmin, либо его gulp аналог
Ответ написан
byte916
@byte916
1. Храните шрифты во всех нужных форматах (woff, woff2 итд)
2. Используйте шрифты в которых есть символы для всех нужных языков.
Неплохим вариантом может быть использование Google Fonts
Ответ написан
@Froggyweb
Варианта 2
либо использовать шрифты у которых есть поддержка символов нужных языков
либо, в зависимости от языка, менять шрифт на другой с поддержкой нужных символов
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
WayToStart Москва
от 40 000 до 70 000 руб.
Sveak Барнаул
от 50 000 руб.
HTML Academy Санкт-Петербург
от 130 000 до 160 000 руб.
26 марта 2019, в 01:09
40000 руб./за проект
26 марта 2019, в 00:54
40000 руб./за проект
26 марта 2019, в 00:31
20000 руб./за проект