|Web Учебник | Самоучитель по HTML |Самоучитель по PHP + MySql |Основы PhotoShop |Контакты. |

Как задать шрифт в CSS.

В HTML на первый взгляд все просто с шрифтами, поставил тег FONT с атрибутом FASE и готово, но начинаешь тестировать свой сайт на разных компъютерах и пошли проблемы, то нужный шрифт не установлен, то из-за локальных настроек шрифт слишком мелкий и не разборчивый... Каскадные таблицы стилей позволяют это контролировать.

Что такое глиф и шрифт.

Шрифт - это набор глифов, соблюдающий стандарт в в соответствии с дизайном, размером, внешним видом и другими эфектами.
Глиф - это абтрактный глиф в типографическом стиле, выполнен в векторном или растровом(точечном) стиле, проще говоря глиф это векторная или растровая картинка, на которой изображен один или несколько символов.
Абстрактный глиф - абстракто-информационный элемент, т.е. символ(буква, цифра и спец.символ).
Другими словами шрифт это картинка с набором символов и спец.символов.
Прежде чем вывести на экран или бумагу символы пользовательский агент(П.А.) обязан определить:
1) задан ли явно или наследуется ли шрифт для данного символа;
2)проверить доступность данного шрифта;
3)если два верхних пункта выполняется, то определить глиф для нужного символа;
4)что нужно сделать если шрифт не задан или не доступен.

Свойство спецификации шрифтов в CSS.

Самая важная спецификация шрифтов это Семейство шрифтов(font-family), семейства делятся на категории:
serif - глифы шрифтов serif имеют множество изгибов на концах символов, так-же имеются заужения или засечки.
sans-serif - глифы имеют более равномерное начертание линий и полное отсуствие засечек и других орнаментов.
cursive - название говорит само за себя, гливы имеют наклон и/или елементы для соединения символов.
fantasy - фантазийные шрифты, имеют множество орнаментов и других абстракционныых элементов.
monospace - моноширинный(печатный) шрифт.
Зачем знать семейства шрифтов? Все очень просто, например вы решили сделать страницу с описанием какого либо скрипта, будут кирилические и латинские символы и вы решили сделать шрифт печатным, для этого вам понадобится шрифт для кирилических символов, например Everson Mono и шрифт для латинских Courier, значит ваше правило будет выглядеть вот так:
BODY{font-family: Courier, "Everson Mono", monospace;}
Каскадные таблицы стилей позволяют задавать один или более шрифтов разделеных запятыми, если шрифт в имени имеет пробелы то его нужно помечать в кавычки, если у П.А. не установлены указаные шрифты, то он должен определить категорию(в нашем случае monospace) и согласно ей подобрать нужные, если нужного не окажется то отобразить все в шрифту по умолчанию для П.А.

Правило font-style: позволяет управлять стилем шрифта и может принимать значения:
font-style:normal - нормальное представление шрифта, значение по умолчанию.
font-style:italic - курсивное предоставление шрифта
font-style:oblique - другая разновидность курсива, которая подразумевает следующие стили шрифтов:Oblique, Slanted или Incline
Свойство font-style используется самостоятельно или вместе с font-family.

Правило font-variant: позволяет управлять вариантами шрифтов:
normal - определяет шрифт который не отмечен как малый заглавный.
small-caps - малый заглавный шрифт.
inherit - вычисленое значение.

Правило font-weight: устанавливает толшину(жирность) линий символов: от font-weight:100 до font-weight:900 - значение задается цифрами, чем цифра больше тем шрифт жирнее, допустимые значения: 100, 200, 300, 400, 500, 600, 700, 800, 900
font-weight:lighter тонкий шрифт, то же что и 100.
font-weight:normal нормальный шрифт, то же что 400.
font-weight:bold полужирный шрифт, тоже что и 700.
font-weight:bolder жирный шрифт, тоже что и 900.

Правило font-size: позваляет управлять размером шрифта, зачением могут быть абсолютные и/или относительные единицы измерения, а так-же проценты. Отрицательные значения недопустимы!!!

Правило font-size-adjust: управляет разборчивостью шрифтов в двухкамерном написании, т.е. чтобы глифы легко читались, например мы используем шрифт Verdana и его аспект равен .58, так-же мы используем второй шрифт Georgia у которого аспект равен всего .5, то в этом случае если текст с шрифтом Verdana легко читается с размером font-size:12px, то чтобы определить разборчивось второго шрифта нам нужно воспользоваться формулой:
font-size1(аспект1 / аспект2) = font-size2 , в нашем случае 12(0.58/0.5)= 13.92пикселя, т.е. разборчивось шрифта Georgia начинается от 14px.
Как определяется аспект?, например мы устанавливаем высоту букв верхнего регистра font-size:100px, при этом буквы нижнего регистра(x-height) будут занимать только 58px, то чтобы определить аспект данного шрифта нужно x-height разделить на font-size в нашем случае 58/100=0.58 значит аспект будет .58
Из этого можно сделать вывод, что шрифты с большим аспектом будут разбочививы при небольших размерах шрифта и наоборот.
П.С. Как определить аспект шрифта в спецификации неописано, если задать 2 правила(font-size и x-height) то одно из них будет проигнорировано, сами шрифты данной информации не несут, значит эти цифры можно получить только в разработчика...

Правило font: - это груповое правило которое помещает в себя все выше перечисленные правила в такой последовательности:
*{font:
font-style: normal;
font-variant: normal;
font-weight: 400;
font-size: 12pt;
line-height: normal;
font-family: Verdana
}

Т.е. рабочая версия:
*{font:normal normal 400 12pt normal Verdana, sans-serif;}
Нарушать последовательность нельзя или пропадет работоспособность правила, но можно не устанавливать(пропускать) не нужные вам правила, в этом случае П.А. подставит начальные значения для шрифта.

 

                   Перейти к выбору следующей страницы
 

Добавить в закладки
Добиться абсолютной межбраузерности для механизма добавления в закладки не существует ни на каких языках!!! А для браузера "Chrome" не работают вообще ни какие механизмы!!!
Потому это лучше всего делать в ручную при помощи одновременого нажатия клавиш Ctrl и D , после чего нужно нажать готово(добавить). Такой "механизм работает всегда и везде!!!