Jump to content
  • 0

Зачем нужны шрифты в %, если браузеры одинаково масштабируют шрифты и в относительных и абсолютных значениях?

clavin

Asked by clavin,

 Share

Question

clavin Explorer

clavin

Posted
Posted

После прочтения поста http://habrahabr.ru/post/42151/ я сделал тестовую страницу http://cssdesk.com/UCA4e с таким кодом внутри:


body {
	font-size:100%;
}

текст не в параграфе
<p style="width:200px; border:1px solid #ff0000;">текст внутри параграфа</p>
<p style="width:200px; border:1px solid #ff0000; font-size:120%;">шрифт в процентах</p>
<p style="width:200px; border:1px solid #ff0000; font-size:1.2em;">шрифт в em</p>
<p style="width:200px; border:1px solid #ff0000; font-size:16px;">шрифт в пикселях</p>
<p style="width:200px; border:1px solid #ff0000; font-size:12pt;">шрифт в пунктах</p>

Хочется узнать, почему все так стремятся использовать относительные размеры шрифтов, если они полезны только в одном случае, если мы изменяем размер шрифта на теге <body>? Если же мы изменяем зум, например, в Firefox или другом браузере, то мы видим, что изменяются как шрифты, заданные в относительных размерах, так и шрифты, заданные в абсолютных значениях. В чём тогда преимущества для обычных пользователей? Только не говорите мне, что вместо меню "Вид->Масштаб" и клавиш "Ctrl" + "+" и "Ctrl" + "-" обычные пользователи полезут в настройки браузера и поменяют там дефолтный шрифт с 16 пикселей на 24 пикселя, чтобы у них половина сайтов стало отображаться неправильно.

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

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0
clavin Explorer

clavin

Posted
  • Author
Posted (edited)

Спасибо за интересную ссылку, но вопрос это не раскрывает. Будь я обычным пользователем, что мне дадут эти относительные размеры шрифтов, если я не смогу одним нажатием клавиши исправить недочёты, возникающие из-за слишком маленьких или слишком больших шрифтов?

Я только иногда вижу ситуации, когда зум браузера помогает при чтении. Например на этой странице зумирование хорошо работает. При увеличении полоса прокрутки сначала даже не появляется (сам макет не увеличивается, а подгоняется под размер экрана). Зум на этом макете работает хорошо.

А если взять другую страницу, как например главная страница гугл, то при увеличении зума макет как будто просто увеличивается в размерах (как бы приближается к нам) и всё. Это уже плохо.

В общем, как мне кажется, на то как зумируется страница влияеет её макет. Каким он тогда должен быть этот макет, чтобы при любом или почти любом разрешении экрана зумироваие позволяло изменить нужным образом текст, не испортить макет и не создать горизонтальные полосы прокрутки? Это должен быть эластичный макет? Не изучал подробно этот вопрос, но мне кажется очевидным, что для нормального масштабирования текста одного условия, что нужны шрифты с относительными размерами, недостаточно.

Мои размышления ушли немного не в сторону :) Я правильно понял, что зум браузера не просто влияет на размеры шрифтов, а делает некие сложные преобразования, что смысл использовать только лишь относительные размеры шрифтов (без чего-то другого в макете) теряется?

Edited by clavin
Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted

Вот тут очень хорошо объясняется когда удобны относительные размеры шрифтов. Суть в том, что при необходимости мы меняем размер шрифта только для <body>, а весь оcтальной CSS подстраивается автоматом. Очень удобно.

Ну и вообще статья полезная :)

  • Like 2
Link to comment
Share on other sites
  • 0
clavin Explorer

clavin

Posted
  • Author
Posted

Вот тут очень хорошо объясняется когда удобны относительные размеры шрифтов. Суть в том, что при необходимости мы меняем размер шрифта только для <body>, а весь оcтальной CSS подстраивается автоматом. Очень удобно.

Ну и вообще статья полезная :)

А если все размеры шрифтов указать в абсолютных единицах, то пользователь браузера при зумировании разницу не заметит... :rofl:

Я имею ввиду этот пример

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted

При чем тут зуммирование? Речь идет о том, что при разных физических размерах экрана шрифт будет разного размера. Например у меня есть сайт который должен одинаково хорошо выглядеть в мобиле, в нетбуке и в телевизоре. Вот для этого я изменяю размеры шрифтов для кажного из устройств (с телека шрифт 12px читать невозможно если сидишь за 2 метра от него). И вот чтобы не менять 100500 строк CSS-кода под каждый случай я изначально указываю относительные размеры шрифтов, чтобы потом менять размеры всего текста на странице всего одним правилом.

Так понятно? Все еще смешно?

Link to comment
Share on other sites
  • 0
clavin Explorer

clavin

Posted
  • Author
Posted

При чем тут зуммирование? Речь идет о том, что при разных физических размерах экрана шрифт будет разного размера. Например у меня есть сайт который должен одинаково хорошо выглядеть в мобиле, в нетбуке и в телевизоре. Вот для этого я изменяю размеры шрифтов для кажного из устройств (с телека шрифт 12px читать невозможно если сидишь за 2 метра от него). И вот чтобы не менять 100500 строк CSS-кода под каждый случай я изначально указываю относительные размеры шрифтов, чтобы потом менять размеры всего текста на странице всего одним правилом.

Так понятно? Все еще смешно?

Сейчас стало понятно, что шрифты следует задавать только в относительных размерах на любых макетах, эластичных или фиксированных. Другой методики в HTML-вёрстке просто не существует. Поэтому без лишних вопросов следует именно так и верстать.

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted
Уже давно можно использовать пиксели для всего и не париться, имхо.

Ты не прав. Пойми, в адаптивной верстке фиксированные размеры шрифтов задолбаешься поддерживать. Прочитай внимательно эту статью еще раз. Если будет снова непонятно готов объяснить на пальцах.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Уже давно можно использовать пиксели для всего и не париться, имхо.

Ты не прав. Пойми, в адаптивной верстке фиксированные размеры шрифтов задолбаешься поддерживать. Прочитай внимательно эту статью еще раз. Если будет снова непонятно готов объяснить на пальцах.

Да, согласен. Не прав. Я имел ввиду про обычные сайты, не адаптивные. Имхо, в них ни к чему другие единицы.

Link to comment
Share on other sites
  • 0
clavin Explorer

clavin

Posted
  • Author
Posted

Great Rash, при изучении данной темы я столкнулся с той проблемой, что не хватает нужной терминологии. Я думаю, есть как минимум три вида масштабирования шрифтов, которые должны быть очевидно отличены друг от друга.

1) масштабирование с помощью браузера (CTRL + "+")

2) масштабирование с помощью тега <body>, когда на нём изменяется шрифт

3) изменение дефолтного шрифта в настройках браузера (если изменится то тоже произойдёт масштабирование шрифта на странице)

А то везде говорят о масштабировании, а о чём конкретно идёт речь непонятно. А ведь это три совершенно разные вещи!

  • Like 1
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

Даже не три, а больше:

4) масштабирование только текста ("View - Text Size" в IE, Ctrl + "+/-" в FF при включенной опции "View - Zoom - Zoom Text only")

5) изменение разрешения в настройках ОС (125% или 150% aka "крупный шрифт" и "гигантский шрифт" в старых версиях Windows) — там свои нюансы, вот старая, но занятная статья про них.

6) зум пальцами на мобильнике (почти то же, что п. 1, но бывают специфические отличия)

7) "раздутие" текста мобильными браузерами типа для удобства чтения (в теории, управляется отдельным свойством text-size-adjust и с обычным зумом не пересекается, на практике бывают свои приколы, а применение -webkit-text-size-adjust:none; в десктопных вебкитах раньше ломало п. 1 напрочь)

Возможно, кто-нибудь вспомнит еще пару-тройку вариантов :)

  • Like 1
Link to comment
Share on other sites

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.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept