Шрифты

Общее
1

Доброго времени! Верстаю свой первый макет(ну или пытаюсь). Столкнулся с несоответствием размеров шрифта в фотошопе и браузере.

Для начала пара скриншотов:

blob.jpg1920×1080 544 KB

Имя файла изображения1920×1080 63 KB
.

blob.jpg1920×1080 545 KB

На первых двух видна разница в размерах одного и того же элемента(57px на макете 46px в браузере), эти пропорции сохраняются и для других элементов. На третьем – семейство шрифта(“Lato”). Высота текста одинаковая(так же измерял по линейке). Шрифт и в макете и в коде 16px. Сам к сожалению не разобрался в чём проблема, но как я понимаю такого не должно быть, поэтому надеюсь на помощь. Очень неудобно задавать отступы когда присутствует погрешность в ширине текстовых элементов, причем довольно большая.

Фрагмент CSS-кода где задаются шрифты:

@import url('https://fonts.googleapis.com/css?family=Lato');

body {
min-width: 1190px;
margin: 0;
padding: 0;
font-size: 16px;
font-family: "Lato", Arial, sans-serif;
color: rgb(69,69,69)

}

2

Вроде как нагуглил, проблема решается свойством letter-spacing. Если нет более грамотного решения, вопрос исчерпан.

3

Сложный макет, на мой взгляд, для первой работы выбрали.
Бывает, конечно, что необходимо использовать letter-spacing, но причина может быть и другая.
В свойстве font-family вы пишете два шрифта. Так вот первый скорее всего не подключился (по каким-то причинам) и то, что вы видите, вполне может быть Arial.
Проверьте правильность подключения шрифта. Кстати, это лучше делать в html через link.

4

ну да, у вас же в фотошопе в палитре Символ прописан трекинг (межбуквенное расстояние) 90. чтобы получить это же в браузере необходимо прописать в CSS letter-spacing: 0.09em;

1 лайк
5

Проверил подключение шрифтов по отдельности, вроде всё в норме.

6

Да, всё верно, дело именно в межбуквенном расстоянии.