Вы здесь: Главная > CSS > At-Правила: @import, @media и @font-face

At-Правила: @import, @media и @font-face

Опубликовано автором Просмотры: 9

At-правила ─ это умные, мощные «маленькие обнимашки», которые инкапсулируют кучу правил CSS и применяют их к чему-то конкретному. Их можно использовать для импорта других файлов CSS, применения CSS к определённому носителю или встраивания необычных шрифтов funkysexy.

Каждое at-правило начинается с apetail или “знака at”, если вы хотите, чтобы это было скучно (“@”).

Импорт

Давайте начнём с простого @import правила. Оно используется для привязки другой таблицы стилей к существующей.

@import url(morestyles.css);

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

правила @import должны располагаться в верхней части таблицы стилей, перед любыми другими правилами.

Таргетинг на типы носителей

@media могут использоваться для применения стилей к определённому носителю, такому как печать.

@media print {
    body {
        font-size: 10pt;
        font-family: times, serif;
    }

    #navigation {
        display: none;
    }
}

Значения, следующие за “@media”, могут включать в себя screen, print, projection, handheld и all или разделённый запятыми список из более чем одного, например:

@media screen, projection {
    /* ... */
}

На этом дело не заканчивается, о нет. CSS 3 позволяет настраивать таргетинг не только на определённые носители, но и на переменные, относящиеся к этим носителям, такие как размер экрана (особенно полезно при таргетинге на телефоны). Для получения дополнительной информации загляните на страницу медиа-запросов.

Встраивание шрифтов

@font-face существует уже долгое время, но большую часть своей жизни был практически бесполезен. CSS 3 усовершенствовал их, и теперь они широко используются как метод встраивания шрифтов в веб-страницу, так что шрифт можно использовать, даже если он не установлен на компьютере пользователя. Таким образом, вам больше не нужно полагаться на “безопасные для интернета” шрифты, такие как Arial или Verdana. Захватывающие времена.

Переходим к сути…

@font-face {
    font-family: "font of all knowledge";
    src: url(fontofallknowledge.woff);
}

Что это делает, так это создаёт шрифт с именем “шрифт всех знаний”, используя font-family дескриптор, и связывает файл шрифта “fontofallknowledge.woff” с этим именем, используя src дескриптор. затем “шрифт всех знаний” можно использовать в стандартном правиле шрифта, таком как:

p { font-family: "font of all knowledge", arial, sans-serif; }

Шрифт будет загружен (в данном случае из того же каталога, что и файл CSS) и применён к абзацам. Если браузер слишком устарел, чтобы работать с новыми блестящими начертаниями шрифтов, он просто вернётся к следующему, стандартному, шрифту в списке. Волшебство!

Вы также можете просмотреть несколько шрифтов для применения к правилу с помощью списка, разделённого запятыми. Проверка наличия шрифта на компьютере пользователя, устраняющая необходимость его загрузки, также может быть выполнена путем замены “url” в src значении на “local”.

И поскольку файл шрифта может содержать целый ряд весов или стилей, вы также можете указать, какой из них вас интересует. Таким образом, @font-face правило может в конечном итоге выглядеть примерно так:

@font-face {
    font-family: "font of all knowledge";
    src: local("font of all knowledge"), local(fontofallknowledge), url(fontofallknowledge.woff);
    font-weight: 400;
    font-style: normal;
}

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

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

У веб-шрифтов Google более ограниченный выбор, но они бесплатны в использовании и делают всё очень, очень просто. Всё, что вам нужно сделать, это создать ссылку на один из их внешних CSS-файлов, который является не более чем @font-face правилом, и вуаля — у вас есть прекрасный новый шрифт, с которым можно поиграть.

Страницы в тему:

Добавить комментарий