Подключение веб-шрифтов с помощью @font-face
Правило @font-face позволяет определить настройки шрифтов, а также загрузить специфичный шрифт на компьютер пользователя.
Внутри конструкции @font-face может находиться набор свойств для изменения параметров шрифта (font-family, font-size, font-style и др.), а также ссылка на шрифтовой файл. Ссылка записывается в виде src: url(URI), где URI — относительный или абсолютный путь к файлу.
body
Единственное объявление в приведенном выше правиле — это то, что обычно называют стеком шрифтов. Эта строка определяет шрифт, который браузер должен использовать для указанного элемента (в данном случае для элемента body). Стек — «Arial, Helvetica, sans-serif». Это дает указание браузеру выполнить следующие действия:
- Найти шрифт под названием «Arial», определенный в CSS, загруженном на страницу, используя @font-face или в операционной системе пользователя. Если этот шрифт найден, использовать его как шрифт для указанного элемента (ов);
- Если Arial не найден, найти шрифт под названием «Helvetica» в тех же местах. Если он найден, использовать его;
- Если Helvetica не найден, использовать любой шрифт в качестве шрифта sans-serif по умолчанию в браузере пользователя или операционной системе;
Это довольно упрощенная версия того, что делает браузер. Последнее ключевое слово, используемое в этой строке CSS — это то, что называется общим именем семейства шрифтов. В статье MDN о font-family есть хорошее описание общих имен семейств и почему они используются: «Общие семейства шрифтов являются резервным механизмом, средством сохранения некоторых целей автора таблицы стилей, когда ни один из указанных шрифтов не доступен. Общие имена семейства — это ключевые слова, кавычки для них не нужны. Общее семейство шрифтов должно быть последним элементом в списке имен семейств шрифтов».
— Доступные общие имена семейства
Общее семейство шрифтов, согласно спецификации, может быть определено с помощью любого из следующих ключевых слов:
- serif
- sans-serif
- monospace
- cursive
- fantasy
Семейство serif хорошо известно, но обратите внимание на то, что спецификация говорит: «Шрифты Serif представляют собой формальный стиль текста для скрипта. Это часто, но не всегда, глифы, которые имеют завершающие штрихи, свисающие или сужающиеся концы или имеют фактические засечные окончания (включая прямоугольные засечки)». Таким образом, здесь стиль шрифта является формальным, без специфических «засечек».
Для шрифтов sans-serif, спецификация говорит: «Символы в шрифтах sans-serif, поскольку термин используется в CSS, обычно имеют низкую контрастность (вертикальные и горизонтальные стержни имеют почти одинаковую толщину) и имеют конечные прямые окончания — без каких-либо свисающих элементов, пересечения центральной линии и других орнаментов». Таким образом, в этом случае ожидается, что шрифт не будет иметь засечек.
Моноширинные шрифты имеют более простое определение: «Единственным критерием моноширинного шрифта является то, что все глифы имеют одинаковую фиксированную ширину».
Хотя эти три семейства довольно распространены, вы, возможно, не слишком знакомы с cursive и fantasy.
Что касается cursive, спецификация говорит: «Символы в cursive шрифтах обычно используют более неформальный стиль скрипта, и результат больше походит на рукописное перо или кисть, чем печатные письма».
Так что хорошо иметь в виду. Если есть конкретное место, где вы используете причудливый рукописный шрифт, ваш стек шрифтов может потенциально включать cursive в качестве конечной записи, если вы считаете, что cursive по умолчанию подходит как достойный резерв.
Точно так же fantasy описывается как: «Прежде всего декоративные или выразительные шрифты, которые содержат декоративные или выразительные представления символов».
Оптимизация шрифтов
Красивый и удобный шрифт — неотъемлемая составляющая хорошего сайта. Благодаря ему нам доступен привлекательный дизайн бренда, более простое чтение текста и удобный интерфейс. Но веб-шрифты дают нам дополнительные возможности! Они позволяют выбрать, найти и увеличить текст в любой момент. Кроме того, надписи не будут зависеть от разрешения экрана и останутся четкими на всех устройствах.
Оптимизация шрифтов — это одно из важнейших действий для улучшения производительности страницы. Каждый шрифт — это отдельный ресурс, и некоторые из них могут блокировать отрисовку текста. Однако сам факт того, что на странице есть шрифты, не означает, что она будет обрабатываться медленнее. Наоборот, оптимизированный шрифт в сочетании с продуманной стратегией загрузки и применения поможет уменьшить общий размер страницы и ускорит ее обработку.
- Шрифты Unicode могут содержать тысячи глифов.
- Существует четыре формата шрифтов: WOFF2, WOFF, EOT и TTF.
- Для некоторых форматов шрифтов необходимо GZIP-сжатие.
Шрифт состоит из глифов — векторных форм каждой буквы или символа. Поэтому размер файла шрифта зависит от двух переменных: количества глифов в шрифте и сложности их векторных контуров. Например, Open Sans, один из самых популярных веб-шрифтов, содержит 897 глифов, включая латинские, греческие и кириллические символы.
При выборе шрифта обратите внимание на то, какие символы в нем поддерживаются. Если вам нужно перевести контент страницы на разные языки, используйте шрифт, который выглядит одинаково для всех символов. Например, семейство шрифтов Noto от Google разрабатывается, чтобы поддерживать все языки мира. Однако его полный архив весит более 130 МБ!
Конечно, придется поработать над установкой соответствующих настроек, чтобы шрифт не ухудшил работу ресурса. Однако на веб-платформах вы найдете все необходимые инструменты. Далее мы подробно рассмотрим, как совместить красивое оформление и высокую производительность.
Сегодня в Интернете используются четыре формата контейнеров шрифтов: EOT, TTF, WOFF и WOFF2. К сожалению, несмотря на возможность выбора, не существует единого формата, который работает во всех браузерах. Например, EOT доступен только в IE, TTF поддерживается в этом браузере только частично. WOFF распространен шире всего, однако его нельзя использовать в некоторых старых браузерах, а над поддержкой WOFF 2.0 работают в настоящее время.
Итак, единого формата для всех браузеров не существует, поэтому мы должны использовать несколько форматов, чтобы страница выглядело одинаково у всех пользователей:
- Используйте WOFF 2.0 в тех браузерах, которые его поддерживают;
- Добавьте WOFF для большинства браузеров;
- Применяйте TTF в устаревших браузерах Android (для версий до 4.4);
- Добавьте EOT для поддержки устаревших версий IE (до IE9);
Note: Теоретически, существует ещё один формат контейнера шрифтов — SVG. Однако он никогда не поддерживался в IE и Firefox, и сейчас перестает использоваться в Chrome. Из-за ограниченной сферы применения мы специально не рассказываем о нем в этом руководстве.
— Уменьшение размера шрифта с помощью сжатия
Шрифт — это набор глифов, каждый из которых состоит из контуров букв. Конечно, все глифы разные, но, тем не менее, они содержат много похожей информации, которую можно сжать с помощью GZIP или другого совместимого компрессора.
- Форматы EOT и TTF не сжимаются по умолчанию. Убедитесь, что на ваших серверах настроено сжатие GZIP при передаче ресурсов в этих форматах;
- К формату WOFF применяется встроенное сжатие. Убедитесь, что компрессор использует оптимальный вариант соответствующих настроек;
- WOFF2 использует пользовательские алгоритмы предварительной обработки и сжатия для уменьшения размера файла на 30% по сравнению с другими форматами;
Стоит отметить, что некоторые форматы шрифтов содержат дополнительные метаданные, например информацию о хинтинге и кернинге. Они не нужны не для всех платформ, поэтому мы можем сжать файл ещё больше. Узнайте о соответствующих функциях вашего компрессора шрифтов и убедитесь, что у вас есть подходящие ПО для тестирования ресурсов и предоставления их браузерам. Например, Google Fonts поддерживает более 30 оптимизированных вариантов каждого шрифта и автоматически определяет и применяет оптимальный вариант для каждой платформы и браузера.
— Создание семейства шрифтов с помощью @font-face
- Используйте подсказку format(), чтобы указать форматы шрифтов;
- Чтобы ускорить работу сайта, разделяйте крупные Unicode-шрифты на поднаборы. Используйте субнастройки Unicode-диапазона и вручную добавьте запасной вариант для более старых браузеров;
- Чтобы ускорить работу сайта и отрисовку страниц, сократите количество вариантов стиля для каждого шрифта;
С помощью CSS-правила @font-face можно определить расположение определенного шрифта, его свойства стиля и кодовые точки Unicode, для которых он должен использоваться. Используйте сочетание таких объявлений @font-face для создания семейства шрифтов. Браузер будет использовать его, чтобы понять, какие шрифты нужно скачать и применить для текущей страницы. Рассмотрим подробнее, как это работает.
В каждом объявлении @font-face указано название семейства шрифтов, которое действует как логическая группа из нескольких объявлений, характеристик шрифта, например стиля, толщины и интервала, и дескриптора src, который определяет список расположений шрифта в порядке важности.
@font-face < font-family: 'Awesome Font'; font-style: normal; font-weight: 400; src: local('Awesome Font'), url('/fonts/awesome.woff2') format('woff2'), url('/fonts/awesome.woff') format('woff'), url('/fonts/awesome.ttf') format('ttf'), url('/fonts/awesome.eot') format('eot'); >@font-face < font-family: 'Awesome Font'; font-style: italic; font-weight: 400; src: local('Awesome Font Italic'), url('/fonts/awesome-i.woff2') format('woff2'), url('/fonts/awesome-i.woff') format('woff'), url('/fonts/awesome-i.ttf') format('ttf'), url('/fonts/awesome-i.eot') format('eot'); >
Обратите внимание, что примеры выше определяют два стиля (обычный и курсив) одного семейства шрифтов Awesome Font, каждый из которых указывает на разный набор ресурсов. В свою очередь, каждый дескриптор src содержит разделенный запятыми список вариантов ресурса в порядке важности:
- Директива local() позволяет ссылаться на шрифт и загружать его, а также использовать шрифты, установленные на устройстве пользователя;
- С помощью директивы url() можно загружать внешние шрифты. Она может содержать подсказку format(), указывающую формат шрифта по ссылке;
Note: На устройстве пользователя, особенно мобильном, редко установлены какие-либо шрифты, кроме системных. Поскольку добавить шрифт на телефон или планшет практически невозможно, вы всегда должны предоставлять список внешних расположений ресурса.
Когда браузер определяет, что для отображения сайта нужен какой-либо шрифт, он читает предоставленный список ресурсов в указанном порядке и старается скачать нужный шрифт. Например, используя следующий пример:
- Браузер читает разметку страницы и определяет, какие варианты шрифтов нужны для отрисовки текста;
- Браузер проверяет, не установлены ли нужные шрифты на устройстве;
- Если файла нет на устройстве, браузер читает список внешних расположений:
— Если формат указан, перед скачиванием браузер проверяет, поддерживается ли он. В случае отрицательного ответа программа переходит к следующему варианту;
— Если указание на формат отсутствует, браузер скачивает ресурс;
С помощью сочетания локальных и внешних директив и подсказки мы можем указать все доступные форматы шрифта. После этого браузер сделает все остальное: определит нужные ресурсы и выберет подходящий формат.
Note: Порядок, в котором указаны варианты шрифтов, имеет значение, потому что браузер выбирает первый поддерживаемый шрифт. Таким образом, если вы хотите, чтобы современные браузеры использовали WOFF2, укажите его до WOFF, и т. д.
— Субнастройки диапазона Unicode
Кроме таких характеристик шрифтов, как стиль, толщина и интервал, правило @font-face позволяет установить набор кодовых точек Unicode, поддерживаемых ресурсом. Благодаря этому мы можем разделить крупный Unicode-шрифт на несколько небольших поднаборов (например, латиницу, кириллицу и греческий алфавит) и скачивать только те глифы, которые нужны для отрисовки текста на конкретной странице.
С помощью дескриптора диапазона Unicode мы можем создать разделенный запятыми список значений диапазона. Каждое из них может быть указано в одной из трех форм:
- Одна кодовая точка (например, U+416);
- Диапазон интервала (например, U+400-4ff). Обозначает начальную и конечную кодовые точки диапазона;
- Диапазон Wildcard (например, U+4??): ‘?’ Символы обозначают любое шестандцатиричное число;
Например, мы можем разделить семейство Awesome Font на латинский и японский поднаборы, которые браузер при необходимости может скачать:
@font-face < font-family: 'Awesome Font'; font-style: normal; font-weight: 400; src: local('Awesome Font'), url('/fonts/awesome-l.woff2') format('woff2'), url('/fonts/awesome-l.woff') format('woff'), url('/fonts/awesome-l.ttf') format('ttf'), url('/fonts/awesome-l.eot') format('eot'); unicode-range: U+000-5FF; /* Latin glyphs */ >@font-face < font-family: 'Awesome Font'; font-style: normal; font-weight: 400; src: local('Awesome Font'), url('/fonts/awesome-jp.woff2') format('woff2'), url('/fonts/awesome-jp.woff') format('woff'), url('/fonts/awesome-jp.ttf') format('ttf'), url('/fonts/awesome-jp.eot') format('eot'); unicode-range: U+3000-9FFF, U+ff??; /* Japanese glyphs */ >
Note: Субнастройки диапазона Unicode особенно важны для азиатских языков, в которых намного больше глифов, чем в западных. Стандартный полный шрифт часто весит мегабайты, а не несколько десятков килобайт.
С помощью поднаборов диапазона Unicode и отдельных файлов для каждого варианта стиля мы можем указать сложное семейство шрифтов, которое быстро загружается и меньше весит. Пользователь будет скачивать только те варианты и поднаборы, которые он увидит на странице, и ничего больше.
Однако у этого метода есть маленький недостаток: не все браузеры пока поддерживают диапазон Unicode. Одни просто игнорируют соответствующую подсказку и скачивают все варианты, а другие могут вообще не обрабатывать объявление @font-face. Чтобы решить эту проблему, мы должны вручную установить субнастройки в более старых браузерах.
— Оптимизация загрузки и отрисовки
- Запросы шрифтов отправляются только после создания модели визуализации, поэтому отображение текста может быть задержано;
- Font Loading API позволяет изменить исходные настройки отложенной загрузки и использовать собственные стратегии загрузки и отображения шрифтов;
- С помощью встраивания шрифтом можно изменить исходные настройки отложенной загрузки в более старых браузерах;
Полный веб-шрифт со всеми глифами и вариантами стиля, которые могут нам не понадобиться, может весить несколько мегабайт. Чтобы избежать этой проблемы, CSS-правило @font-face позволяет разделить семейство шрифтов на набор ресурсов: поднаборы Unicode, отдельные варианты стиля и т. д.
С помощью объявлений браузер определяет необходимые поднаборы и варианты и скачивает только нужные данные. Это очень удобно, но если мы не будем достаточно внимательны, может произойти ошибка процесса отрисовки. Это замедлит отображение текста и ухудшит работу сайта, чего мы не можем допустить.
— Веб-шрифты и процесс визуализации
- Браузер запрашивает HTML-документ;
- Браузер анализирует HTML-ответ и создает модель DOM;
- Браузер обнаруживает ресурсы CSS, JavaScript и т. д. и отправляет запросы;
- После получения CSS-контента браузер создает модель CSSOM и совмещает ее с моделью DOM для получения модели визуализации;
— После того как модель визуализации определила необходимые варианты шрифтов, отправляются соответствующие запросы; - Браузер отображает макет страницы и ресурсы на нем;
— Если шрифт ещё не доступен, браузер может не показывать текст;
— Как только шрифт становится доступен, браузер отображает текст;
Между началом показа контента на странице, которое происходит вскоре после создания модели визуализации, и запросом к шрифту идет «гонка». Из-за этого может возникнуть проблема отсутствия текста. У разных браузеров этот процесс может отличаться:
- Safari отображает текст только после того, как шрифт скачан;
- Chrome и Firefox задерживают отрисовку шрифта до 3 секунд, после чего используют запасной вариант. После скачивания ресурса браузеры применяют его для повторной визуализации текста;
- IE сразу показывает текст с помощью запасного шрифта, а потом заново отображает страницу после скачивания ресурса;
У каждой стратегии визуализации есть свои достоинства и недостатки. Одних повторная отрисовка раздражает, а другие хотят сразу видеть текст и не возражают, если потом его вид изменится. Суть в том, что отложенная загрузка уменьшает количество скачиваемых байтов, но может замедлить отображение текста. Теперь рассмотрим, как улучшить это процесс.
— Оптимизации отрисовки шрифта с помощью Font Loading API
С помощью интерфейса сценариев Font Loading API можно определить CSS-начертание веб-шрифта, управлять им, отслеживать процесс скачивания и менять исходные настройки отложенной загрузки. Например, если мы уверены, что потребуется какой-либо вариант шрифта, мы можем указать это и настроить в браузере немедленное скачивание этого ресурса.
var font = new FontFace("Awesome Font", "url(/fonts/awesome.woff2)", < style: 'normal', unicodeRange: 'U+000-5FF', weight: '400' >); font.load(); // don't wait for render tree, initiate immediate fetch! font.ready().then(function() < // apply the font (which may rerender text and cause a page reflow) // once the font has finished downloading document.fonts.add(font); document.body.style.fontFamily = "Awesome Font, serif"; // OR. by default content is hidden, and rendered once font is available var content = document.getElementById("content"); content.style.visibility = "visible"; // OR. apply own render strategy here. >);
Мы можем проверить статус шрифта с помощью директивы check()) и отследить процесс его скачивания. Это позволяет задать собственные правила отрисовки текста на странице:
- показывать текст только после того, как шрифт стал доступен;
- выбирать задержку отображения для каждого шрифта;
- использовать запасной шрифт для отрисовки текста, а затем применять скачанный ресурс;
Кроме того, можно совмещать указанные выше стратегии для разного контента на странице: задерживать отображение текста на определенное время или пока шрифт не станет доступным, использовать запасные ресурсы, а затем заново отрисовывать страницу и т. д.
Note: В некоторых браузерах Font Loading API пока находится на стадии разработки. Чтобы вам были доступны его функции, используйте полизаполнение FontLoader или библиотеку webfontloader. Тем не менее, вам придется использовать дополнительные ресурсы — средства поддержки JavaScript.
@font-face в деталях
Типичный вид CSS правил, который генерирует сервис Typekit для внедрения шрифта выглядит так:
@font-face
Разберем детально что тут к чему и нужно ли оно.
font-family
Задаем имя внедряемого шрифта, которое потом можно будет указать нужным элементам. Например, заголовкам h1 зададим внедренный шрифт:
Указать имя шрифту можно любое — на свое усмотрение. Кавычки обязательны только для имен, состоящих из более чем одного слова.
Вывод: правило обязательное.
Форматы шрифтов
С помощью параметра src указываем путь к внедряемому шрифту. Думаю каждому понятно, что данный параметр тоже обязателен.
Зачем так много форматов
В качестве ответа приведу таблицу поддержки форматов различными браузерами:
Т.е. такое обилие подключаемых форматов обусловлено максимальным покрытием браузеров. При этом браузер загружает только первый из списка, который сможет отобразить (при условии указанных format).
О порядке шрифтов
Т.к. грузится только первый шрифт, который браузер поддерживает, логичным будет указывать шрифты в порядке увеличения веса. Замечу сразу, что визуально все форматы выглядят одинаково. Хотя WOFF самый легкий, на первом месте стоит EOT для избежания бага в IE6-8.
Сокращаем запись
Если задача стоит в разработке под наиболее популярные браузеры, тогда в основном CSS можно оставить только WOFF:
@font-face
Для IE6-8 внедрить EOT в отдельном CSS подключенным через условные комментарии
@font-face
А для мобильных браузеров подключить отдельный CSS с TTF и SVG (для этого потребуется на стороне сервера определить, что это мобильное устройство и отдать нужный CSS).
Нужно ли указывать format?
Декларация format сообщает браузеру какой формат шрифта находится по заданному url. Браузер, прочитав данную декларацию, определяет сможет ли он отобразить данный шрифт. Если да, тогда шрифт загружается, если нет, тогда браузер не загружая текущий шрифт, читаем следующую строку @font-face.
Если же не указать format, браузер будет загружать все шрифты подряд пока не доберется до того, который ему понятен. Вывод: использование декларации обязательно, если подключается более одного формата шрифта и мы заботимся о скорости загрузки страницы.
Если же используется четкое разделение стилей для разных браузеров тогда можно эту декларацию убрать. Например, для современных браузеров, которые поддерживают WOFF можно сократить правила так:
@font-face
О декларации для IE
Во-первых их две. Первая строка (src: url(journal-webfont.eot);) — это для IE9. Вторая — IE6-8. (journal-webfont.eot?#iefix) такая хитрая запись нужна для фикса потенциально возможного бага в IE, который может коряво обработать src. IE9 хорошо понимает WOFF, поэтому если подключать отдельные стили для IE6-8, можно оставить только одну строку и при этом можно убрать фикс бага и format.
@font-face
Недостаток такой оптимизации
В IE6-8 появится дополнительный запрос к серверу: браузер будут пытаться загрузить шрифт из основного файла стилей с багом, о котором уже упоминал выше. Шрифт не подключится, после чего IE загрузит eot. Тут решать каждому, что в приоритете: то ли современные браузеры, то ли отсталые «ослы».
Заметка о WOFF
WOFF имеет преимущества перед остальными:
- это сжатый формат, легче любого другого почти в два раза;
- имеет относительную защиту — шрифт можно будет использовать только в Веб;
- содержит информацию о происхождении шрифта.
Зачем указывать font-style и font-weight
Чтобы явно определить стиль и жирность подключаемого шрифта. Если подключается шрифт всего с одним стилем и жирностью, можно эти правила упустить. Конечно если начертание шрифта совпадает со значениями по умолчанию: font-syle: normal, font-weight: normal.
@font-face
Эти правила необходимы когда мы подключаем несколько разных начертаний одного и того же шрифта. В таких ситуациях можно пойти ошибочной дорогой и создать несколько имен шрифтов для разных начертаний:
@font-face < font-family: JournalRegular; src: url(journal-webfont-regular.woff); >@font-face < font-family: JournalBold; src: url(journal-webfont-bold.woff); >@font-face < font-family: JournalItalic; src: url(journal-webfont-italic.woff); >h1 < font-family: JornalBold; >p < font-family: JournalRegular; >em
Это, конечно, будет работать. Но ошибка тут в том, что для разных начертаний используется разные имена шрифтов, а не соответствующие CSS правила. Это усложняет чтение кода, поддержку его, а та же может привести к неверному отображению элемента, если шрифт не загрузится (например, заголовок может остаться regular вместо требуемого bold).
Правильнее будет использовать шрифты следующим образом:
@font-face < font-family: Journal; src: url(journal-webfont-regular.woff); font-style: normal; font-weight: normal; >@font-face < font-family: JournalBold; src: url(journal-webfont-bold.woff); font-style: normal; font-weight: bold; >@font-face < font-family: JournalItalic; src: url(journal-webfont-italic.woff); font-style: italic; font-weight: normal; >h1 < font-family: Jornal; font-weight: bold; >p < font-family: Journal; font-style: normal; >em
Данный код можно сократить, используя значения по умолчанию. Тут я написал полностью для лучшей наглядности.
Что можно еще добавить в @font-face
В рассмотренные выше правила вошли не все возможные, а только самые востребованные на данный момент. Для полноты картины познакомимся с остальными.
font-stretch
font-stretch задает ширину символов. Используется в @font-face по аналогии с font-syle и font-weight. По умолчанию имеет значение normal. Пока нет особого смысла использовать из-за слабой поддержки браузерами.
@font-face
local
Данная декларация говорит браузеру чтобы тот вначале поискал нужный шрифт на машине пользователя и только если нужный не нашелся, тогда грузить его из сети. Можно использовать несколько local, чтобы указать все возможные варианты записи шрифта в системе.
@font-face
Использовать данную декларацию нужно очень осторожно, из-за проблем в некоторых браузерах.
unicode-range
Указываем символы, которые нам необходимы, тем самым сокращая вес загружаемого шрифта. Символы можно перечилять как через запятую так и использовать диапазоны. Символы указываются в юникоде:
@font-face
Поддержка браузерами на данный момент сильно хромает.
Материалы
- W3C :: CSS Fonts Module Level 3
- Веб-шрифты на распутье
- Расширение возможностей шрифтов веб-сайта с использованием CSS3
По теме
- @font-face. Нестандартный шрифт средствами CSS.
- Cufon — нестандартный шрифт средствами JS
- Сервисы: Google Web Fonts
- CSS приемы
- «Дергание» сайта
- background position со смещением
- clearfix
- CSS прозрачность
- CSS хаки
- RGBA — CSS полупрозрачность
- Затемнение фона
- Кроссбраузерный
- Обнуление отступов
- Порядок описания ссылок
- Прелоад изображений
- Сброс стилей
- Сокращения в CSS
- Убираем рамку с эл-ов в фокусе
- Условные CSS
- Условные комментарии
- Поворот вокруг своей оси
- Поворот объекта вокруг свой
- Resize для textarea в Safari и Chrome
- Блочная верстка форм
- Кастомные checkbox и radio на CSS
- Кросбраузерные input и textarea
- Кроссбраузерный button
- Нестандартные checkbox
- Нестандартные radio
- Нестандартные select
- Нестандартные select multiple
- Нестандартные поля выбора файла
- Нестандартные текстовые поля
- О кроссбраузерности placeholder
- Отступы у checkbox и radio
- Оформление input type=search
- Резиновая кнопка
- Текст в поле type=»password»
- Блоки равной высоты в строке
- Колонки равной высоты
- Прижимаем подвал к низу
- Ресайз окна: потомок перерос родителя
- Сайт в центре экрана
- Фиксированная колонка + резиновая + clear:both
- CSS 3D лента
- CSS3 всплывающие подсказки
- IMG внутри блока — убираем странный отступ
- IMG: меняем рисунок при наведении
- Аккордеон на чистом CSS3
- Валидный target=»_blank»
- Верстка рейтингов
- Верстка содержания
- Вставка спецсимволов в генерируемый контент
- Вставка стрелок
- Индивидуальные стили для li. Избавляемся от классов.
- Масштабируемая картинка в резиновой колонке
- Многоколоночный текст на CSS3
- Нестандартное подчеркивание
- Отменяем обтекание текстом картинки
- Оформление внешних ссылок
- Оформление изображений по align
- Оформляем «ol»
- Правильные анонсы новостей
- Список определений. Требуем невозможного.
- Firefox
- -moz-box-shadow и -moz-border-radius — это кошмар CPU
- Позиционирование внутри button
- Ширина input type=file
- Onload в IE9
- z-index в IE6-7
- Баг с текстом при применении Alpha фильтра
- Масштабирование и PIE
- Отступы в кнопках в IE6-7
- Проблемы с em
- Эмуляция after и before для IE 6-7
- Эмуляция data:URL для IE6-7 — используем MHTML-включение
- hasLayout
- Max-width
- Min-height
- Min-width
- Min-width и max-width одновременно
- PNG и прозрачность
- Высота блока 1px
- Дублирование символов
- Дырка под футером
- Как перекрыть select
- Обрезка контента c отрицательным margin в IE6
- Отступы плавающих блоков
- Проблемы с размерами блоков
- Псевдокласс :first-child
- Псевдокласс hover в IE 6
- Селектор потомков >
- Селекторы атрибутов [type=…]
- Сестринский селектор
- Смещение на 1px
- Ссылки с вложением
- Устраняем flickering
- Эмуляция position:fixed
- overflow-y
- Не подгружаются шрифты @font-face
- Проблема с oveflow: hidden
- Скругление img
- HTML шаблон для мобильных устройств
- Выпадающее меню на CSS
- Выравнивание навигации из блоков по центру
- Выравнивание навигации по середине
- Резиновое меню
- Резиновое меню из блоков
- Убираем класс для первого элемента
- Box-sizing: переключаем блочную модель
- inline-block: простое свойство для непростых задач
- Вертикальная позиция для строчного элемента
- Вертикальное выравнивание
- Выравнивание по центру с position: absolute
- Вычисляемые отступы
- Два в одном: позиция + размеры
- Долой отступы между строчными элементами (и блоками)
- Обходим схлопывание margin
- Центрирование картинки в блоке
- Центрирование резинового блока по горизонтали
- Активация flash
- Вставка flash в HTML
- Вставляем ролик с YouTube
- Как отключить flash
- Как перекрыть flash
- Параметры для вставки объектов
- Ссылка на flash объекте
- CSS треугольники
- Аппаратное ускорение анимации
- Встраиваем изображения — data:URL
- Градиент: CSS3 против CSS2 + картинка
- Лесенка спрайтов — сложный случай поклейки
- На одну картинку меньше. Спецсимвол ×
- Необычные тени с CSS3 box-shadow
- Оптимизация Google Web Fonts
- Оптимизация фонов с помощью Canvas
- Проблемы с border-radius
- Псевдоэлемент before для маркера списка
- Скругление углов. Обзор методов.
- Сокращаем HTML5 код
- Спрайты: меньше картинок — больше скорость
- Тень для блока
- Фигуры с углами на CSS
- Шаблоны градиентов
- Дополнение Skype
- Подключить favicon
- Профилактика сайта: максимально простое оповещение
- Ссылки на skype
- @font-face в деталях
- Cufon — нестандартный шрифт средствами JS
- font-size: 100.01% для html
- Безопасные шрифтовые CSS стеки для англоязычных текстов
- Безопасные шрифтовые CSS стеки для рунета
- Безопасные шрифты
- Вертикальный текст
- Используем псевдоэлемент :first-letter
- Контур для текста
- Нестандарный шрифт. Быть ему или нет?
- Нестандартный шрифт средствами CSS
- Плавающий :first-letter
- Подмена текста изображением
- Соответствия шрифтов Windows, Mac и Unix/Linux
- Строчный :first-letter
- Текст под углом
- Текст с CSS градиентом
- Тень для текста
- Эффект отражения
@font — face
Встроенных в операционные системы шрифтов часто не хватает для создания уникального дизайна сайта. Для подключения нестандартных шрифтов существует директива @font — face . С её помощью можно подключить и использовать на странице любой шрифт из файла.
При загрузке сайта браузер будет брать шрифт из указанного файла и отображать текст именно этим шрифтом.
Пример
Скопировать ссылку «Пример» Скопировано
Подключим к странице шрифт Lexend Peta и сделаем его основным шрифтом нашего сайта.
@font-face font-family: "Lexend Peta"; src: local("Lexend Peta Regular"), local("LexendPeta-Regular"), url("Lexend_Peta-webfont.woff2") format("woff2"), url("Lexend_Peta-webfont.woff") format("woff"), url("Lexend_Peta-webfont.svg") format("svg"); font-weight: normal;> body font-family: "Lexend Peta", sans-serif;>@font-face font-family: "Lexend Peta"; src: local("Lexend Peta Regular"), local("LexendPeta-Regular"), url("Lexend_Peta-webfont.woff2") format("woff2"), url("Lexend_Peta-webfont.woff") format("woff"), url("Lexend_Peta-webfont.svg") format("svg"); font-weight: normal; > body font-family: "Lexend Peta", sans-serif; >Как пишется
Скопировать ссылку «Как пишется» Скопировано
Директива @font — face по своей «анатомии» отличается от стандартных CSS-правил, где есть селектор и применяемые к нему правила. Основное отличие в том, что на месте селектора мы активируем функцию, адресованную браузеру.
Внутри этого правила должно быть два обязательных свойства:
- Название шрифта, которое мы будем использовать ниже в CSS: свойство font — family . Название может отличаться от настоящего названия этого шрифта.
- Ссылки на файлы, из которых браузер может взять шрифт: свойство src .
Тут важно указать ссылки на файлы в нескольких форматах, чтобы любой браузер — старый или новый — мог загрузить шрифт в понятном ему формате. Принято хранить и подключать шрифты в форматах WOFF, WOFF2, SVG.
Подключение из внешних файлов происходит при помощи конструкции url ( «ссылка — на — файл» ) . Несколько файлов можно подключить, перечислив эти конструкции несколько раз через запятую.
Если указаны ссылки на несколько файлов в разных форматах, то после url ( ) оставляют браузеру подсказку в виде записи format ( «формат — подключаемого — файла» ) .
Поскольку пользователь имеет возможность устанавливать в свою систему любые нестандартные шрифты, то есть вероятность, что нужный нам шрифт уже есть на его компьютере. Если это так, то браузеру будет удобнее и быстрее взять шрифт из системы, чем читать файл.
Для этого в качестве одного или нескольких значений у свойства src можно указать конструкцию local ( «имя — шрифта — в — системе» ) . Нужно указывать локальные названия до ссылок на внешние файлы, чтобы браузер, найдя шрифт в системе под таким именем, даже не пошёл загружать и читать внешние файлы.
На сайте может использоваться один и тот же шрифт, но в разных начертаниях. Например, жирный font — weight : bold или курсив font — style : italic . В этом случае вам нужно будет подключить разные файлы, содержащие эти начертания.
Тут есть два подхода.
Первый — использовать разные @font — face для подключения разных начертаний шрифта, называя их разными именами. Например, » Lexend Peta Regular» , » Lexend Peta Bold» и » Lexend Peta Italic» . Выглядеть это будет так:
@font-face font-family: "Lexend Peta Regular"; src: local("Lexend Peta Regular"), local("LexendPeta-Regular"), url("Lexend Peta-webfont.woff2") format("woff2"), url("Lexend Peta-webfont.woff") format("woff"), url("Lexend Peta-webfont.svg") format("svg");> @font-face font-family: "Lexend Peta Bold"; src: local("Lexend Peta Bold"), local("LexendPeta-Bold"), url("Lexend Peta Bold-webfont.woff2") format("woff2"), url("Lexend Peta Bold-webfont.woff") format("woff"), url("Lexend Peta Bold-webfont.svg") format("svg");> @font-face font-family: "Lexend Peta Italic"; src: local("Lexend Peta Italic"), local("LexendPeta-Italic"), url("Lexend Peta Italic-webfont.woff2") format("woff2"), url("Lexend Peta Italic-webfont.woff") format("woff"), url("Lexend Peta Italic-webfont.svg") format("svg");>@font-face font-family: "Lexend Peta Regular"; src: local("Lexend Peta Regular"), local("LexendPeta-Regular"), url("Lexend Peta-webfont.woff2") format("woff2"), url("Lexend Peta-webfont.woff") format("woff"), url("Lexend Peta-webfont.svg") format("svg"); > @font-face font-family: "Lexend Peta Bold"; src: local("Lexend Peta Bold"), local("LexendPeta-Bold"), url("Lexend Peta Bold-webfont.woff2") format("woff2"), url("Lexend Peta Bold-webfont.woff") format("woff"), url("Lexend Peta Bold-webfont.svg") format("svg"); > @font-face font-family: "Lexend Peta Italic"; src: local("Lexend Peta Italic"), local("LexendPeta-Italic"), url("Lexend Peta Italic-webfont.woff2") format("woff2"), url("Lexend Peta Italic-webfont.woff") format("woff"), url("Lexend Peta Italic-webfont.svg") format("svg"); >Далее, ниже по коду, используем в разных местах разные начертания шрифтов:
body font-family: "Lexend Peta Regular", sans-serif;> .title font-family: "Lexend Peta Bold", sans-serif;> .accent font-family: "Lexend Peta Italic", sans-serif;>body font-family: "Lexend Peta Regular", sans-serif; > .title font-family: "Lexend Peta Bold", sans-serif; > .accent font-family: "Lexend Peta Italic", sans-serif; >Второй — подключить все файлы начертаний, но использовать для них одно и то же имя шрифта, указав дополнительно, для какого стиля и жирности этот файл. Тогда не нужно будет переопределять шрифт для разных элементов, достаточно будет указывать нужный стиль или жирность шрифта.
Говорим браузеру, что эти файлы используем для нормального начертания:
@font-face font-family: "Lexend Peta"; src: local("Lexend Peta Regular"), local("LexendPeta-Regular"), url("Lexend Peta-webfont.woff2") format("woff2"), url("Lexend Peta-webfont.woff") format("woff"), url("Lexend Peta-webfont.svg") format("svg"); font-weight: normal;>@font-face font-family: "Lexend Peta"; src: local("Lexend Peta Regular"), local("LexendPeta-Regular"), url("Lexend Peta-webfont.woff2") format("woff2"), url("Lexend Peta-webfont.woff") format("woff"), url("Lexend Peta-webfont.svg") format("svg"); font-weight: normal; >Говорим браузеру, что эти файлы используем для жирного начертания:
@font-face font-family: "Lexend Peta"; src: local("Lexend Peta Bold"), local("LexendPeta-Bold"), url("Lexend Peta Bold-webfont.woff2") format("woff2"), url("Lexend Peta Bold-webfont.woff") format("woff"), url("Lexend Peta Bold-webfont.svg") format("svg"); font-weight: bold;>@font-face font-family: "Lexend Peta"; src: local("Lexend Peta Bold"), local("LexendPeta-Bold"), url("Lexend Peta Bold-webfont.woff2") format("woff2"), url("Lexend Peta Bold-webfont.woff") format("woff"), url("Lexend Peta Bold-webfont.svg") format("svg"); font-weight: bold; >Говорим браузеру, что эти файлы используем для курсива:
@font-face font-family: "Lexend Peta"; src: local("Lexend Peta Italic"), local("LexendPeta-Italic"), url("Lexend Peta Italic-webfont.woff2") format("woff2"), url("Lexend Peta Italic-webfont.woff") format("woff"), url("Lexend Peta Italic-webfont.svg") format("svg"); font-style: italic;>@font-face font-family: "Lexend Peta"; src: local("Lexend Peta Italic"), local("LexendPeta-Italic"), url("Lexend Peta Italic-webfont.woff2") format("woff2"), url("Lexend Peta Italic-webfont.woff") format("woff"), url("Lexend Peta Italic-webfont.svg") format("svg"); font-style: italic; >После этого используем в разных местах разные начертания шрифтов:
body font-family: "Lexend Peta", sans-serif; font-weight: normal;> .title font-weight: bold;> .accent font-style: italic;>body font-family: "Lexend Peta", sans-serif; font-weight: normal; > .title font-weight: bold; > .accent font-style: italic; >Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Важно, чтобы файлы со шрифтами лежали на том же домене, что и сайт, на котором они используются. Если вы захотите обратиться к шрифтам из другого домена, то подобный запрос будет заблокирован по правилам безопасности запросов с разными источниками (CORS).
�� @font — face нужно объявлять до того, как вы обратитесь в CSS к этому шрифту. Принято подключать шрифты в самом начале файла стилей (но после всех @import ).
�� @font — face нельзя объявить внутри другого CSS-правила.
�� Важно использовать в точности то название подключённого шрифта, которое вы задаёте внутри @font — face . Иначе магия не сработает.
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� Дизайнеры очень любят всякие разные нестандартные шрифты. Если видите в макете несистемный шрифт — просите файл или ссылку на шрифт у дизайнера.
Часто происходит так, что дизайнер отдаёт только TTF-файл, потому что для дизайнерских программ его достаточно. В этом случае вам нужно будет конвертировать шрифт в остальные форматы.
Держите проверенные конверторы:
- Font Converter
- Online @font-face generator
�� Советую всегда проверять, есть ли шрифт на сайте гуглового сервиса Google Fonts. Если найдёте, то останется только проставить нужные стили шрифта и подключить одной строкой вместо кучи @font — face . Ах, чудный идеальный мир, где все дизайнеры используют только бесплатные шрифты ��♀️
�� Не все кастомные шрифты бесплатные. Например, студия Лебедева разрабатывает собственные шрифты. Дизайнеры в полёте фантазии могут использовать в том числе пиратские копии. Чтобы у вас и у заказчика потом не случилось проблем, просите дизайнера купить легальные версии нужных шрифтов и прислать вам исходные файлы. Или заменить платный шрифт на бесплатный.
@font-face
Правило @font-face позволяет определить настройки шрифтов, а также загрузить специфичный шрифт на компьютер пользователя.
Синтаксис
@font-face
Значения
Внутри конструкции @font-face может находиться набор свойств для изменения параметров шрифта ( font-family , font-size , font-style и др.), а также ссылка на шрифтовой файл. Ссылка записывается в виде src: url(URI) , где URI — относительный или абсолютный путь к файлу.
HTML5 CSS2.1 CSS3 IE Cr Op 11 Op 12 Sa Fx
@font-face @font-face < font-family: Pompadur; /* Имя шрифта */ src: url(fonts/pompadur.ttf); /* Путь к файлу со шрифтом */ >PПротяженность варьирует дорийский микрохроматический интервал, но если бы песен было раз в пять меньше, было бы лучше для всех.
Результат данного примера в браузере Safari показан на рис. 1.
Рис. 1. Собственный шрифт на странице
Браузеры
Браузер Internet Explorer до версии 9.0 поддерживает только шрифты формата EOT (Embedded OpenType).
Opera в некоторых случаях может не показывать на веб-странице текст выбранным шрифтом, заменяя его стандартным. Причём для локальных документов всё работает корректно. Это происходит в тех случаях, когда имя пользователя в Windows написано кириллицей.