Прежде всего, размер шрифта должен быть установлен по отношению к default- значение, которое определяется селектором html, в случае повторного форматирования.
Например:
html {
font-size: 100%;
}
h1 {
font-size: 2em;
}
td {
font-size: 1.25em;
}
Причина этого заключается в том, что различные платформы используют разные значения по умолчанию для 100%. Например. десктопы используют 16px, но мобильные браузеры часто используют 24px.
Если вы определяете размер шрифта одного из ваших элементов на абсолютное значение, он не будет масштабироваться вместе с остальными элементами, которым не присвоено значение или относительное значение; что приводит к такому поведению.
Лучшим решения этой проблема: использовать относительные размеры шрифта с em, rem или даже % в качестве единицы, istead абсолютного размера шрифта с pt или px в качестве единицы.
Редактировать для более фона на различных умолчанию размера шрифта на различных платформах:
Поскольку каждая платформа имеет свой собственный потребительной случай, свой собственный средний размер экрана, среднее расстояние для чтения до экрана, средняя DPI-значение для его экрана и (что наиболее важно) различной ширины окна просмотра, размер шрифта на каждой из этих платформ не одинаково разборчив, если установлен фиксированный размер. Вот почему браузеры определяют размер по умолчанию для чего-то другого, чтобы оптимизировать опыт для пользователя на этой конкретной платформе.
Несомненно, вы можете игнорировать это и постоянно устанавливать все размеры шрифта на что-то фиксированное, но это противоречит потоку и нарушает работу пользователя. Вместо этого постарайтесь примириться с этим фактом и быть уверенным, что все это правильно масштабируется.
Edit2: Чтобы предупредить вас об использовании em против rem: используя em наследуют родительское значение и умножить его на значении размера шрифта вы определяете в текущем элементе, при использовании rem воли всегда будет основываться на значении, которое устанавливается в корневом элементе вместо родительского элемента. Таким образом, следующий код будет приводить к следующим абсолютным значениям:
HTML:
<html>
<...>
<body>
<div>
<p>..</p>
</div>
</body>
</html>
CSS:
html {
font-size: 100%; /* we agree on 16px for this example */
}
div {
font-size: 1.25em; /* add a quarter of 16, so 20px is the actual value */
}
p {
font-size: 0.8em; /* subtract a fifth of the value of the parent element: 20 * 0.8 = 16 again */
font-size: 0.8rem; /* subtract a fifth of the value of the root element: 16 * 0.8 = 13.8 (will be rounded by browser to 14) pixels */
}
Извините, возможно, я не указал это достаточно ясно: если работает в iPhone и Opera, но мы хотели бы, чтобы он работал в Chrome и IE mobile. – Skrodde
Другая возможность заключается в написании шрифтов в px, а не в pt. Таким образом, шрифт всегда будет поддерживать свой размер. – Olli
Эй, см. Ответ Клара. Мы попробовали это, но все же в браузерах браузера Firefox и Chrome размер шрифта ячейки таблицы уменьшен ниже других размеров текста. – Skrodde