единица измерения в css для размера шрифта

Question

Я уже искал и читал SOF на эту тему, я нашел интересные сообщения, особенно те, которые предложили использовать pt для размера шрифта, потому что он не связан ни с плотностью пикселей, ни с разрешение, но я все еще в поиске ...

Есть ли способ, чтобы я мог определить определенный размер шрифта в моем документе css, но использовать его пропорционально размеру шрифта по умолчанию браузера? что-то вроде этого:

х = по умолчанию, размер шрифта, в браузере%

блок в использовании = (х)/(мой целевой размер%) эм

затем использовать это для каждого дополнения, поля и т. д. в дизайне, что невозможно в CSS, если я знаю!

Я обнаружил, что люди угадывают как «обычно, по умолчанию браузер имеет размер шрифта 16px», я не хочу угадывать.

Некоторые предложили использовать 100% для тега html и определить все остальные размеры с помощью rem: теперь, если пользователь имеет неправильный размер шрифта по умолчанию браузера? Затем пользователь увидит все сайты, которые хорошо перезаписаны, за исключением моего сайта, который не перезаписывает его! Конечно, я могу думать об этом как о проблеме пользователя и оставить его, но я не буду так поступать.

Просьба дать идеи.

Answer 1

Размер шрифта по умолчанию одинаковый в каждом браузере AFAIK.

Распространенное предложение для размера шрифта:

body { 
    font-size: 62.5%; 
} 

Это устанавливает базовый размер шрифта в 10px, но с масштабированием.

Тогда давайте говорить, например, вы хотите, чтобы текст вашего сайта, чтобы быть 16px, вы делаете:

p, ul, ol, table { 
    font-size: 1.6em; 
} 

А затем установить ваши заголовки:

h1 { 
    font-size: 2.5em; 
} 
h2 { 
    font-size: 2em; 
} 

Для 25px и 20px соответственно.

Этот метод означает, что даже если размер шрифта по умолчанию не такой, как вы ожидали, текст должен по-прежнему масштабироваться соответствующим образом.

См. Это other post by me для некоторых интересных вещей, которые вы можете делать со шрифтами и размерами шрифтов. Хорошо работает с отзывчивой компоновкой

Answer 2

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

Возможности использовать пт в качестве единицы для определения размера шрифта предназначена для использования с принтерами , но это не хорошая идея, чтобы использовать его для экрана. Он пытается установить абсолютный размер (1pt = 1/72in). Даже если текст имеет правильный размер на вашем настольном ПК, скорее всего, это неверно на маленьком экране телефона. (Экран телефона просматривается с более короткого расстояния, поэтому шрифт должен быть меньше.) В дополнение к этому размер pt зависит от настройки dpi на компьютере пользователя.У многих пользователей неправильная настройка dpi (это зависит от используемого монитора), поэтому размер шрифта не будет таким, какой вы ожидаете.

Единица px не пользуется спросом, так как размер пикселей зависит от отображения, как и у пользователей. Однако полезно, если вы хотите, чтобы текст был правильно выровнен с изображением, так как изображение (если отображается в фактическом размере) имеет размеры в пикселях.

В большинстве случаев размер текста тела должен быть 100% (т. Е. Не меняйте его). Для других элементов используйте относительный размер (например, %). Если вы должны изменить размер шрифта для тела, другие элементы автоматически изменятся относительно этого. Размер, заданный как%, является размером относительно размера шрифта на родительском элементе.