Один и тот же шрифт отображается по-разному в зависимости от того, как он загружен. ⇐ CSS

[Anonymous]

Мы разрабатываем приложение с использованием шрифта Lato. Дизайн пользовательского интерфейса выполнен в Figma.
Если мы загрузим шрифты локально (загрузим ttf из Google и преобразуем их в woff и woff2), используя шрифт

Код: Выделить всё

@font-face {
font-family: 'Lato';
src: url('~@/assets/fonts/lato-black-webfont.woff2') format('woff2'),
url('~@/assets/fonts/lato-black-webfont.woff') format('woff');
font-weight: $black;
font-style: normal;
}

они будут отличаться от Figma (которая также загружается в Интернет).
Если мы загрузим шрифты непосредственно из Google CDN с помощью импорта

Код: Выделить всё

@import url(https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap);

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


Фигма


Локальный woff


Шрифты Google cdn
Откуда возникает эта разница?

Подробнее здесь: https://stackoverflow.com/questions/662 ... -is-loaded