Добрый день.

Вопрос может немного странный, но очень хотелось бы получить ответ. 
Помогите, пожалуйста. 

Дело в том, что я html и css много лет использую. Но как-то увидел, что есть люди, которые красивее и быстрее делают различные страницы с текстом. При этом на странице в основном только текст. Похоже на то, что я делаю, но всё же видно что профессиональнее выглядит текст. В чём секрет или секреты?

Я лично делаю так, например, обычно: выбираю шрифт times new roman, хотя знаю конечно и другие шрифты.

Но в первую очередь меня интересует - как всё-таки указывать высоту шрифта в css лучше: в px, pt или ещё как-то? Чтоб шрифт получался нормально под разными броузерами. 

tikitiki, Отвечу в меру моего теперешнего понимания. Mожет и сам чего узнаю 

Шрифты бывают разные. TimesNewRoman не очень красиво выглядит, в маленьких размерах шрифта. Более прлично, из web-шрифтов  - Tahoma. Ариал - слишком широкий... Впрочем - на вкус и цвет...

Указывать размер шрифта лучше в пикселях. (px) 
Почему? Их проще вычислять. Пиксель он и в Африке пиксель. Любой граф редактор в первую очередь пишет пиксели...
Обычно, картинки составляют существенную часть оформления, иногда основную. Размеры картинок указываются почти всегда в пикселях, так что привязываться к разным системам измерения не очень хорошо. Хотя пересчитыватьпоинты в пиксели и наоборот мне утомительно 

Было какое-то странное для меня мнение, что указывать размеры всего-всего более профессионально в поинтах (pt). Может кто-нибудь на пальцах объяснить почему?

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



Это сообщение отредактировал(а) ksnk - 22.7.2009, 14:31

ksnk,  спасибо большущее за развёрнутый ответ.

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

ну я вижу одну причину - accessibility, у пользователя есть возможность менять масштаб (как в браузере, так и в системе)


вообще есть такая штука, как web safe fonts. Можно начать отсюда . Соответственно есть списки шрифтов, которые безопасно применять
Еще есть sIFR, typeface.js и подобные штуки для отображения шрифтов, которых нету у пользователя

Это сообщение отредактировал(а) youri - 23.7.2009, 18:08

Вот раньше, когда люди еще не знали, как нужно увеличивать шрифты и каждый придумывал как ему удобно, и родились странные и непонятные мне правила установки размеров в пунктах.
Сейчас люди, вроде, разобрались... Стало модно (и в Хроме и в FF) увеличивать ВСЁ, не только шрифты, но и картинки, и даже размеры, указанные в пикселях, и сейчас я не вижу никакой разницы, использовать pt или px. Это просто одно и то-же значение, с коэффициентом, который делает использование pt несколько более затруднительным.

Нужно поприводить примеров, когда пункты, по сравнению с пикселями реально различаются... Я чего-то уже перестал такое встречать...

Добавлено через 10 минут и 51 секунду
youri, Случайно не в курсе, есть ли в природе системы, в которых нету Tahoma?

Кстати, в IE7 тоже, вроде, нормально, но вот флешка при уменьшении размеров Ctrl-+/- не изменяется, так что не стоит позиционировать флешку в абсолютном контейнере, иногда результат страшен...

tikitiki, Вот так, обычно определяется текст, который будет отображаться тахомой 

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

конечно есть, в ссылке на википедию есть ссылки на списки web safe fonts, может быть информация о подобных шрифтах или где какие шрифты есть. На MacOs, например, аналог - Geneva


в ie 6, например, нельзя менять масштаб, если текст задан в px. На интерпретацию pt еще влияет Display Settings / Settings / Advanced / General / DPI Settings


даже так O_o

ksnk, применил tahoma в netcat. Но не увидел разницу. Может там уже была tahoma?

Оффтоп. Когда редактируешь страницу, то часто было, что браузер откуда-то достаёт старые страницы. Чистил временные файлы и что-только ни делал. Менял настройки браузера. И всё равно достаёт старые страницы. Например, поменял шрифт, а он старый остаётся. Происходит это кажись и в ie и в ff. Есть какие-то способы этого избегать? 

Извиняюсь. ))) Ошибся. Поменял на Times New Roman шрифт и конечно увидел разницу. В times засечки, а в tahoma - их нет.

Ой. Как тут много всего интересного. Но очень много недосказанного. Прийдется внести свой вклад, может кому и поможет.




Если вы уже много лет используете HTML и CSS и до сих пор с этим не разобрались,  это жестоко.
Для того, что бы текст выглядел профессионально, нужно просто профессионально его делать, тоесть знать хотябы основы верстки.



А я знаю карате. айкидо, самбо и много других страшных слов.

Итак. Шрифт times new roman — шрифт с засечками. Как он появился и так далее рассказывать не буду, можно почитать в других местах. Но самое важное, что нуно знать:

• times new roman присутствует не во всех операционных системах
• шрифты с засечками очень тяжело читаются при низком разрешении, но очень легко при высоком разрешении

Итак высокого разрешения массам не увидеть при работе за мониторами в ближайшепм будущем и поӕтому получаем первое правило. В вебе никогда не применять шрифты с засечками и декорационные шрифты.

Далее смотри в сторону поддержки пользователей разных ОС. У них могут быть установлены различные шрифты. Поэтому имеет смысл указывать несколько шрифтов в описании CSS-класса. Как это делать уже показал ksnk. Но тут начинается все самое плохое. Если в списке указаных шрифтов нет, то можно указать тип шрифта, они бывают следующие:

• serif — с засечками
• sans-serif — рубленые (без засечек)
• cursive — курсив/ Не путать с италиком
• fantasy — декоративные
• monospace — моноширные

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

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

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

Пункты (pt) для отображения на экране лучше не использовать, т. к. под понятием 1 пт подразумевается 1/96 дюйма. И на экране 1 пт = 1 пиксель только при разрешении 96dpi (это по умолчанию на винХР). большинство линуксов смотрит на линейные размеры монитора и пересчитывает разрешение также как и мак. О кпк и прочих девайсах даже говорить не хочу. Там с этим еще сложнее.

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

Теперь про кеш браузера. По умолчанию он включен для всех статических объектов. Тути 2 варианта настрой тестовый сервер чтобы он говорил браузеру никогда не кешировать контент. И второй у бразуера для обновления используй комбинацию Ctrl+F5, вместо обычного обновления страницы.

ну вроде как все.

Тут рядом сидит человек. И прочитав мой пост задал вопрос. А зачем вообще стили 

• cursive — курсив/ Не путать с италиком
• fantasy — декоративные
• monospace — моноширные

Отвечу сразу здесь. Т. к. большой шанс, что все равно спросят.

cursive использует наклонное начертание шрифта пописаное в самом шрифте. При это не используется эмуляции наклона. Поэтому шрифты этого симейства выглядят значительно лучше, чем просто указание италика для первого попавшегося под руку шрифта.

fantasy. Декоративные шрифты это ужас. В вебе это тройной ужас. Постарайтесь избавиться от таких шрифтов в своей работе или свести их к минимуму.

Моноширными шрифтами традиционно показывается код. Другого приминения я не вижу.

А теперь самое важное при использовании декоративных шрифтов НИКОГДА не указывайте название шрифта. Таким образом вы позволяете человеку спокойно отключить именно декоративные шрифты и облегчить себе жизнь. При указании имени, а не только симейства это усложняется и может привести к необходимости отключить или редактировать CSS сайта.

Везде где только можно заменяйте италик на курсив. Этим вы позволите человеку также отключить выделения, которые скорей всего ему не нужны.