Размер системного шрифта в Операционной системе
В ОС Windows изменяем размер шрифта в системе (допустим ставим 125%) .
Далее в браузере (например FireFox) выводим ширину нашего экрана (js: document.width()) , и видим , что на мониторе 1600*1200 наша ширина примерно 1327.
Соответственно если размер системного шрифта сделать нормальный 100% (а на самом деле для нормальных людей на мониторе 1600*1200 это будет НЕ нормально, а очень мелко), то видим нашу нормальную ширину 1600 px.
Размер шрифта по умолчанию в самом браузере
И еще , что вы думаете о размере шрифта по умолчанию в самом браузере? Например FireFox реально меняет размер текста на странице. Но значение js: document.width() не меняется 1327,
Масштабирование в браузере при помощи зажатой клавиши CTRL и колеса мышки
Тут document.width() меняется вместе с размером текста. Учитывайте также, что отрабатываются media запросы при переходе через пороги размеров экрана.
О себя добавлю
1. Всегда увеличивайте в Windows системный шрифт до комфортного чтения текста
2. Никогда не работайте за ноутбуком больше 1 часа в день! Потому-что производители ноутбуков делаю межпиксельную решетку ноутбуков,смартфонов во много раз более толстой чем у Десктопов. Ибо ноутбук предназначен для мобильной кратковременной работы (по мнению самих производителей ноутбуков) и им наплевать если вы работаете больше и сажаете свое зрение (ведь они предупреждали).
Можем ли мы гарантировать реальный размер шрифта у пользователя
Допустим пользователь выбрал мастаб 100% и в ОС и на нашей странице браузера. В настройках браузера пользователь указал 14px - размер шрифта по умолчанию (или чаще всего пользователь не подозревает, что есть такая настройка и что там указано);
Если мы НЕ забудем указать для страницы body{font-size: 12px;} , то картинка будет такая :
А если мы забудем указать для элементов страницы размер в px (или укажем в em), то браузер возьмет размера шрифта , который у него установлен по умолчанию. И для его ,например, 16px текст на странице будет уже крупнее:
Для своего сайта я решил делать так:
Обязательно указывать font-size в px для всех элементов страницы, но для разной ширины страницы width() разные font-size.
что-то в таком духе :
@media screen and (min-width: 2001px) {
body{
font-size : 26px;
}
}
@media screen and (max-width: 2000px) {
body{
font-size : 20px;
}
}
@media screen and (max-width: 1600px) {
body{
font-size : 16px;
}
}
@media screen and (max-width: 1199px) {
body{
font-size : 14px;
}
}
...
И тогда, даже если мы не знаем ,что там пользователь установил в ОС и какой мастшаб в браузере накрутил колесом, мы добьемся ,что при открытии нашей страницы , он будет видеть не слишком мелкий и не слишком крупный, а нормально читаемый текст.