Как избежать смещения элементов макета при смене шрифта?

Question

[keche]

При смене шрифта с Roboto на Tahoma - сместились элементы (меню вертикальное, горизонтальное и т.д.), потеряли свои прежние размеры.
Вроде бы это из за формирование отступов от шрифта до него, слева, справа и т.д.
Как избежать такой серьезной ошибки при смене шрифта? Чтобы если меняется шрифт, размеры элементов оставались прежними?

Comments

[Lynn «Кофеман»]

Понять уже наконец, что в вебе нет фиксированных шрифтов и если смена шрифта с Roboto на Tahoma всё портит надо бить по рукам верстальщика и/или дизайнера.

Потому что даже один и тот же шрифт будет разной ширины в зависимости от OS, браузера, настроек сглаживания и т.п.

[keche]

Алексей Тен: Как в CSS реализовать возможность смены шрифта, чтобы не ломались элементы?

[Lynn «Кофеман»]

keche: нормально нарисованный и свёрстанный макет спокойно переживает изменение размеров шрифта (в разумных пределах). Без реальных примеров ничего более конкретного посоветовать нельзя.

[keche]

Алексей Тен: Я начинающий верстальщик. И для меня пока загадка, как сделать правильно сделать чтобы не ломались элементы. Сделал я привязку и отступы от шрифта для элементов. Чтобы менять шрифт или его размер и чтобы ничего не ломалось. Нужно не привязываться к шрифт и не делать от него отступов? Как это реализовать? Или каким вариантом вы пользуетесь?

[Lynn «Кофеман»]

keche: Ну вы хотя бы картинку покажите.

Вот, например на этом сайте ширина колонки слева 300px и ей совершенно неважно какого размера текст в ней. Или тут же меню сверху. Это просто набор слов с отступами между ними. И если меняется шрифт, то общая ширина этого меню может измениться, но это опять же никого не волнует потому что макет и вёрстка готовы к такому.

[Lynn «Кофеман»]

В общем показывайте макет, вёрстку и что у вас конкретно ломается.

[keche]

Алексей Тен: Можно вашу почту, чтобы прислать макет? Я думаю скорее всего проблема как раз в привязке отступов к тексту. Но так я читал по книге делается. А как же тогда для каждого текстового элемента свой div делать. Пока не могу понять...

[Lynn «Кофеман»]

У вас там такой секретный макет что ли?

[keche]

Алексей Тен: Не секретный )) Просто сайтик для себя делаю, и не хочу чтобы его раньше времени поисковики проиндексировали. Вот в чем суть.

Answer 1

[iBird Rose]

каждый шрифт имеет свою ширину. можете только подобрать letter-spacing для шрифта и указывать его для определенного шрифта. но это будет смотреться не всегда красиво. поэтому лучше все же подгонять сайт под шрифт раз вы решились его поменять. или иметь 2 разных стиля если вы собираетесь менять шрифт одним щелчком.

Comments

[keche]

А причем здесь letter-spacing? Шрифты имеют разные размеры, из за них ломаются элементы. Вопрос в том, какие методы использовать чтобы при смене шрифта, или его размера, не ломались элементы.

[iBird Rose]

keche: ну тк элементы у вас плывут как раз так и из за того что шрифты имеют разные размеры. тобишь если в случае с Roboto у вас все нормально умещалось - то Tahoma шире - итого слова получаются в длину больше. а с помощью letter-spacing как раз можно уменьшить это расстояние между буквами на которое шрифт тахома и шире