Использование @ font-face онлайн урок.


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

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

# Самая глубокая возможная поддержка браузера

Это метод с самой глубокой поддержкой, доступной прямо сейчас. Правило@ font-faceдолжно быть добавлено в таблицу стилей перед любыми стилями.

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Затем используйте его для стилей таких элементов:

body {
font-family: 'MyWebFont', Fallback, sans-serif;
}

# Практический уровень поддержки браузера

Вещи сильно переходят в сторону WOFF и WOFF 2 , поэтому нам, возможно, удастся избежать:

@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
}
ChromeSafari

@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff'),
url('myfont.ttf') format('truetype');
}
ChromeSafariFirefox

@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2');
}
ChromeSafari

+ с флагом

23+ Нет 37

@import url(//fonts.googleapis.com/css?family=Open+Sans);

Затем мы можем использовать его для стилей элементов:

body {
font-family: 'Open Sans', sans-serif;
}

Если вы откройте URL-адрес шрифта , вы можете увидеть всю работу@ font-faceза кулисами.

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

См. Pen Использование @import для пользовательских шрифтов с помощью CSS-трюков ( @ css-tricks ) в CodePen .

# & lt; link & gt; с таблицей стилей

Аналогичным образом вы можете ссылаться на тот же актив, что и любой другой фильтр CSS, в& lt; head & gt;документа HTML, а не в CSS. Используя тот же пример из Google Fonts, это то, что мы будем использовать:

<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Затем мы можем стилизовать наши элементы, как и другие методы:

body {
font-family: 'Open Sans', sans-serif;
}

Опять же, это импортирует правила@ font-face, но вместо того, чтобы вводить их в нашу таблицу стилей, они добавляются в наш HTML& lt; head & gt;вместо этого.

См. Pen Использованиедля пользовательских шрифтов с помощью CSS-трюков ( @ css-трюки ) на CodePen .

Это примерно то же самое... обе методики загружают необходимые активы.

# Общие сведения о типах шрифтовых файлов

Исходный фрагмент в верхней части этого сообщения ссылается на множество файлов со странными расширениями. Давайте рассмотрим каждый из них и лучше поймем, что они означают.

# WOFF WOFF2

Стенды для:Web Open Font Format.

Созданный для использования в Интернете и , разработанный Mozilla совместно с другими организациями, шрифты WOFF часто загружаются быстрее других форматов, потому что они используют сжатую версию структуры, используемую шрифтами OpenType (OTF) и TrueType (TTF), Этот формат также может включать метаданные и информацию о лицензии в файле шрифта. Этот формат, по-видимому, является победителем и во всех браузерах.

WOFF2 является следующим поколением WOFF и имеет лучшее сжатие, чем оригинал.

# SVG SVGZ

Стенды для:Масштабируемая векторная графика (шрифт)

SVG - это векторное повторное создание шрифта, что делает его намного легче в размере файла, а также делает его идеальным для использования в мобильных устройствах, Этот формат является единственным, разрешенным версией 4.1 и ниже для Safari для iOS. Шрифты SVG в настоящее время не поддерживаются Firefox, IE или IE Mobile. Firefox отложил реализацию на неопределенный срок, чтобы сосредоточиться на WOFF.

SVGZ - это версия SVG с застежкой-молнией.

# EOT

Стенды для:Встраиваемого открытого типа.

Этот формат был создан Microsoft (оригинальными новаторами@ font-face) и является проприетарным файловым стандартом, поддерживаемым только IE. Фактически, это единственный формат, который IE8 и ниже будут распознавать при использовании@ font-face.

# OTF TTF

Стенды для:Шрифта OpenType и шрифта TrueType.

Формат WOFF был первоначально создан как реакция на OTF и TTF, частично, потому что эти форматы могут быть легко (и незаконно) скопированы. Однако OpenType имеет возможности, которые могут заинтересовать многие дизайнеры ( ligatures и такие ),

# Примечание о производительности

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

Общим симптомомбылкраткий момент, когда шрифты сначала загружаются как резерв, а затем мигают загруженным шрифтом. Пол Ирландский имеет более старое сообщение на этом (дублируется «FOUT»: Flash of Unstyled Text).

В эти днибраузеры обычно скрывают текст до загрузки пользовательского шрифта по умолчанию. Лучше или хуже? Вам решать. Вы можете контролировать этот процесс различными способами. Немного вне рамок этой статьи, но вот трифтекта статей Заха Койдермана, чтобы вы начали вниз по кроличьей дыре:

Вот еще несколько соображений при реализации пользовательских шрифтов:

# Просмотр размера файла

Шрифты могут быть на удивление тяжелыми, поэтому наклоняйтесь к вариантам, которые предлагают более легкие версии. Например, предпочитаем набор шрифтов, который составляет 50 КБ против одного, который весит 400 КБ.

# Ограничить набор символов, если возможно

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

# Рассмотрите системные шрифты для небольших экранов

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

В этом примере экраны размером менее 1000px будут заменены системным шрифтом, а экраны, которые широко и выше будут обслуживаться, будут использоваться для пользовательского шрифта.

@media (min-width: 1000px) { 
body {
font-family: 'FontName', Fallback, sans-serif;
}
}

# Службы шрифтов

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

Вот несколько размещенных служб шрифтов:

# Что касается знаковых шрифтов?

Это правда, @ font-face может загружать файл шрифта, полный значков, которые могут использоваться для системы значков. Однако, я думаю, вам намного лучше использовать SVG в качестве системы значков. Вот сравнение двух методов.

# Дополнительные ресурсы