Размер шрифта

[DjTarik]

Верстал очередной макет и подумал - а какой толк верстать сайт на em, если я его указываю только для шрифта? Все отступы у меня в px...

1. Как вообще правильно делать?

2. Т.к. пользователь может изменить размер - нельзя ли как-нить задать максимальное и минимальное значение? Что-то типо: по-умолчанию font-size: 1.2em; максимальный (при увеличении) - 2em. Или так нельзя? o_O

[psywalker]

Я лично верстаю так: http://psywalker.ru/Portfolio/FreshWebLab/home-page.html Там посмотри чему я задаю размеры в ЕМ, а чему в РХ. А вообще я только сам учусь, поэтому не бери за правило

[DjTarik]

Я лично верстаю так: http://psywalker.ru/Portfolio/FreshWebLab/home-page.html Там посмотри чему я задаю размеры в ЕМ, а чему в РХ. А вообще я только сам учусь, поэтому не бери за правило

Так и не нашел закономерности, почему в одном случае px, а в другом - em) Может на словах кратко расскажешь? Какой принцип у тебя?

А что со вторым вопросом?

[psywalker]

Так и не нашел закономерности, почему в одном случае px, а в другом - em) Может на словах кратко расскажешь? Какой принцип у тебя?

А что со вторым вопросом?

1) На словах не расскажу, темболее сам только учусь

2) А как правильно делать, это уже нужен опыт, нельзя так сходу объяснить, я уже год с чем-то верстаю на Ем, пробовал и так и этак, задавал размеры в ЕМ всем блокам и не всем, в общем пробуй, экспериментируй друг, со временем сам поймёшь для себя, как правильно

[Searcher]

Главный принцип, чтобы страница при всех возможных разрешениях, размерах шрифтов и масштабах оставалась читаемой и удобной для посетителя. А как этого добиться - в каждом случае свое решение.

[psywalker]

Главный принцип, чтобы страница при всех возможных разрешениях, размерах шрифтов и масштабах оставалась читаемой и удобной для посетителя. А как этого добиться - в каждом случае свое решение.

Вот это верно сказано, я последнее время по такому принципу и верстаю, но опятьже на пути ещё много преград встречается, со временем думаю разберусь

[Hedron]

Верстал очередной макет и подумал - а какой толк верстать сайт на em, если я его указываю только для шрифта? Все отступы у меня в px...

1. Как вообще правильно делать?

em зависит от размера шрифта, а px – фиксированная величина. Ты сам должен решать/определять, какие размеры у тебя будут относительные (резиновые) и тогда мерять их в %, какие должны зависеть от размера шрифта (тогда мерять их в em), а какие – фиксированные (тогда мерять их в px или в pt)

PS.: Спасибо, что напомнили про em

[DjTarik]

Спасибо всем за ответы.

Главный принцип, чтобы страница при всех возможных разрешениях, размерах шрифтов и масштабах оставалась читаемой и удобной для посетителя. А как этого добиться - в каждом случае свое решение.

Но бывает и такие дизайны, при которых это сделать нереально. Как пример, техника, при которой текст прячется под картинкой - тут уже никак не "смасштабируешь", т.к. текст будет "вылазить" за фоновую картинку. Или когда ширина блока фиксированная. И таких примеров много. Как поступать в таких случаях?

em зависит от размера шрифта, а px – фиксированная величина. Ты сам должен решать/определять, какие размеры у тебя будут относительные (резиновые) и тогда мерять их в %, какие должны зависеть от размера шрифта (тогда мерять их в em), а какие – фиксированные (тогда мерять их в px или в pt)

PS.: Спасибо, что напомнили про em

А разве есть разница, в чем задавать размер шрифта? По-моему, браузеры могут масштабировать все единицы измерения... Или я что-то путаю?

[Yahoo!]

А я верстаю в процентах. Это плохо?

В этой статье говориться, что использование процентов выигрышнее

http://habrahabr.ru/blogs/webdev/42151/

Edited October 17, 2009 by Yahoo!

[psywalker]

А я верстаю в процентах. Это плохо?

В этой статье говориться, что использование процентов выигрышнее

http://habrahabr.ru/blogs/webdev/42151/

Статья говно полное

[Yahoo!]

Почему?

[s0rr0w]

Почему?

Потому что исследование проводил дилетант.

[Hedron]

Но бывает и такие дизайны, при которых это сделать нереально. Как пример, техника, при которой текст прячется под картинкой - тут уже никак не "смасштабируешь", т.к. текст будет "вылазить" за фоновую картинку. Или когда ширина блока фиксированная. И таких примеров много. Как поступать в таких случаях?

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

А разве есть разница, в чем задавать размер шрифта? По-моему, браузеры могут масштабировать все единицы измерения... Или я что-то путаю?

Что именно ты понимаешь под понятием "масштабировать"? Например:

1. В IE можно задать размер шрифта по умолчанию (маленький/средний/крупный и т.п.) — но изменяться будет только то, что задано в em. А если размеры (шрифта, отступов и т.п.) задавались в px или pt, то они меняться не будут.

2. Можно ведь изменить и "масштабный коэффициент" для всего Windows'a (для ХР: свойства экрана ==> вкладка "параметры" ==> кнопка "дополнительно" ==> вкладка "Общие") — и изменится соотношение между px и pt. И будут изменяться размеры, заданные в pt (и в em, если размер шрифта прямо или косвенно задаётся в pt)

Ради интереса можешь попробовать поэкспериментировать с такой страничкой:

<html>
<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Соотношения единиц измерений</title>
</head>
<body>
<table border="1" width="100%" cellspacing="0" cellpadding="0">
	<tr><td style="padding-left: 100px">|px</td></tr>
	<tr><td style="padding-left: 75pt">|pt</td></tr>
	<tr><td style="padding-left: 6.25em">|em</td></tr>
	<tr><td> </td></tr>
	<tr><td style="padding-left: 5em">| 5em - размер шрифта - по умолчанию</td></tr>
	<tr><td style="font-size: large; padding-left: 5em">| 5em  - размер шрифта - "large"</td></tr>
</table>
</body>
</html>

Изначально в первых 3-х строках отступы визуально одинаковы (если это не так, лучше сначала отрегулировать отступы, а потом экспериментировать)

PS: Заметил у FireFox'a один "прикол": во всех программах (включая сам Windows) размер шрифта меряется в пунктах (pt) (это исторически сложившаяся практика, взятая из полиграфии). А вот у ОгнеЛиса (проверял на версии 3.5.2) по умолчанию шрифт меряется в пикселах Это может приводить к разным приколам: например, в настройках FireFox'a, чтобы задать размер шрифта по умолчанию в 12pt (обычный размер шрифта) мне пришлось задать значение "16".

Edited October 17, 2009 by Hedron

[Hedron]

Ещё иллюстрация особенности em:

<html>
<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Особенности em</title>
<style>h1 { font-size: 0.9em; margin: 0 }</style>
</head>
<body>
<h1>Раз<h1>Два<h1>Три<h1>Четыре<h1>Пять<h1>Шесть<h1>Семь<h1>Восемь
<h1>Девять<h1>Десять</h1></h1></h1></h1></h1></h1></h1></h1></h1></h1>
</body>
</html>

Шрифт каждого последующего уровня будет меньше предыдущего.

Однако, есть и приколы:

1. Если в IE (по крайней мере в IE 6) установить размер шрифта "Самый крупный" — шрифт каждого последующего уровня будет БОЛЬШЕ предыдущего

2. В FF (Проверял в FF 3.5.2) ВСЕ уровни — ОДИНАКОВОГО РАЗМЕРА

Edited October 18, 2009 by Hedron

[DjTarik]

Все понятно... К каждому конкретному случаю будем подходить индивидуально.

Последний вопрос: можно ли как-нить запретить пользователю изменять размер шрифта (или ограничить его в этом? К примеру поставить какие-нить допустимые максимальные и минимальные значения?) Имеется ввиду изменение размеров на 'CTRL+' и 'CTRL-'.

[s0rr0w]

Ещё иллюстрация особенности em:

Это иллюстрация вашей безграмотности.

[Hedron]

Последний вопрос: можно ли как-нить запретить пользователю изменять размер шрифта (или ограничить его в этом? К примеру поставить какие-нить допустимые максимальные и минимальные значения?) Имеется ввиду изменение размеров на 'CTRL+' и 'CTRL-'.

А про какую программу ты говоришь? Если я правильно понимаю, в FireFox'e (да и в Опере) по 'CTRL+' и 'CTRL-' изменяется масштаб, то есть меняются все размеры, а не только размеры шрифта.

На всякий случай напомню: если размер шрифта задан в pt (ну или в px), то в IE опция "размер шрифта" (маленький/средний/большой) на этот шрифт действовать не будет.

РS. А вообще, что-то запрещать, думаю, не самая лучшая идея — пусть пользователь сам решает.

Edited October 18, 2009 by Hedron

[DjTarik]

А про какую программу ты говоришь? Если я правильно понимаю, в FireFox'e (да и в Опере) по 'CTRL+' и 'CTRL-' изменяется масштаб, то есть меняются все размеры, а не только размеры шрифта.

На всякий случай напомню: если размер шрифта задан в pt (ну или в px), то в IE опция "размер шрифта" (маленький/средний/большой) на этот шрифт действовать не будет.

В последней версии FF (там есть галочка) и в Safari как раз так и изменяется. И в IE через менюшку... Я про эти функции... Можно ли на них повлиять?

[psywalker]

В последней версии FF (там есть галочка) и в Safari как раз так и изменяется. И в IE через менюшку... Я про эти функции... Можно ли на них повлиять?

Вот тебе пример кстати наглядный, я тут недавно хрень верстал одну, старался сделать так, что-бы при любом размере шрифта, где угодно, вёрстка осталась читабельной, и поэтому где надо чередовал ЕМ с РХ. Опять-же, я только учусь, поэтому пока только так выходит, но смысл тебе думаю будет понятен http://psywalker.ru/Portfolio/Himik/main-page.html

[Justnewone]

Вот тебе пример кстати наглядный, я тут недавно хрень верстал одну, старался сделать так, что-бы при любом размере шрифта, где угодно, вёрстка осталась читабельной, и поэтому где надо чередовал ЕМ с РХ. Опять-же, я только учусь, поэтому пока только так выходит, но смысл тебе думаю будет понятен http://psywalker.ru/Portfolio/Himik/main-page.html

Абсолютно хорошо отображается только при font-size:12px, Хотя, топикстартер, тебе как раз суда, основная идея - ответ на твой вопрос.

[psywalker]

Абсолютно хорошо отображается только при font-size:12px, Хотя, топикстартер, тебе как раз суда, основная идея - ответ на твой вопрос.

font-size:12px - это моя новая точка отсчёта, на тот случай, что-бы текст был не меньше 12рх, так как это в принципе минимальная читабельная цифра на мой взгляд. Поэтому только учусь, основываясь на старом опыте "font-size:10px" - это было легче высчитывать в ЕМ

[rus]

А мне не очень нравятся все эти заморочки с пунктами и емами, поскольку есть у них зависимость друг от друга, а мне бы что по проще, поэтому пользуюсь пикселями и не парюсь.

[psywalker]

А мне не очень нравятся все эти заморочки с пунктами и емами, поскольку есть у них зависимость друг от друга, а мне бы что по проще, поэтому пользуюсь пикселями и не парюсь.

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

[rus]

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

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

[psywalker]

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

Да, согласен, но стремится к этому я лично буду всегда

[DjTarik]

Короче, Макс, глянул твою верстку - получается, что там где ты хотел, что бы происходило масштабирование - отступы и поля (и размеры) задавал в емах. Там где нет - в пикселах, так? Плюс все шрифты - тоже в емах. Но, по идее, как ни крути - добиться максимального результата невозможно? (если жать на + до упора =)

И по идее - как-то ограничить максимальный и минимальный размер шрифта тоже никак нельзя? Я тебя правильно понял?