By
Arinden
Всем здравствуйте! Столкнулся с проблемой и никак не могу найти рабочее решение. Помогите неучу, пожалуйста! Вот ссылка на JSFiddle и пример кода:
HTML:
<div class="lineHeight">
HELLO // line-height method
</div>
<div class="padding">
HELLO // padding method
</div>
CSS:
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
div {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
height: 100px;
background: lightgreen;
margin: 5px;
padding-left: 10px;
box-sizing: border-box;
}
.lineHeight {
line-height: 100px;
}
.padding {
padding-top: 42px; /* (100px - 14px) / 2 - 1px */
}
Ситуация следующая:
В случаях с line-height и padding текст ровно по центру, отступы по 45px сверху и снизу:
- Google Chrome (v. 55.0.2883.87 m);
- Mozilla Firefox (v. 50.1.0);
- Opera (v. 42.0.2393.94);
- Safari (macOS, v. 10.0 12602.1.32.7);
Для line-height отступы по 45px, для padding 46px сверху и 44px снизу:
- Safari (Windows, v. 5.1.7 7534.57.2);
В случаях с line-height и padding текст ровно по центру, отступы 46px сверху и 44px снизу:
- Internet Explorer 11 (v. 11.576.14393.0);
- Microsoft EDGE (v. 38.14393.0.0);
Я понимаю, что в ряде случаев это не принципиально, но что делать если блок с текстом это, например, меню, а сбоку от текста расположена ровная иконка, положение которой задано через background-position. Выравниваешь иконку для одного браузера - плывёт в другом. Выглядит весьма заметно и некрасиво. И Бог бы с этим эксплорером, но дело вот в чём, на Android 6.0.1 (device pixel ratio 4.0) стандартный интернет браузер, а также скаченный Google Chrome центруют неровно, также наблюдается расхождение в 1 пиксель, а вот на это уже закрывать глаза не хочется (большой скрин с Android):
Что примичательно, высота первой буквы на настольных компьютерах 10px, а на андроиде чуть больше.
Разумеется добиться идеальной картинки, да ещё и во всех браузерах одновременно, невозможно, но ведь это не какой-то частный случай, а вполне закономерное желание разместить текст по центру меню-бара. Я буду очень признателен за Вашу помощь и пояснения на предмет "best-practices".
Что я пробовал для решения данной проблемы:
- Использовал разные шрифты, а также разные методы подключения внешних шрифтов: link через html / @import в CSS для Google Fonts, а также @font-face url для скаченных шрифтов;
- Задавал размеры шрифта, отступы, line-height в em / rem / px;
- Пробовал различные комбинации line-height + padding;
- Для создания иконок меню пробовал псевдо элементы, это конечно же решает проблему расположения иконок относительно текста, но не решает проблему центровки по вертикали.
P.S. CSS сброшен. Meta viewport задан.
Доп. вопрос от новичка: Почему, задавая размер шрифта 14px, заглавная буква по факту занимает 10px? При этом если я использую буквы типа "Й" и "р", высота занимаемая текстом будет уже 16px, но никак не 14px. Что-же задают тогда эти пиксели в размере шрифта?
Question
papay
Даже не знаю с чего начать, хм... Проблема в том, что в IE9, очень плохо отображаются шрифты, без сглаживания, какие то даже может не четкие, размытые.
В интернете находил много тем с обсуждением данной проблемы, но конкретного решения не встречал, об этом можно почитать на хабре или ixbt.
Пример сравнение рендеринга шрифта в разных браузерах на картинке:
Мне же интересно как решить данную проблему, что бы во всех браузерах шрифт отображался примерно одинаково, а если быть точней, что бы IE9 отображал нормально шрифт, как это было в IE8 или в других же браузерах. Тут уже как то пару раз спрашивал, не создавая новую тему, но ответа так и не получал, не ужели ни кто не знает, как быть? Не спорю, что возможно и мой косяк, вот и хотелось бы уточнить.
Edited by papayLink to comment
Share on other sites
4 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.