1. Bitcoin адрес для пожертвований: 1dapfB97R98wg8J3hknWpMDJ7P61CWjNn
    Скрыть объявление
  2. Участникам форума доступны: Skype, WhatsApp и Telegram конференции. Присоединяйтесь!
  3. Наши основные группы и каналы: VK, Twitter. Подписывайтесь!
  4. Скрыть объявление

Свойства шрифта CSS

Тема в разделе "Архив", создана пользователем WTBG, 29 июл 2008.

  1. WTBG

    WTBG Старейшина

    Репутация

    0 / 0


    Свойства шрифта

    Возможность управлять шрифтом - меняете ли вы его семейство, кегель или толщину - позволяет увеличить блеск и неповторимость WEB-страниц.
    [​IMG]


    font-family

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

    Значение:
    • имя семейства - семейства шрифта, применяемое для вывода текста. Имена, состоящие из нескольких слов, должны заключаться в кавычки.
    • имя типового шрифта, применяемого для вывода текста. Типовыми могут быть следующие шрифты: serif, sans-serif, fantasy и monospce.
    • inherit - применяется значение родительского элемента.
    Код (Text):
    1. p {font-family: "Times roman", courier, serif}

    font-style

    Определяет начертания шрифта, такие как курсив или наклонное.

    Значение:
    • normal - обычное начертание (по умолчанию).
    • italic - курсив.
    • oblique - наклонное начертание. Это начертание исключительно экранного шрифта. Он имеет несколько меньший наклон чем курсив.
    • inherit - применяется значение родительского элемента.
    Код (Text):
    1. p{font-style: italic; }

    font-variant

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

    Значение:
    • normal - обычное начертание (по умолчанию).
    • small-caps - выводит шрифт в виде малых прописных букв.
    • inherit - применяется значение родительского элемента.
    Код (Text):
    1. p {font-variant: small-caps }

    font-weight

    Определяет толщину выводимого шрифта.

    Значение:
    • normal - обычное начертание (по умолчанию).
    • bold - полужирное начертание. Полужирное начертание выделяет текст. Линии становятся толще, а сам текст немного шире, чем при обычном начертании.
    • bolder - жирный шрифт.
    • lighter - светлый шрифт. Тонкие, светлые начертания шрифтов производят менее сильное впечатление, чем обычные или полужирные, но они незаменимы, когда требуется легкий и простой внешний вид.
    • 100-900 - число, указывающее толщину шрифта. 100 соответствует самой светлой толщине (lighter), 400-normal, 700- bold, 900- bolder.
    • inherit - применяется значение родительского элемента.
    Код (Text):
    1. p {font-weight: bold;}

    font-stretch

    Определяет толщину шрифта.

    Значение:
    • normal - обычная ширина (по умолчанию)
    • wider- увеличение текущей ширины.
    • narrower - уменьшает текущую ширину на единицу.
    • ultra-condensed - наименьшее значение ширины.
    • extra-condensed - значение большее, чем предыдущее
    • condensed - значение большее, чем предыдущее.
    • semi-condensed - значение большее, чем предыдущее.
    • semi-expanded - значение большее, чем при обычной толщине.
    • expanded - значение большее, чем предыдущее.
    • extra-expanded - значение большее, чем предыдущее.
    • ultra-expanded - максимальное значение ширины.
    • inherit - применяется значение родительского элемента.
    Код (Text):
    1. body{ font-stretch: condensed }

    font-size

    Определяет кегель (высоту символов) шрифта.

    Значение:
    • абсолютный размер - для выражения кегля шрифта используется ключевые слова: xx-small(крайне малый), small (малый), medium (средний) (по умолчанию), large (большой), x-large (очень большое), xx-large (крайне большое).
    • относительный размер - для выражение кегля шрифта используется ключевые слова: larger (меньше), smaller (больше),
    • любое соответствующая стандарту высота - абсолютный размер шрифта. Отрицательное значение не допускается.
    • любое соответствующее стандарту процентное значение.
    • inherit - применяется значение родительского элемента.
    Код (Text):
    1. p{font-size: 20px}

    font-size-adjust

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

    Значение:
    • none - по умолчанию.
    • любое соответствующее стандартам значение - число, представляющее соотношение высоты и ширины символов.
    • inherit - применяется значение родительского элемента.
    Код (Text):
    1. p {font-size-adjust: 0.45}

    font

    Удобное свойство для установки сразу всех параметров шрифта. Если какие-то значение пропущены, то берется их значение по умолчанию.

    Значение:
    • font-style - начертание.
    • font-variant - значение, определяющее вывод шрифта в виде малых прописных букв.
    • font-weight- толщина.
    • font-size - кегль.
    • line-height - интерлиньяж.
    • font-family - семейство шрифтов.
    • inherit - применяется значение родительского элемента.
    Код (Text):
    1. p {font: oblique 12pt "Helvetica Nue", serif; font-stretch: condensed }

    Внедрения индивидуальных шрифтов.

    До появления Internet Explorer 4.0 Web-мастер должен были использовать встроенные шрифты в браузер или использовать шрифты, доступные в системе. CSS представляет WEB-мастеру возможность указания отображаемых шрифтов, которые загружаются вмести с Web-страницей, что гарантирует правильную обработку страницы. Загружаемый шрифт определяется с помощью новых элементов в синтаксис CSS. Ниже приведен синтаксис для определения загружаемого шрифта в CSS:

    Код (Text):
    1. @font-face {font-family: fontName; src: url(failMame.eot) }
    значение fontName, на которое впоследствии ссылается свойство CSS font-family, определяется пользователем. Ниже приведен полный пример:

    Код (Text):
    1.    <style>
    2.    @font-face{ font-family: demoFont; src: url([url]http://myweb.ru/superFont.eot[/url])}
    3.    H1 {font-family: demoFont, Arial, sans-serif;}
    4.    </style>
    5.    <h1> Текст отображается с использованием загружаемого шрифта </h1>
    после определения нового шрифта его имя может быть использовано как действительное для свойства font-family. Свойство font-family может быть связано с равным списком шрифтов, так что если первый в списке шрифтне может быть загружен, то браузер попытается загрузить следующий шрифт или семейство шрифтов. В данном примере последним определенным шрифтом является sans-serif, что позволяет браузеру использовать любой шрифт семейства sans-serif для воспроизведения элемента.


    Пожалуйста, войдите или зарегистрируйтесь для просмотра скрытого текста.