CSS: использование шрифтов в дизайне сайта
У веб-дизайнера очень часто возникает проблема с определением шрифтов для оформления сайта. На сегодняшний день нет решения по внедрению в дизайн сайта шрифта, которого нет на компьютере посетителя сайта.
Если, конечно, не использовать флешь-технологию или вместо текста вставлять графику…
Как правило, веб-дизайнеры в css-таблице прописывают сразу несколько похожих и взаимо-заменяемых шрифтов. Однако, если для одной операционной системы они подходят, то не факт, что такой набор шрифтов установлен на другой ОС. Так, например, прописав шрифт Times New Roman или Calibri, присутствующие в Windows, веб-дизайнер не может рассчитывать на то, что пользователь с Linux увидит их.
В css 2.0 была инструкция, согласно которой браузер должен загружать шрифт из указанного места, однако уже в css версии 2.1 от этого пришлось отказаться, так как браузеры ввиду сложности процесса не поддерживали эту инструкцию.
Наиболее оптимальными решениями в выборе шрифтов на сегодняшний день видятся 2 способа:
- Определить группу шрифта (по начертанию)
- Здать щрифт, используемый операционной системой
При использовании первого метода определения стиля шрифта задаётся группа из четырёх вариантов:
{Font-family: serif | sans-serif | monospace | cursive }
Второй способ – это указать браузеру, что нужно использовать определённый системный шрифт, то есть брать один из шрифтов, используемых операционной системой. Эти шрифты используются в диалоговых окнах системы, сообщениях, окнах и пр. Вариант этот удобен тем, что шрифт будет легко восприниматься пользователем в силу того, что он привык к шрифтам своей системы и воспримет из как «родные»
Можно выбрать следующие варианты системных шрифтов:
{Font-family: Caption | Icon | Menu | Message-box | Small-caption | Status-bar}
А используются эти шрифты операционной системой в следующих целях:
Caption – для элементов управления, имеющих надпись, например, кнопки
Icon – для подписи значков
Menu – используется в меню и выпадающих списках
Message-box – в диалоговых окнах
Small-caption – в небольших элементах управления
Status-bar – в строках состояния окон
