05-08-2018 21:24

Правильные размеры шрифтов CSS

До создания HTML/CSS никакой проблемы с выбором размера шрифта не существовало. Механизм печатной машинки имел только один набор символов одного размера. При отсутствии иных возможностей люди прекрасно общались между собой, создавали произведения искусства, проектировали атомные электростанции, летали в космос и посредством перфораторов вводили сложные программы в память вычислительных машин через перфокарты, а это только 1 или 0.

Красивый сайт с профессиональным дизайном

Как проверить скорость работы интернетаВам будет интересно:Как проверить скорость работы интернета

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

Разработчики стандартов HTML/CSS, браузеров и различных инструментальных средств отвечали на потребности разработки веб-ресурсов, но довольно быстро все вернулось на круги своя. На самом деле разработчику сайта важно выполнить работу быстро и качественно, а посетителю сайта - получить информацию. Рисовать и говорить умеют все, но гораздо важнее передать/получить информацию.

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

Как удалить "ВКопт" из всех популярных браузеровВам будет интересно:Как удалить "ВКопт" из всех популярных браузеров

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

Возможности CSS по управлению шрифтами

В этом примере предельно просто показаны основные возможности использования шрифтового арсенала CSS для описания тегов HTML.

Описание стилей выполнено следующим образом.

С самого начала HTML предлагал для кодирования тег текста - p. Можно сказать, что тело веб-страницы - это тег body, а уже затем множество p, div, span и других тегов. С самого начала CSS предлагал правила - задавать шрифт, цвет, размер, выравнивание и другие.

Современная реализация поддержки HTML/CSS в браузерах позволяет динамично влиять на правила CSS: изменение размера шрифта здесь не исключение, а часто применяемое действие.

Логика формального подхода

HTML и CSS - это мощные формальные системы представления данных. Опыт программирования многих десятилетий, знания и умения сотен тысяч квалифицированных специалистов привели к созданию фундаментальных правил описания и использования данных.

Задать размер шрифта на CSS - не проблема. Изменить его в серверном скрипте при создании страницы - элементарно. Как только страница попала в браузер, и он построил DOM (дерево объектов страницы), посредством JavaScript легко можно всем управлять, и размер шрифта - не исключение.

Для чего, в каких случаях и как изменить размер шрифта? CSS-правила - это статика, JavaScript - динамика. Через DOM и обработчик на JavaScript программист имеет динамичный доступ к любому правилу CSS. Не просто динамичный: можно менять что-то по ходу движения посетителя и по собственному таймеру сайта во времени.

Можно изменить все, что описано в файле CSS: размеры шрифтов, семейства шрифтов, цвета, выравнивание и любые иные правила. Можно все сделать так, что сайт не будет дожидаться действий конкретного посетителя, а будет учитывать поведение всех посетителей сайта и/или логику разработчика.

Логика естественного общения и клавиатура

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

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

Данные обстоятельства со всей объективностью объясняют, почему широкие возможности HTML и CSS в современном интернет-программировании стремятся к практичной и комфортной реализации. Уже нет той пестроты тегов, применения мигающих правил, вращающихся текстовых строк и бегущих объектов.

До сих пор простая клавиатура (как простая печатная машинка) имеет набор символов и знаков, но на ней по-прежнему нет кнопки размера шрифта. Разработчику не приходит на ум изменить размер шрифта CSS-правила поля ввода. Его больше заботит то, как обеспечить удобный диалог: ввод/вывод информации.

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

Размеры шрифтов CSS сам может менять. CSS - это не только правила описания тегов. Это классы, идентификаторы, псевдоклассы и псевдоэлементы. Комбинируя описания CSS, можно отказаться от использования JavaScript в решении некоторых задач. Например, изменить размеры шрифтов CSS может посредством комбинации: a, a:hover, a:visited, a:active...

Выполнив основное описание для a, можно уточнить его в hover, visited и active. Разработчик имеет массу возможностей, но у него уже есть понимание достаточного и необходимого в применении этих возможностей.

Размер окна, строки и символа

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

Не стоит навязывать посетителю свою комбинацию размеров элементов HTML-страницы. По большому счету решать, как должна выглядеть страница - компетенция посетителя. Это в его браузер «попадает» разработчик со своими идеями функциональности и дизайна страницы.

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

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

В приведенном выше примере допущена «ошибка разработчика» - строчки 4 и 5 содержат Times 14px, но отображены разными размерами. Соседние теги несут в себе такую же ошибку. Иначе говоря, нет никакой связи между:

  • текстом;
  • тегом, в котором он находится;
  • CSS-правилом на размер шрифта.

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

Оптимальный размер

Объективная действительность - пример «целесообразности размеров». Пчела не может быть больше, чем есть, а самолет не может быть такого размера, как пчела.

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



Источник