Что со шрифтами?

Question

[Максим Гречушников]

Дизайн такой


Все сделал так же, но текст какой то мягко говоря не как на картинке.

font-family: 'academycregular', Arial, sans-serif;
      font-weight:bold;

      color: #4a4b4c;

Comments

[Максим Гречушников]

что я делаю не так. почему в браузере центральный текст большой становится и серый. хотя в фотошопе он черный и мелкий

[Александр Таратин]

@maxyc_webber серый потому что color: #4a4b4c; - далеко не черный. Чтобы уменьшить текст пропишите font-size поменьше

[Максим Гречушников]

@Taraflex у меня в ТЗ этот размер.

Answer 1

[Сергей]

Ничего не понял из вопроса, установите firebug, к нему плагин pixel perfect, наложите поверх макета и верстайте. Каждый браузер и ОС по разному рендерят шрифты, поэтому прям пиксель в пиксель сделать не получится, но можно сделать практически 1 в 1, как с макетом

Comments

[Максим Гречушников]

да все это используется. интересно то, что если на глаз подгонять размер шрифта чтоб было как в фотошопе, ьто надо 11 размер. и то чуток не тот. но фотошоп кажет мне 15 размер )

[Максим Гречушников]

прости сам сумбурно отписался

[Сергей]

Ну это нормально, что размер фотошопа и макета отличается, поэтому юзай pixel perfect плагин

[Александр Зачиналов]

Нормально, только если размер верстки отличается от размеров макета. Если верстать ширину по дизайну то отличий не будет. Особо стоит обращать внимание на эффекты, которые применили к шрифту на макете, бывает и тень добавляют в 1px и spacing выставляют. Хотите полного соответствия - верстайте все эти свойства

[Александр Зачиналов]

Еще вариант - ваш шрифт не поддерживает bold написание для web, хотя из под otf или ttf на дизайне он будет. И тут уж пиши не пиши font-weight:bold ничего не изменяется, попробуйте его отключить и сравнить, если все-таки разница есть, то протестируйте с цифровым значением font-weight: 400 (500, 800 и т.д.)

Answer 2

[Alex Shalin]

Возможно несоответствие между фотошопом и версткой в гарнитуре шрифта. В фотошопе у вас наверняка гарнитура Academy Bold (или что-то типа этого), а в стилях CSS вы прописываете регуляр и применяете к нему болд. Хотя кастомный шрифт, по идее, должен идти с отдельной полужирной гарнитурой (font-family:'academybold'). Картинка мелкая, сложно оценить.