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

У меня есть сайт , на моём компьютере всё работает как надо , но при изменении языка или запуске с другого устройства у сайта начинает "лететь" шрифт.Есть ли какой-нибудь способ к примеру при изменении языка на другой , на сайте бы менялись шрифты ? Вот мой сайт https://antonvolkov6666.000webhostapp.com/ сделал его только ради практики (так что не обращайте внимания на его недоделанность ).
  • Вопрос задан
  • 248 просмотров
Пригласить эксперта
Ответы на вопрос 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
либо использовать шрифты у которых есть поддержка символов нужных языков
либо, в зависимости от языка, менять шрифт на другой с поддержкой нужных символов
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы