Свойства шрифта |
Возможность управлять шрифтом - меняете ли вы его семейство, кегель или толщину - позволяет увеличить блеск и неповторимость WEB-страниц.
Пример: font-family
Определяет семейства шрифта, используемого в этом тексте. Может быть несколько таких семейств, отделенные друг от друга запятыми. Приоритет определяется порядком в этом списке. Значение: * имя семейства - семейства шрифта, применяемое для вывода текста. Имена, состоящие из нескольких слов, должны заключаться в кавычки. * имя типового шрифта, применяемого для вывода текста. Типовыми могут быть следующие шрифты: serif, sans-serif, fantasy и monospce. * inherit - применяется значение родительского элемента. p {font-family: "Times roman", courier, serif} Примеры: [1] font-style Определяет начертания шрифта, такие как курсив или наклонное. Значение: * normal - обычное начертание (по умолчанию). * italic - курсив. * oblique - наклонное начертание. Это начертание исключительно экранного шрифта. Он имеет несколько меньший наклон чем курсив. * inherit - применяется значение родительского элемента. p{font-style: italic; } Примеры: [1] font-variant Определяет, будет ли шрифт выведен в виде малых прописных букв. Значение: * normal - обычное начертание (по умолчанию). * small-caps - выводит шрифт в виде малых прописных букв. * inherit - применяется значение родительского элемента. p {font-variant: small-caps } Примеры: [1] font-weight cвойства шрифта font css Определяет толщину выводимого шрифта. Значение: * normal - обычное начертание (по умолчанию). * bold - полужирное начертание. Полужирное начертание выделяет текст. Линии становятся толще, а сам текст немного шире, чем при обычном начертании. * bolder - жирный шрифт. * lighter - светлый шрифт. Тонкие, светлые начертания шрифтов производят менее сильное впечатление, чем обычные или полужирные, но они незаменимы, когда требуется легкий и простой внешний вид. * 100-900 - число, указывающее толщину шрифта. 100 соответствует самой светлой толщине (lighter), 400-normal, 700- bold, 900- bolder. * inherit - применяется значение родительского элемента. p {font-weight: bold;} Примеры: [1] font-stretch Определяет толщину шрифта. Значение: * normal - обычная ширина (по умолчанию) * wider- увеличение текущей ширины. * narrower - уменьшает текущую ширину на единицу. * ultra-condensed - наименьшее значение ширины. * extra-condensed - значение большее, чем предыдущее * condensed - значение большее, чем предыдущее. * semi-condensed - значение большее, чем предыдущее. * semi-expanded - значение большее, чем при обычной толщине. * expanded - значение большее, чем предыдущее. * extra-expanded - значение большее, чем предыдущее. * ultra-expanded - максимальное значение ширины. * inherit - применяется значение родительского элемента. body{ font-stretch: condensed } Примеры: [1] font-size Определяет кегель (высоту символов) шрифта. Значение: * абсолютный размер - для выражения кегля шрифта используется ключевые слова: xx-small(крайне малый), small (малый), medium (средний) (по умолчанию), large (большой), x-large (очень большое), xx-large (крайне большое). * относительный размер - для выражение кегля шрифта используется ключевые слова: larger (меньше), smaller (больше), * любое соответствующая стандарту высота - абсолютный размер шрифта. Отрицательное значение не допускается. * любое соответствующее стандарту процентное значение. * inherit - применяется значение родительского элемента. p{font-size: 20px} Примеры: [1] cвойства шрифта font css font-size-adjust Определяет соотношение ширины и высоты символов, которые поддерживается при установке кегля шрифта. Это дает пользователю регулировать изменения высоты текста. Значение: * none - по умолчанию. * любое соответствующее стандартам значение - число, представляющее соотношение высоты и ширины символов. * inherit - применяется значение родительского элемента. p {font-size-adjust: 0.45} font Удобное свойство для установки сразу всех параметров шрифта. Если какие-то значение пропущены, то берется их значение по умолчанию. Значение: * font-style - начертание. * font-variant - значение, определяющее вывод шрифта в виде малых прописных букв. * font-weight- толщина. * font-size - кегль. * line-height - интерлиньяж. * font-family - семейство шрифтов. * inherit - применяется значение родительского элемента. p {font: oblique 12pt "Helvetica Nue", serif; font-stretch: condensed } Примеры: [1] cвойства шрифта font css Внедрения индивидуальных шрифтов. До появления Internet Explorer 4.0 Web-мастер должен были использовать встроенные шрифты в браузер или использовать шрифты, доступные в системе. CSS представляет WEB-мастеру возможность указания отображаемых шрифтов, которые загружаются вмести с Web-страницей, что гарантирует правильную обработку страницы. Загружаемый шрифт определяется с помощью новых элементов в синтаксис CSS. Ниже приведен синтаксис для определения загружаемого шрифта в CSS: @font-face {font-family: fontName; src: url('/failMame.eot') } значение fontName, на которое впоследствии ссылается свойство CSS font-family, определяется пользователем. Ниже приведен полный пример: <style> @font-face{ font-family: demoFont; src: url(http://myweb.ru/superFont.eot)} H1 {font-family: demoFont, Arial, sans-serif;} </style> <h1> Текст отображается с использованием загружаемого шрифта </h1> после определения нового шрифта его имя может быть использовано как действительное для свойства font-family. Свойство font-family может быть связано с равным списком шрифтов, так что если первый в списке шрифтне может быть загружен, то браузер попытается загрузить следующий шрифт или семейство шрифтов. В данном примере последним определенным шрифтом является sans-serif, что позволяет браузеру использовать любой шрифт семейства sans-serif для воспроизведения элемента. |