Подключить шрифт html: Свой шрифт на странице | htmlbook.ru

Содержание

Веб-шрифты — Изучение веб-разработки | MDN

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

Предварительные требования:	Основная компьютерная грамотность, основы HTML (изучите Введение в HTML), основы CSS (изучите Введение в CSS), Основы CSS текста и шрифта.
Задача:	Изучить как применять веб-шрифты к веб-странице, использовать сторонний сервис или писать код самостоятельно.

Как мы рассматривали в Фундаментальной стилизации текста и шрифта, шрифты применённые к вашему HTML могут контролироваться при помощи свойства font-family. Оно принимает одно и более имён семейств шрифтов и браузер следует по списку пока не найдёт тот шрифт, который является доступным в системе, под управлением которой он работает:

p {
  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
}

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

Но есть альтернатива, которая работает очень хорошо начиная с 6-ой версии IE. Веб-шрифты — это функция CSS позволяющая вам указывать файлы шрифтов, загружаемые вместе с вашим веб-сайтом по мере доступа к нему, это означает, что любой браузер, поддерживающий веб-шрифты, может иметь в своём распоряжении именно те шрифты, которые вы укажете. Замечательно! Требуемый синтаксис выглядит примерно так:

Во-первых, у вас есть блок @font-face в начале CSS, который указывает файл(-ы) шрифтов для загрузки:

@font-face {
  font-family: "myFont";
  src: url("myFont.woff");
}

Ниже вы можете использовать имя семейства шрифтов, указанное внутри @font-face, чтобы применить свой собственный шрифт ко всему, что вам нравится, как обычно:

html {
  font-family: "myFont", "Bitstream Vera Serif", serif;
}

Синтаксис становится немного сложнее, чем этот; мы вдадимся в подробности ниже.

Есть две важные вещи, которые нужно иметь в виду о веб-шрифтах:

Браузеры поддерживают разные форматы шрифтов, поэтому вам будут нужны несколько форматов шрифтов для приличной кросс-браузерной поддержки. Например, большинство современных браузеров поддерживают WOFF/WOFF2 (Web Open Font Format versions 1 and 2), наиболее эффективный формат, но старые версии IE поддерживают только шрифты EOT (Embedded Open Type) и вам возможно понадобиться включать версию SVG шрифта для поддержки старых версий браузеров iPhone и Android. Ниже мы покажем вам как генерировать требуемый код.
В основном шрифты не бесплатны для использования. Вы должны платить за них и/или соблюдать другие условия лицензии такие как указание создателя шрифта в коде (или на вашем сайте). Вы не должны красть шрифты и использовать их без должного указания авторства.

Обратите внимание: Веб-шрифты как технология поддерживается в Internet Explorer начиная с 4 версии!

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

Вы должны использовать файлы web-font-start.html и web-font-start.css как отправную точку добавляя в них ваш код (см. живой пример). Сейчас сделайте копию этих файлов в новой директории на вашем компьютере. В файле web-font-start.css вы найдёте некоторый минимальный CSS для работы с базовым макетом и вёрсткой примера.

Поиск шрифтов

В этом примере мы будем использовать два веб-шрифта, один для заголовков, и другой для основного текста. Для того чтобы начать нам необходимо найти файлы шрифтов, которые содержат эти шрифты. Шрифты созданы шрифтовыми «цехами» и хранятся в разных форматах фалов. Как правило существует три типа сайтов, где вы можете получить шрифты:

Бесплатный дистрибьютер шрифтов: это сайт, который предоставляет бесплатные шрифты для скачивания (могут существовать некоторые условия лицензии, например, указание создателя шрифта). Примеры включают Font Squirrel, dafont, и Everything Fonts.
Платный дистрибьютер шрифтов: это сайт, который предоставляет шрифты за плату, например fonts.com или myfonts.com. Также вы можете купить шрифты напрямую у производителя шрифтов, например Linotype, Monotype, или Exljbris.
Сервис онлайн шрифтов: это сайт, который предоставляет вам шрифты, делая весь процесс проще. Смотрите раздел Использование онлайн-сервиса шрифтов для более подробной информации.

Давайте найдём какие-нибудь шрифты! Отправляйтесь на Font Squirrel и выберите два шрифта — симпатичный интересный шрифт для заголовков (может быть симпатично выглядящий или шрифт с засечками) и немного менее кричащий и более читабельный шрифт для параграфов. Когда вы найдёте каждый шрифт, нажмите на кнопку загрузки и сохраните файлы в той же директории, где ранее вы сохранили файлы HTML и CSS. Не имеет значения являются ли они TTF (True Type Fonts) или OTF (Open Type Fonts).

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

Обратите внимание: В разделе «Find fonts» в колонке справа, вы можете кликать по различным тегам и классификациям чтобы отфильтровать отображаемые варианты для выбора.

Генерация требуемого кода

Теперь вам надо будет сгенерировать требуемый код (и форматы шрифтов). Для каждого шрифта проделайте следующие шаги.

Убедитесь, что вы выполнили все лицензионные требования если вы собираетесь использовать это в коммерческих и/или веб проектах.
Перейдите на Fontsquirrel Webfont Generator.
Выгрузите два ваших файла шрифтов используя кнопку Upload Fonts.
Поставьте галочку отмеченную «Yes, the fonts I’m uploading are legally eligible for web embedding».
Кликните по Download your kit.

После того как генератор закончит обработку, вы должны получить ZIP файл к загрузке — сохраните его в той же директории что и ваши HTML и CSS.

Реализация кода в вашем демо

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

несколько версий каждого шрифта (например .ttf, .woff, .woff2 и т.д.; предоставленные шрифты будут обновляться со временем по мере изменения требований поддержки браузера). Как упомянуто выше, несколько шрифтов нужны для кросс-браузерной поддержки — это метод Fontsquirrel быть уверенными что вы получили всё что вам надо.
Демо файл HTML для каждого шрифта — загрузите их в ваш браузер чтобы посмотреть, как будет выглядеть шрифт в разных контекстах использования.
Файл stylesheet.css, который содержит сгенерированный @font-face код который вам нужен.

Для внедрения их в ваше демо следуйте следующим шагам:

Переименуйте распакованную папку на что-нибудь лёгкое и простое, например fonts.
Откройте файл stylesheet.css и скопируйте содержимое обоих @font-face блоков в ваш файл web-font-start.css — вам надо вставить их в самый верх, до любого вашего CSS, так как шрифты должны быть импортированы до того, как вы сможете использовать их на вашем сайте.
Каждый из функций url() указывает на файл шрифта который мы хотим импортировать в наш CSS — мы должны убедиться в том, что пути к файлам верные, поэтому добавьте fonts/ в начало каждого пути (настройте так как необходимо).
Теперь вы можете использовать эти шрифты в ваших стеках шрифтов, как и любой веб-безопасный или по умолчанию системный шрифт. Например:

font-family: 'zantrokeregular', serif;

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

Онлайн-сервисы шрифтов обычно хранят и обслуживают шрифты для вас, поэтому вам не надо переживать о написании @font-face кода и обычно необходимо просто вставить строчку или две простого кода в ваш сайт для того чтобы все работало. Примеры включают Adobe Fonts и Cloud.typography. Большинство из этих услуг на основе подписки, за исключением Google Fonts, полезный бесплатный сервис, особенно для быстрого тестирования работы и написания демо.

Большинство из этих сервисов легки в использовании, поэтому мы не будем освещать их в деталях. Давайте кратко рассмотрим Google fonts, чтобы вы понимали идею. И снова, используйте копии web-font-start.html и web-font-start.css в качестве отправной точки.

Отправляйтесь на Google Fonts.
Используйте фильтры с правой стороны чтобы отобразить типы шрифтов, которые вы хотите выбрать и выберите пару шрифтов, которые вам понравятся.
Для выбора семейства шрифтов нажмите на кнопку ⊕ рядом с ним.
Когда вы выбрали семейства шрифтов, нажмите на панель [Number] Families Selected в низу страницы.
На полученном экране, сначала вам надо скопировать строку показанного HTML кода и вставить её в head вашего HTML файла. Вставьте его выше существующего <link> элемента для того, чтоб шрифт импортировался до того, как вы начнёте пользоваться им в вашем CSS.
Далее вам надо скопировать CSS-объявления, перечисленные в вашем CSS, чтобы применить пользовательские шрифты к вашему HTML.

Обратите внимание: вы можете найти законченные версии google-font.html и google-font.css, если вам необходимо сверить вашу работу с нашей (см. live).

Давайте исследуем тот @font-face синтаксис, который fontsquirrel сгенерировал для вас. Это то, как выглядит один из этих блоков:

@font-face {
  font-family: 'ciclefina';
  src: url('fonts/cicle_fina-webfont.eot');
  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
         url('fonts/cicle_fina-webfont.woff') format('woff'),
         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
  font-weight: normal;
  font-style: normal;
}

Это называется «пуленепробиваемым @font-face синтаксисом», после публикации Пола Айриша (Paul Irish), с самого начала, когда @font-face начал получать популярность (Bulletproof @font-face Syntax). Давайте пройдёмся по нему, чтобы посмотреть, что он делает:

font-family: В этой строке указывается имя, которое вы хотите использовать для обозначения шрифта. Вы можете указать его как угодно, если вы используете его последовательно в вашем CSS.
src: В этой строке указывается путь к файлам шрифтов которые будут импортированы в ваш CSS (url путь) и формат каждого файла шрифта (format часть). Последняя часть в каждом случае опциональна, но полезно объявлять его, потому что это позволяет браузерам быстрее находить шрифт, который они могут использовать. Могут быть перечислены несколько объявлений, разделённых запятыми — браузер будет искать среди них и использовать первый который найдёт и тот который он понимает — поэтому лучше всего ставить новые, лучшие форматы такие как WOFF2 в начало, а старые, не такие хорошие форматы как TTF в конец. Единственное исключение это EOT шрифты — они размещены первыми чтобы исправить пару багов в старых версиях IE который постарается использовать первую вещь, которую найдёт, даже если он не умеет использовать этот шрифт.
font-weight/font-style: В этих строках указывается какую толщину имеет шрифт и является ли он курсивом или нет. Если вы импортируете несколько значений толщины одного и того же шрифта вы можете указать какая у них толщина/стиль и затем использовать разные значения font-weight/font-style для выбора между ними, вместо того, чтобы называть всех разных членов семейства шрифтов разными именами. @font-face совет: установите font-weight и font-style так чтобы ваш CSS был простым от Роджера Джонсона (Roger Johansson) покажет, что делать более детально.

Обратите внимание: вы также можете указать определённые значения font-variant (en-US) и font-stretch (en-US) для ваших веб-шрифтов. В новых браузерах вы также можете указать значение unicode-range (en-US), который является конкретным диапазоном символов, которые вы хотите использовать из веб-шрифта — в поддерживающих браузерах, будут загружены только указанные символы, сохраняя от ненужной загрузки. Creating Custom Font Stacks with Unicode-Range от Drew McLellan предоставляет некоторые полезные идеи того как это использовать

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

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

Теперь, когда вы ознакомились с нашими статьями об основах стилизации текста, пришло время проверить ваше понимание нашей оценкой модуля «Задание: стилизация школьного сайта».

Как подключить шрифт к сайту при помощи @font-face в CSS. Блог на facefont

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

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

Пошаговая установка

1. Выберите нужный шрифт и нажмите «скачать для сайта».

2. В корне своего сайта создайте папку fonts, и скопируйте в нее скачанные шрифты.

3. Откройте свой CSS-документ и скопируйте в него содержимое текстового файла из архива.

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

5. Готово. Скопируйте свойство с названием семейства и вставьте в селектор, для которого вы прописываете стили.

Что если я уже скачал шрифт в другом месте, и хочу его подключить?

В таком случае вам нужно найти в интернете конвертор шрифтов и преобразовать ваш ttf шрифт (или otf) в нужные форматы, а именно в eot, svg, woff и woff2. Это необходимо для того чтобы шрифт отображался и корректно работал во всех браузерах, а также на мобильных устройствах.

Затем вам нужно самостоятельно прописать правило @font-face, соблюдая его синтаксис.

Синтаксис @font-face

Синтаксис правила можно условно разделить на основные свойства и расширенные.

Основные:

font-family – указывает название шрифта.
src – указывает путь шрифта. Это может быть URL шрифта, расположенного на сервере вашего сайта, URL шрифты расположенного на чужом сервере (например, Google Fonts), или просто название шрифта расположенного на компьютере пользователя (Helvetica New Bold, Tahoma, Georgia и т.д.).

Расширенные:

font-display – определяет как будет отображаться шрифт, в зависимости от того, был ли он загружен и готов ли к использованию.
font-stretch – позволяет регулировать ширину текста.
font-style – определяет начертание шрифта – обычное, курсивное или наклонное (последние два это не одно и то же).
font-weight – устанавливает насыщенность шрифта, по шкале от 100 до 900 (100-сверхсветлое, 900-сверхжирное).
font-variant — определяет как нужно представлять строчные буквы — оставить их без модификаций или делать их все прописными уменьшенного размера(капитель).
font-feature-settings – позволяет управлять расширенными типографскими функциями в шрифтах OpenType.
font-variations-settings – позволяет осуществлять низкоуровневый контроль над вариациями Open Type и TrueType шрифтов, указывая четырехбуквенные названия осей.
unicode-range – указывает диапазон Unicode кодов(глифов), которые будут использоваться в шрифте.

Подключение шрифта к сайту с помощью Google Fonts

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

Скопированный код нужно разместить в теле тега head, на вашей странице html.

Минус данного способа в том, что если во время верстки сайта у вас пропал интернет – шрифты перестанут отображаться и заменятся на стандартные т.к. файлы находятся не на локальном компьютере, а на серверах Google. Также, есть шансы, что когда вы приедете на презентацию верстки к клиенту (или просто на согласование), и у него не будет Wi-Fi, то проблема повторится.

Как подключить шрифт Awesome у себя на сайте — Технический блокнот

Awesome — это набор векторных иконок. А точнее шрифт состоящий не из букв и цифр, а из картинок. И эти изображения, так как они по сути являются шрифтом, можно оформлять (модифицировать) с помощью CSS стилей, устанавливать для них цвет, размер, тень и многое другое. Что согласитесь очень удобно.

В настоящий момент шрифт Awesome содержит более 1500 бесплатных иконок!

Как установить шрифт Awesome на сайт

Для того чтобы воспользоваться иконками шрифта Awesome нужно скачать набор шрифтов и стилей себе на сайт. Для этого переходим на официальный сайт — https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself и скачиваем архив, нажав на кнопку [Font Awesome Free for the Web].

Далее вам необходимо распаковать архив и скопировать к себе на сайт содержимое папок /css и /webfonts, например в директорию /css/awesome.

Теперь подключите в секции <head> вашего сайта стили Awesome:

<link rel="stylesheet" href="/css/awesome/css/all.css" />

Альтернативный способ подключения шрифтов Awesome

Можно ничего не копировать к себе на сайт, а загружать все данные из CDN сети. Для этого нужно добавить следующий код в раздел <head>:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">

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

Минус — это невозможность использования на автономных сайтах (без доступа к интернету) и зависимость от CDN сети Awesome. Поэтому я, как правило, использую первый способ.

Как использовать шрифты awesome на сайте

После того как вы подключили шрифты у себя на сайте вы можете добавить иконки Awesome на веб-страницу двумя способами:

задать соответствующие классы для элементов <i> и <span>;
добавить к нужному элементу с помощью псевдоэлементов :before, :after и соответствующего значения свойства content.

Пример использования шрифтов Awesome

Для одного из сайтов я использовал следующий код (для элемента <i> использованы стили шрифта awesome версии 4.7.0):


<div>
    <div><i></i><br>Поставка вычислительной техники и ПО</div>
    <div><i></i><br>Построение систем охранного телевидения и видеонаблюдения</div>
    <div><i></i><br>Разработка систем контроля и управления доступом</div>
    <div><i></i><br>Проектирование и монтаж ЛВС/СКС и телефонии</div>
</div>

В браузере результат выглядит так:

Где посмотреть иконки Awesome для сайта

Если буквы и цифры у вас нанесены на клавиши клавиатуры и их использование не вызывает затруднений, то вот по шрифтам awesome есть вопрос: а как узнать соответствие кода иконки и его графического изображения. Например, какой использовать HTML код для отображения иконки Android?

Чтобы выяснить это посетите официальный сайт — https://fontawesome.com/icons?d=gallery&m=free

Например, изображению Android соответствует следующий код:

<i></i>

На экране он выглядит так:

Какую версию шрифтов Awesome лучше использовать на сайте

Шрифт Awesome постоянно развивается, в него регулярно добавляются новые иконки и варианты их оформления. На момент написания статьи актуальна 5 версия шрифта. Но вы спокойно можете использовать у себя на сайте предыдущие редакции 4.7.0 или даже 3.2.1. Для этого посетите страницы https://fontawesome.com/v4.7.0/ и https://fontawesome.com/v3.2.1/ соответственно.

Обратите внимание, что при скачивании предыдущей версии шрифта вас будут постоянно склонять к использованию новой версии 🙂

P.S.

На своих сайтах я обычно использую шрифт awesome версии 4.7.0. Причина в том, что он занимает меньше места. Правда в этой версии заметно скромнее набор иконок, в частности отсутствует упомянутая выше иконка Android, которая появилась лишь в версии 5.0.

Благодарности

При написании статьи были использованы следующие источники:

https://html5book.ru/shrift-awesome/

Основы CSS — Основы современной вёрстки

Основы современной вёрстки

В прошлых уроках мы познакомились с разметкой элементов с помощью HTML. Многие из этих элементов уже имеют какое-то своё визуальное оформление: параграфы имеют отступы, ссылки выделяются подчёркиванием и цветом, заголовкам устанавливаются другие значения размера шрифта. Обычно этого недостаточно для создания полноценных современных сайтов. Какие-то стили нам просто не подходят, а какие-то элементы мы хотим стилизовать отдельно.

Для визуального оформления WEB-страницы создан язык CSS. CSS переводится как каскадные таблицы стилей (Cascading Style Sheets). Именно этот язык отвечает за то, как наши HTML-элементы будут выведены пользователю в браузере.

В этом уроке мы разберём ту часть аббревиатуры, которая относится к таблицам стилей. Что такое каскадность и как это работает вы сможете прочитать в следующем уроке.

Стили CSS

Любые стили CSS, будь то цвет текста или целая анимация, записываются по одной и той же формуле: название стиля: значение;.

Чтобы добавить стиль к элементу, необходимо использовать селектор. Он указывает, к какому именно элементу или элементам нужно добавить наши стили. Для примера возьмём следующую HTML-разметку:

<p>Хекслет — практические курсы по программированию. Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально.</p>

Изменим размер и цвет шрифта в этом предложении. Это можно сделать следующей CSS-записью:

p {
  color: red;
  font-size: 20px;
}

Что означает эта таинственная запись выше? Её можно условно разбить на три основные составляющие:

p — это селектор. Здесь мы говорим, чтобы браузер выбрал все параграфы на странице. О том, какие бывают селекторы, мы поговорим чуть позже.
Фигурные скобки { }. Они отделяют селектор от правил. Все правила записываются уже внутри этих фигурных скобок.
Свойства. Они записываются по схеме, которая представлена ниже. Чем больше у вас будет практики, тем больше различных свойств и их значений вы будете знать. Не пытайтесь выучить их все сразу. Всегда используйте документацию. Даже опытные разработчики прибегают к ней, чтобы вспомнить правильные значения того или иного свойства.

Разберём некоторые свойства, которые помогут вам оформлять текст:

font-size. Это свойство позволяет задать размер шрифта. Со временем вы узнаете множество различных единиц, в которых можно записать значение. На начальном этапе используйте значения в пикселях. Это достаточно простая и понятная единица измерения, которая не зависит от того, какие ещё стили указаны у текста.
color. Это свойство поможет вам установить новое значение цвета для выбранного текста. Цвет может записываться разными способами. Помимо этого есть большой набор цветов, которые можно записать словами. Это отличный способ познакомиться со свойством color. Посмотреть на все такие записи можно здесь.
text-align. Свойство, устанавливающее положение текста. Может принимать одно из следующих значений: left, right, center, justify.

Подключение CSS

Использовать CSS на странице можно с помощью нескольких способов:

использование специального файла;
использование тега <style> внутри HTML-разметки;
записывая стили непосредственно у нужного тега. Этот способ называется инлайн (inline) записью.

Разберёмся с каждым способом отдельно.

Использование отдельного CSS-файла.

Данный способ один из самых удобных в реальной разработке. Так как стилей в проекте обычно много, то держать их в HTML-файле не очень удобно. Связано это с тем, что HTML-файл становится очень большим и ориентироваться в нём становится невозможно. Чтобы этого избежать, можно создать отдельный CSS-файл. Этот файл будет иметь расширение .css, имя же может быть произвольным.

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

site/
├── css/
│   ├── main.css
├── html/
│   ├── index.html

Добавим основную информацию в файл index.html:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Основной файл index.html</title>
</head>
<body>

</body>
</html>

Теперь необходимо подключить файл main.css в наш файл index.html. Для этого используется специальный тег link. У данного тега необходимо указать атрибут href, значением которого будет путь до файла main.css. Тег link указывается в секции head.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Основной файл index.html</title>
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>

</body>
</html>

Дополнительно разберём эту запись: ../css/main.css. Её можно условно разбить на три составляющие:

../ — переход в директорию выше. Изначально файл index.html находится в директории html, поэтому мы «выходим» из неё в директорию site.
css/ — переход в директорию css.
main.css — указание имени и расширения файла, который мы хотим подключить.

Если бы наши файлы index.html и main.css находились в одной директории, то подключение выглядело бы следующим образом: href="main.css".

После подключения файла мы можем записывать все нужные стили именно в файле main.css. Они автоматически подключатся на наш сайт.

Использование тега style

Вторым способом использования CSS является использование стилей в специальном теге style. Для этого нет необходимости создавать отдельный файл и подключать его к HTML. В этом случае тег style обычно указывается внутри секции head. Хоть это и не обязательное правило, но желательно придерживаться именно такой структуры.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Основной файл index.html</title>

    <style>
        p {
          color: red;
          font-size: 20px;
        }
    </style>
</head>
<body>
    <p>Параграф с размером шрифта 20 пикселей. Текст написан красным цветом.</p>
</body>
</html>

Данный способ не является основным, хотя и рекомендуется для некоторых стилей. Это позволит отобразить некоторые стили ещё до того, как загрузится CSS-файл. Какие стили рекомендовано так выносить, вы сможете узнать в процессе становления вас как профессионала.

Inline-стили

Последним вариантом использования CSS являются инлайн-стили. Они подключаются с помощью атрибута style у любого тега в разметке. Это наименее предпочтительный способ. Его тяжело читать, особенно если у тега десяток стилей. К тому же вы не сможете записать стили для всех одинаковых тегов. Придётся для каждого указывать отдельно. Это приведёт к постоянному копированию стилей.

Возьмём прошлый пример и добавим inline стили:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Основной файл index.html</title>
</head>
<body>
    <p>Параграф с размером шрифта 20 пикселей. Текст написан красным цветом.</p>
</body>
</html>

Селекторы

Селекторы — краеугольный камень всего CSS.

«Не так важны стили, как то, к чему они применяются» © Народная мудрость

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

Разбор каждого селектора — это тема для целого курса. Сейчас нас интересуют три основных селектора, которые можно назвать базовыми:

Селектор по тегу. Такой селектор мы применяли на протяжении всего урока. Цель простая — просто указать тег, для которого будут применяться стили.
Селектор по классу. Если нужно выбрать только конкретные элементы в HTML, то можно дать тегу произвольный класс и, используя конструкцию .название-класса, добавить стили.
Селектор по идентификатору. Ещё один случай выборки по дополнительному атрибуту тега. Главная разница заключается в самом HTML — идентификатор не может повторяться в рамках одной страницы. Одно имя может использоваться только один раз. В связи с этим нет возможности задать стили для идентификатора и использовать его на других элементах. Для выбора идентификатора используется конструкция #имя-идентификатора.

Рассмотрим все три селектора на реальном примере:

Файл index.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Основной файл index.html</title>
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
    <main>
        <h2>Заголовок с идентификатором</h2>
        <p>Просто параграф без класса или идентификатора</p>
    </main>
</body>
</html>

Файл main.css

#main-title {
  color: white;
  font-size: 20px;
  text-align: center;
}

.content {
  background-color: black;
}

p {
  color: white;
}

После применения этих стилей получится следующая картина:

Чёрный фон секции main. Для этого использовали класс content и селектор .content;
Заголовок первого уровня имеет белый цвет, размер шрифта 20 пикселей и расположение по центру. У заголовка есть идентификатор main-title, поэтому для добавления стилей мы смогли использовать селектор по идентификатору #main-title;
Все параграфы будут иметь белый цвет текста. Для этого использовался селектор по тегу.

Вложенность селекторов

В реальной разработке не всегда удаётся пользоваться только этими тремя видами селекторов в том виде, в которых вы их только что изучили. Зачастую нам необходимо ограничить область, для которой будут применяться стили. Разберём на примере.

<section>
    <h3>Новости</h3>

    <article>
        <h3>Новость 1</h3>
        <p>Текст новости</p>
    </article>

    <article>
        <h3>Новость 2</h3>
        <p>Текст новости</p>
    </article>
</section>

<section>
    <h3>Интересные истории</h3>

    <article>
        <h3>История 1</h3>
        <p>Текст истории</p>
    </article>

    <article>
        <h3>История 2</h3>
        <p>Текст истории</p>
    </article>
</section>

Как добиться того, чтобы заголовки новостей были больше? Можно для каждого заголовка в новости добавить свой класс. Это хорошее решение, если новостей немного или нет необходимости для каждой такой секции вводить новые стили для заголовков.

Более простым решением станет использование вложенности селекторов. Вначале посмотрим, как решить нашу задачу:

.news article h3 {
  font-size: 32px;
}

Разберём, что за селектор был указан. Здесь мы указали комбинацию трёх селекторов: .news, article и h3. Каждый из них по отдельности вы уже знаете. Разделив их пробелом мы сказали браузеру: «Возьми все заголовки h3 из article, который лежит внутри элемента с классом news и примени к нему стили». Читать селекторы стоит именно таким образом — справа налево. Такой подход называется вложенностью селекторов. Можно комбинировать что угодно и с какой угодно глубиной.

Важно: для удобной работы не стоит использовать очень большую вложенность. Старайтесь использовать комбинацию не более 2 или 3 селекторов.

Важно понимать, что такая запись .news article h3 выберет все заголовки второго уровня во всех article, которые лежат внутри блока с классом .news. Давайте немного видоизменим вёрстку, чтобы это проверить.

<section>
    <h3>Новости</h3>

    <article>
        <h3>Новость 1</h3>
        <p>Текст новости</p>
    </article>

    <article>
        <h3>Новость 2</h3>
        <p>Текст новости</p>
        <section>
            <h3>Похожие новости</h3>

            <article>
                <h3>Похожая новость 1</h3>
                <p>Текст новости</p>
            </article>
        </section>
    </article>

</section>

Ко второй новости мы добавили блок «Похожие новости». Самое интересное, что наше правило font-size: 32px; применится и к заголовку «Похожие новости», и к заголовку «Похожая новость 1». Так как оба заголовка так или иначе лежат внутри article, которые находятся в блоке с классом .news.

Такой тип селекторов называется контекстным или селектор потомков. С его помощью мы выбираем всех потомков, которые встречаются внутри самого левого селектора.

Как же нам выбрать только те заголовки, которые относятся непосредственно к новостям, а не к похожим новостям или заголовкам других секций? Здесь нам на помощь придёт дочерний селектор. Его суть в выборе только тех элементов, которые непосредственно лежат внутри нужного нам блока. Без учёта всех остальных вложенностей. Чтобы указать такой селектор, используется символ >. Укажем, что нам нужны только те article, которые лежат внутри .news. И нам нужны заголовки, которые находятся внутри этих article. Это делается следующим образом:

.news > article > h3 {
  font-size: 24px;
}

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

Дополнительное задание

Создайте у себя на компьютере файлы index.html и style.css. Подключите файл стилей. Создайте разметку любого текста и используя свойства, которые мы изучили в этом уроке, оформите текст.
Попробуйте скопировать примеры из этого урока.

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >

Нашли опечатку или неточность?

Выделите текст, нажмите
ctrl + enter
и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.

Об обучении на Хекслете

Как подключить собственный шрифт к форме

В нашу форму Вы можете подключить любой шрифт из GoogleFonts. Это сервис, с помощью которого Вы можете подключить более 700 шрифтов в свою форму. Для этого Вам необходимо перейти во вкладку “Тема оформления” в раздел “CSS”:

В GoogleFonts, Вы можете выбрать категории шрифтов. Для того, чтобы сервис показал шрифты с поддержкой русского языка в списке “Language” выберите пункт “Cyrillic”:

Выберите необходимый шрифт, для примера — “Roboto” и кликните на него:

Выберите понравившийся стиль и нажмите кнопку “+Select this style”:

Справа появится меню выбранных стилей и их описание во вкладке “Review”. Нас интересует вкладка “Embed”. Кликните на эту вкладку:

Откройте “@import”, где находится необходимый код для нашей темы оформления:

Необходимо скопировать код, который заключён в тег <style> и значение в пункте «CSS rules to specify families». Далее вставить в разделе «CSS», во вкладке «Тема оформления»:

На скрине во второй строке прописали в таком виде через знак » * «, чтобы этот стиль был применён ко всем элементам формы.

Если выбрать несколько стилей для шрифта, то во вкладке «@import» добавится этот стиль:

Тогда используемый шрифт в форме будет иметь такой вид:

Также, можно задать стиль определённому элементу. Для этого добавим, например для элемента «ФИО» такой код:

Где .user_formish table.username input.text отвечает за введённый текст в поле «ФИО»:

Также можно добавить код для конкретного элемента. Для этого, например, можно задать класс элементу. Добавим в форму элемент «Текстовое поле»:

Зайдём в режим редактирования элемента и в поле «Имя CSS класса», укажем название класса — «prostotext»:

Тогда добавляемый код должен иметь вид:

Теперь, при вводе данных в текстовое поле, именно в этом поле будет заданный шрифт:

Если Вам необходимо в другом текстовом поле использовать такой шрифт, то достаточно в этом элементе в режиме редактирования прописать класс «prostotext» в поле «Имя CSS класс». Таким же образом можно добавить стиль заголовкам:

Тогда в пользовательский CSS добавим класс .zagolovok:

Где класс label.label отвечает за названия всех элементов. Т.к. мы использовали только в элементе «ФИО» класс «zagolovok», то в режиме просмотра будет название этого элемента с заданным стилем:

Если выбрать несколько стилей для шрифта, то во вкладке «@import» добавится этот стиль:

Тогда используемый шрифт в форме будет иметь такой вид:

Также, можно задать стиль определённому элементу. Для этого добавим, например для элемента «ФИО» такой код:

Где .user_formish table.username input.text отвечает за введённый текст в поле «ФИО»:

Зайдём в режим редактирования элемента и в поле «Имя CSS класса», укажем название класса — «prostotext»:

Тогда добавляемый код должен иметь вид:

Теперь, при вводе данных в текстовое поле, именно в этом поле будет заданный шрифт:

Тогда в пользовательский CSS добавим класс .zagolovok:

Если Вам необходимо в других названиях элементов использовать такой шрифт, то
достаточно в этом элементе в режиме редактирования прописать класс
«zagolovok» в поле «Имя CSS класс».

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

Иконочный шрифт Font Awesome

Дорогие читатели, приветствую Вас! Рассказать о шрифте Font Awesome я планировал достаточно давно, в своих проектах активно его применяю и сегодня приведу несколько аргументов в его пользу.

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

Раньше для снижения числа запросов я объединял графические элементы дизайна в CSS-спрайты, такое решение для оптимизации скорости загрузки сайта актуально по сей день. Однако проблема масштабирования таким образом не решается и при увеличении изображений они теряют привлекательный внешний вид.

Иконочный шрифт Font Awesome содержит огромный набор векторных иконок, которые отлично масштабируются и превосходно выглядят на экранах высокого разрешения! На webliberty.ru они используются повсеместно: в форме поиска, в списке рубрик, возле даты публикации статьи, а также в кнопках социальных сетей и других элементах оформления.

Преимущества и недостатки иконочных шрифтов

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

С чем связана их популярность? Решающую роль сыграли гибкость настройки, простота установки и использования в проекте. Основные преимущества:

В коллекции более 500 бесплатных векторных иконок для сайта.
Иконки масштабируются до любого размера без потери качества.
Стилизация с помощью CSS — размер шрифта, цвет и другие свойства.
Не требуется включенная поддержка JavaScript в браузере.
Кроссбраузерность (IE7 и выше), поддержка мобильных браузеров.

Наряду с преимуществами стоит упомянуть о недостатках, они, к сожалению, тоже есть, но довольно незначительные:

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

Как подключить шрифт Font Awesome

Первый и самый простой способ подключить шрифт — загрузить его с внешнего CDN, вставляя в секцию <head> следующую строку:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Второй способ заключается в ручной установке шрифта Font Awesome на свой хостинг. Загрузите архив с официального сайта, распакуйте и сохраните папки css и fonts на сервере в каталог font-awesome. Подключается аналогично, меняя лишь путь к файлу:

<link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css">

Как использовать иконки Font Awesome на сайте

Для того чтобы вставить иконку на страницу поступаем следующим образом: находим на сайте нужную иконку и копируем ее код, затем вставляем в HTML-режиме:

<i></i>

На официальном сайте проекта есть документация и дополнительные примеры использования.

Иногда элементы сайта динамически формируются, например, PHP функцией, и нет прямой возможности редактировать HTML, тогда применяют псевдоклассы в селекторах CSS.

Я покажу как это сделать на примере виджета категорий WordPress. Посмотрите на фрагмент исходного кода:

<div>Рубрики блога</div>
<ul>
	<li>
		<a href="/category/wordpress/">WordPress</a>
	</li>
</ul>

Для класса cat-item я добавил псевдоэлемент before таким образом получилось:

.cat-item:before {
	content: "\f07c";
	font-family: FontAwesome;
	color:#393;
	padding-right:10px
}

Свойство content генерирует иконку из hex-кода таблицы символов Unicode, который можно узнать на странице с иконкой:

Unicode \f07c как раз и соответствует hex-коду нужной иконки, который в дальнейшем применяем для стилизации собственных классов.

На этом завершаю краткий обзор, если появились вопросы — задавайте в комментариях. Используете ли Вы иконки Font Awesome на своем сайте, быть может другой шрифт?

«Безопасные» шрифты и их применение в веб-дизайне

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

Список безопасных шрифтов

Обратите внимание, что сначала идёт распространённый шрифт (например Arial), если его на компьютере посетителя нет, то идёт более распространённый и похожий на него (например Helvetica), и в конце если оба эти шрифта отсутствуют, подключается serif, sans-serif, monospace или cursive (данные способы начертания шрифта есть всегда).

*Шрифт “Century Gothic” содержится на 83% устройств, этот процент растет и в скором будущем он станет безопасным.

Увеличить количество доступных шрифтом можно за счет подключаемых шрифтов от Google Fonts.

Шрифты – иконки

1. http://fontawesome.io – Font Awesome
2. http://zurb.com/playground/foundation-icon-fonts-3 – Foundation icon
3. http://ionicons.com – ionicons
4. http://design.google.com/icons/ – Material Design Icons
5. http://octicons.github.com – Octicons
6. http://www.typicons.com – Typicons
Сервис для выбора иконок: http://glyphsearch.com

Web инструменты для работы со шрифтами

Подбор шрифтов

– http://fontstorage.com/ – База шрифтов с возможностью подбора и вывод в CSS
– http://www.typetester.org/ – Тестирование и подбор шрифтов, вывод в CSS.
– http://csstypeset.com/ – Работа с разными стилями и атрибутами текста и вывод в CSS.
– http://www.designerplaything.co.uk/designer-plaything.html – Подбор шрифта и цвета.
– http://www.texster.ru/ – Помощник в выборе шрифта.
– http://flippingtypical.com/ – Просмотр вашего текста в разном стиле.
– http://www.stcassociates.com/lab/fontbrowser.html – Аналогичен предыдущему (более расширен).
– http://www.blindtextgenerator.com/ru – Русский онлайн Lorem Ipsum генератор.
– http://wordmark.it/ – Просмотр вашего текста в разных стилях.

Распознавание шрифтов

– http://www.myfonts.com/WhatTheFont/ – Определение шрифта по образцу.
– https://www.fontspring.com/matcherator – Определение шрифта по образцу.
– http://www.identifont.com/identify.html – Выявляет шрифт через ряд вопросов о нем.
– http://www.typophile.com/ – Крупнейшее сообщество на тему шрифтов.
– http://www.bowfinprintworks.com/ – поиск шрифтов по образцам.
– http://www.fontshop.com/research/ – выясняет название по форме отдельных символов.
– http://www.flickr.com/groups/typeid/ – определяет названия шрифтов, используемых в различных изображениях.
– http://fount.artequalswork.com/ – бесплатный онлайн сервис для моментальной идентификации шрифта.

Скачать шрифты

– http://www.xfont.ru/ – Крупнейший сервис по шрифтам.
– http://www.fontov.net/ – бесплатный русскоязычный сервис для поиска и подбора интересующегося Вас шрифта.
– http://ifont.ru/ – Большой русскоязычный сервис шрифтов.
– http://www.dafont.com/ – шрифты с просмотром вашего примера.
– http://www.fonts-online.ru/ – База шрифтов с просмотром Online

Прочее

– http://fontstruct.com/ – создание собственных шрифтов Online
– http://fontark.net/farkwp/ – Коструктор шрифтов Online
– http://www.fontsquirrel.com/fontface/generator – загрузка и доработка ваших шрифтов.
– http://pxtoem.com/ – Переводит одни единицы измерения шрифтов в другие.
– http://csswarp.eleqtriq.com/ – Онлайн сервис для подготовки эффектного текста.
– http://www.bestwebfonts.com/ – Удобный сервис для просмотра веб-шрифтов, в том числе с применением различных эффектов.

Источник: pomelnikov.com

веб-шрифтов — Изучите веб-разработку

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

Как мы рассмотрели в разделе «Основные стили текста и шрифтов», шрифтами, применяемыми к вашему HTML, можно управлять с помощью свойства font-family .Это берет одно или несколько названий семейств шрифтов, и браузер перемещается вниз по списку, пока не найдет шрифт, доступный в системе, в которой он работает:

  п {
  семейство шрифтов: Helvetica, "Trebuchet MS", Verdana, без засечек;
}

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

Но есть альтернатива, которая работает очень хорошо, вплоть до IE версии 6. Веб-шрифты — это функция CSS, которая позволяет вам указывать файлы шрифтов, которые будут загружаться вместе с вашим веб-сайтом по мере его доступа, что означает, что любой браузер, который поддерживает веб-шрифты, может иметь в наличии только указанные вами шрифты. Удивительный! Требуемый синтаксис выглядит примерно так:

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

  @ font-face {
  семейство шрифтов: "myFont";
  src: url ("myFont.woff2 ");
}

Ниже этого вы можете затем использовать имя семейства шрифтов, указанное внутри @ font-face, чтобы применить свой собственный шрифт ко всему, что вам нравится, как обычно:

  html {
  семейство шрифтов: "myFont", "Bitstream Vera Serif", serif;
}

Синтаксис действительно становится немного сложнее этого; мы рассмотрим более подробно ниже.

Вот несколько важных моментов, которые следует учитывать при использовании веб-шрифтов:

Шрифты обычно нельзя использовать бесплатно. Вы должны заплатить за них и / или соблюдать другие условия лицензии, такие как указание создателя шрифта в коде (или на вашем сайте).Вы не должны воровать шрифты и использовать их без должного признания.
Все основные браузеры поддерживают WOFF / WOFF2 (формат открытых веб-шрифтов версии 1 и 2). Даже старые браузеры, такие как IE9 (выпущенный в 2011 году), поддерживают формат WOFF.
WOFF2 поддерживает все спецификации TrueType и OpenType, включая вариативные шрифты, хроматические шрифты и коллекции шрифтов.
Порядок, в котором вы перечисляете файлы шрифтов, важен. Если вы предоставите браузеру список из нескольких файлов шрифтов для загрузки, браузер выберет первый файл шрифта, который сможет использовать.Вот почему формат, который вы указываете первым, должен быть лучшим и предпочтительным форматом, то есть WOFF2, с перечисленными после него более старыми форматами. Браузеры, которые не понимают один формат, вернутся к следующему формату в списке.
Если вам нужно работать с устаревшими браузерами, вы должны предоставить для загрузки веб-шрифты EOT (встроенный открытый тип), TTF (шрифт TrueType) и SVG. В этой статье объясняется, как использовать Fontsquirrel Webfont Generator для создания необходимых файлов.

Примечание : Веб-шрифты как технология поддерживаются в Internet Explorer с версии 4!

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

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

Вы должны использовать файлы web-font-start.html и web-font-start.css в качестве отправной точки для добавления кода (см. Живой пример). Сделайте копию этих файлов в новом каталоге на вашем компьютере.В файле web-font-start.css вы найдете некоторый минимальный CSS для работы с базовым макетом и набором текста примера.

Поиск шрифтов

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

Распространитель бесплатных шрифтов: это сайт, который делает бесплатные шрифты доступными для загрузки (все еще могут быть некоторые условия лицензии, такие как указание создателя шрифта).Примеры включают Font Squirrel, dafont и Everything Fonts.
Распространитель платных шрифтов: это сайт, который предоставляет шрифты за дополнительную плату, например fonts.com или myfonts.com. Вы также можете купить шрифты непосредственно у производителей шрифтов, например Linotype, Monotype или Exljbris.
Онлайн-служба шрифтов: это сайт, который хранит и обслуживает шрифты для вас, что упрощает весь процесс. Дополнительные сведения см. В разделе «Использование онлайн-службы шрифтов».

Давайте найдем шрифты! Перейдите в Font Squirrel и выберите два шрифта — красивый интересный шрифт для заголовков (может быть, хороший дисплей или шрифт с засечками) и чуть менее яркий и более читаемый шрифт для абзацев.Когда вы найдете каждый шрифт, нажмите кнопку загрузки и сохраните файл в том же каталоге, что и файлы HTML и CSS, которые вы сохранили ранее. Не имеет значения, являются ли они TTF (шрифты True Type) или OTF (шрифты открытого типа).

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

Примечание : В Font Squirrel в разделе «Найти шрифты» в правом столбце вы можете щелкнуть различные теги и классификации, чтобы отфильтровать отображаемые варианты.

Создание необходимого кода

Теперь вам нужно сгенерировать требуемый код (и форматы шрифтов). Для каждого шрифта выполните следующие действия:

Убедитесь, что вы выполнили все лицензионные требования, если собираетесь использовать это в коммерческом и / или веб-проекте.
Перейдите к генератору шрифтов Fontsquirrel Webfont.
Загрузите два файла шрифтов с помощью кнопки Загрузить шрифты .
Установите флажок «Да, шрифты, которые я загружаю, имеют право на встраивание в Интернет».
Щелкните Загрузите комплект .

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

Если вам необходимо поддерживать устаревшие браузеры, выберите режим «Эксперт» в Fontsquirrel Webfont Generator, выберите форматы SVG, EOT и TTF перед загрузкой набора.

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

sfnt2woff-zopfli для преобразования ttf в woff
fontforge для конвертации из ttf в svg
batik ttf2svffor преобразование из ttf в svg
woff2 для преобразования из ttf в woff2

Реализация кода в вашей демонстрации

На этом этапе распакуйте только что сгенерированный набор веб-шрифтов. Внутри распакованного каталога вы увидите несколько полезных предметов:

Две версии каждого шрифта: .woff , .woff2 файлов.
Демо-файл HTML для каждого шрифта — загрузите их в свой браузер, чтобы увидеть, как шрифт будет выглядеть в различных контекстах использования.
Файл stylesheet.css , содержащий сгенерированный код @ font-face, который вам понадобится.

Чтобы применить эти шрифты в своей демонстрации, выполните следующие действия:

Переименуйте распакованный каталог на что-нибудь легкое и простое, например fonts .
Откройте таблицу стилей .css и скопируйте оба блока @ font-face , содержащиеся внутри, в файл web-font-start.css — вам нужно поместить их на самый верх, перед любым из ваших CSS, поскольку шрифты должны быть импортированными, прежде чем вы сможете использовать их на своем сайте.
Каждая из функций url () указывает на файл шрифта, который мы хотим импортировать в наш CSS — нам нужно убедиться, что пути к файлам верны, поэтому добавьте шрифтов / в начало каждого пути ( при необходимости отрегулируйте).

Теперь вы можете использовать эти шрифты в своих стеках шрифтов, как любой веб-безопасный или системный шрифт по умолчанию. Например:

  @ font-face {
    семейство шрифтов: 'zantrokeregular';
    src: url ('fonts / zantroke-webfont.woff2') формат ('woff2'),
         url ('fonts / zantroke-webfont.woff') формат ('woff');
    шрифт: нормальный;
    стиль шрифта: нормальный;
}

 Семейство шрифтов : 'zantrokeregular', serif;

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

Онлайн-службы шрифтов обычно хранят и предоставляют шрифты для вас, поэтому вам не нужно беспокоиться о написании кода @ font-face и, как правило, просто нужно вставить одну или две простые строки кода на свой сайт, чтобы все было Работа. Примеры включают Adobe Fonts и Cloud.typography. Большинство этих услуг основано на подписке, за исключением Google Fonts, полезного бесплатного сервиса, особенно для быстрого тестирования и написания демонстраций.

Большинство из этих сервисов просты в использовании, поэтому мы не будем их подробно описывать. Давайте быстро взглянем на шрифты Google, чтобы вы могли понять. Опять же, используйте копии web-font-start.html и web-font-start.css в качестве отправной точки.

Зайдите в Google Fonts.
Используйте фильтры с левой стороны, чтобы отобразить типы шрифтов, которые вы хотите выбрать, и выберите пару шрифтов, которые вам нравятся.
Чтобы выбрать семейство шрифтов, нажмите кнопку ⊕ рядом с ним.
Когда вы выбрали семейства шрифтов, нажмите панель [Number] Families Selected внизу страницы.
На появившемся экране вам сначала нужно скопировать показанную строку HTML-кода и вставить ее в заголовок вашего HTML-файла. Поместите его над существующим элементом , чтобы шрифт был импортирован, прежде чем вы попытаетесь использовать его в своем CSS.
Затем вам необходимо скопировать декларации CSS, перечисленные в вашем CSS, как необходимо, чтобы применить пользовательские шрифты к вашему HTML.

Давайте исследуем синтаксис @ font-face , сгенерированный для вас fontsquirrel. Так выглядит один из блоков:

  @ font-face {
  семейство шрифтов: 'zantrokeregular';
  src: url ('zantroke-webfont.woff2') формат ('woff2'),
       url ('zantroke-webfont.woff') формат ('woff');
  шрифт: нормальный;
  стиль шрифта: нормальный;
}

Давайте пройдемся по нему, чтобы увидеть, что он делает:

font-family : В этой строке указывается имя, которое вы хотите использовать для обозначения шрифта.Вы можете использовать это как угодно, при условии, что вы последовательно используете это в своем CSS.
src : Эти строки определяют пути к файлам шрифтов, которые будут импортированы в ваш CSS (часть url ), и формат каждого файла шрифта (часть формата ). Последняя часть в каждом случае является необязательной, но ее полезно объявить, поскольку она позволяет браузерам быстрее находить шрифт, который они могут использовать. Можно указать несколько объявлений, разделенных запятыми. Поскольку браузер будет искать в них и использовать первый, который он понимает, лучше всего использовать более новые и лучшие форматы, такие как WOFF2, раньше.
font-weight / font-style : Эти строки определяют, какой вес имеет шрифт и является ли он курсивом. Если вы импортируете несколько весов одного и того же шрифта, вы можете указать их вес / стиль, а затем использовать разные значения font-weight / font-style , чтобы выбирать между ними, вместо того, чтобы вызывать все разные члены семейства шрифтов разные имена. Совет @ font-face: определите font-weight и font-style, чтобы ваш CSS оставался простым. Роджер Йоханссон показывает, что делать, более подробно.

Примечание : Вы также можете указать конкретные значения font-variant и font-stretch для ваших веб-шрифтов. В более новых браузерах вы также можете указать значение unicode-range , которое представляет собой определенный диапазон символов, которые вы хотите использовать вне веб-шрифта - в поддерживающих браузерах будут загружаться только указанные символы, что позволяет избежать ненужных загрузок. Создание пользовательских наборов шрифтов с помощью Unicode-Range Дрю Маклеллан дает несколько полезных идей о том, как это использовать.

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

Вы дошли до конца этой статьи и уже прошли некоторые проверки навыков в разделах «Активное обучение», но можете ли вы вспомнить наиболее важную информацию на будущее? Вы можете найти экзамен, чтобы убедиться, что вы сохранили эту информацию, в конце модуля - см. Ввод домашней страницы общеобразовательной школы.

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

`Как настроить пользовательские шрифты с помощью CSS и @ font-face`

19 ноября 2019 г.

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

Готовы? Давайте погрузимся в:

Вот видео, если вы предпочитаете смотреть вместо чтения:

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

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

Фактически, вот 5 расширений файлов, которые вам понадобятся:

Если у вас уже есть все эти расширения файлов шрифтов, вы можете сразу перейти к шагу 2.

Но что, если у вас нет всех расширения файлов шрифтов?

К счастью, решить эту проблему можно быстро и легко.

Просто перейдите к бесплатному генератору шрифтов (мне нравится использовать Transfonter) и загрузите туда свои файлы шрифтов.

Например, на сайте Transfonter нажмите кнопку Добавить шрифты :

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

Убедитесь, что у вас всех выбранных форматов шрифтов, и оставьте параметр «Поддержка семьи» на на :

Наконец, нажмите кнопку Convert и загрузите:

Вот как мой выглядит, разная толщина шрифта и стили с разными расширениями файлов:

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

`Шаг 2: Добавьте файлы шрифтов в свой проект`

Вы можете подумать: куда мне поместить все файлы шрифтов?

Есть ли конкретная папка, которую я должен использовать?

Ответ:

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

Поскольку у вас, вероятно, будет довольно много файлов шрифтов, я бы рекомендовал поместить все файлы шрифтов в папку под названием «Fonts», например:

Groovy! Когда все файлы шрифтов добавлены в ваш проект, пора использовать @ font-face …

`Шаг 3. Используйте @ font-face в CSS для использования файлов шрифтов`

Файлы шрифтов теперь находятся в вашем проекте.Пришло время написать немного CSS, чтобы шрифт был доступен для стилизации типографики!

Откройте файл CSS (или файл препроцессора) и вставьте объявление @ font-face , например:

  @ font-face {
  font-family: 'CaviarDreams'; 
  src: url ('шрифты / CaviarDreams.eot'); 
  src: url ('fonts / CaviarDreams.eot? #Iefix') формат ('embedded-opentype'), 
  url ('fonts / CaviarDreams.woff2') формат ('woff2'), 
  url (' шрифты / CaviarDreams.woff ') формат (' woff '), 
  url (' fonts / CaviarDreams.ttf ') формат (' truetype '), 
  url (' fonts / CaviarDreams.svg # svgFontName ') формат (' svg '); 
  font-weight: 400; 
  стиль шрифта: обычный; 
 }

Вам необходимо заменить семейство шрифтов CaviarDreams на имя вашего пользовательского шрифта.

Вам также необходимо изменить значение, указанное внутри каждого url () , чтобы оно ссылалось на расположение шрифта (где вы разместили файлы шрифтов в своем проекте.См. Шаг 2 выше)

Пример выше охватывает только 1 семейство шрифтов, 1 толщину шрифта и 1 стиль шрифта.

А как насчет нескольких толщин шрифта, например полужирного или светлого? Или курсивный вариант каждой толщины шрифта?

Для этого вам просто нужно добавить дополнительные объявления @ font-face :

  @ font-face {
  font-family: 'CaviarDreams'; 
  src: url ('шрифты / CaviarDreams.eot'); 
  src: url ('fonts / CaviarDreams.eot? #Iefix') формат ('embedded-opentype'), 
  url ('fonts / CaviarDreams.woff2 ') формат (' woff2 '), 
  url (' fonts / CaviarDreams.woff ') формат (' woff '), 
  url (' fonts / CaviarDreams.ttf ') формат (' truetype '), 
  url ('fonts / CaviarDreams.svg # svgFontName') формат ('svg'); 
  font-weight: 400; 
  стиль шрифта: обычный; 
 } 
  @ font-face {
  font-family: 'CaviarDreams'; 
  src: url ('шрифты / CaviarDreams-Italic.eot'); 
  src: url ('fonts / CaviarDreams-Italic.eot? #iefix ') формат (' embedded-opentype '), 
  url (' fonts / CaviarDreams-Italic.woff2 ') формат (' woff2 '), 
  url (' fonts / CaviarDreams-Italic.woff ') формат ('woff'), 
  url ('fonts / CaviarDreams-Italic.ttf') формат ('truetype'), 
  url ('fonts / CaviarDreams-Italic.svg # svgFontName') формат ('svg') ; 
  font-weight: 400; 
  стиль шрифта: курсив; 
 } 
  @ font-face {
  font-family: 'CaviarDreams'; 
  src: url ('fonts / CaviarDreams-Bold.eot '); 
  src: url ('fonts / CaviarDreams-Bold.eot? #Iefix') формат ('embedded-opentype'), 
  url ('fonts / CaviarDreams-Bold.woff2') формат ('woff2'), 
  url ('fonts / CaviarDreams-Bold.woff') формат ('woff'), 
  url ('fonts / CaviarDreams-Bold.ttf') формат ('truetype'), 
  url ('fonts / CaviarDreams- Жирный.svg # svgFontName ') формат (' svg '); 
  font-weight: 700; 
  стиль шрифта: обычный; 
 } 
  @ font-face {
  font-family: 'CaviarDreams'; 
  src: url ('fonts / CaviarDreams-BoldItalic.eot '); 
  src: url ('fonts / CaviarDreams-BoldItalic.eot? #Iefix') формат ('embedded-opentype'), 
  url ('fonts / CaviarDreams-BoldItalic.woff2') формат ('woff2'), 
  url ('fonts / CaviarDreams-BoldItalic.woff') формат ('woff'), 
  url ('fonts / CaviarDreams-BoldItalic.ttf') формат ('truetype'), 
  url ('fonts / CaviarDreams- BoldItalic.svg # svgFontName ') формат (' svg '); 
  font-weight: 700; 
  стиль шрифта: курсив; 
 }

Как видите, этот код может довольно быстро стать длинным.

Для тех, кто использует препроцессор CSS, такой как Sass, создание собственного миксина для решения этой проблемы может быть вариантом.

Обратите внимание на приведенный выше пример CSS, что font-weight и font-style корректируются для каждого объявления @ font-face , чтобы соответствовать файлу шрифта, на который ссылается.

Например, файл шрифта CaviarDreams-BoldItalic имеет толщину шрифта , - 700 и стиль шрифта , - курсив.

Стандартно font-weight: regular совпадает с font-weight: 400 и font-weight: bold совпадает с font-weight: 700

Вы можете добавить начертание шрифта, например «Сверхлегкий» или «Черный».Для этого вам нужно будет изучить документацию по вашему шрифту, чтобы вы могли сопоставить файлы шрифтов с правильным номером font-weight .

`Шаг 4 (необязательно): Использование нескольких настраиваемых шрифтов`

Вы можете подумать… Что мне делать, если у меня более 1 настраиваемого шрифта?

Например, если я хочу добавить шрифт Caviar Dreams И , шрифт Gilroy в свой проект.

Для этого вам просто нужно добавить еще @ font-face decelerations:

  @ font-face {
  font-family: 'CaviarDreams'; 
 ... 
  font-weight: 400; 
  стиль шрифта: обычный; 
 } 
  @ font-face {
  font-family: 'CaviarDreams'; 
  ... 
  font-weight: 400; 
  стиль шрифта: курсив; 
 } 
  @ font-face {
  font-family: 'CaviarDreams'; 
  ... 
  font-weight: 700; 
  стиль шрифта: обычный; 
 } 
  @ font-face {
  font-family: 'CaviarDreams'; 
 ... 
  font-weight: 700; 
  стиль шрифта: курсив; 
 } 
  @ font-face {
  font-family: 'Gilroy'; 
  src: url ('шрифты / Gilroy.eot'); 
  src: url ('fonts / Gilroy.eot? #Iefix') формат ('embedded-opentype'), 
  url ('fonts / Gilroy.woff2') формат ('woff2'), 
  url (' fonts / Gilroy.woff ') формат (' woff '), 
  url (' fonts / Gilroy.ttf ') формат (' truetype '), 
  url (' fonts / Gilroy.svg # svgFontName ') формат (' svg '); 
  font-weight: 400; 
  стиль шрифта: обычный; 
 } 
  @ font-face {
  font-family: 'Gilroy'; 
  src: url ('fonts / Gilroy-Italic.eot'); 
  src: url ('fonts / Gilroy-Italic.eot? #Iefix') формат ('embedded-opentype'), 
  url ('fonts / Gilroy-Italic.woff2') формат ('woff2'), 
  url ('fonts / Gilroy-Italic.woff') формат ('woff'), 
  url ('fonts / Gilroy-Italic.ttf ') формат (' truetype '), 
  url (' fonts / Gilroy-Italic.svg # svgFontName ') формат (' svg '); 
  font-weight: 400; 
  стиль шрифта: курсив; 
 }

`Шаг 5. Не забывайте о font-display`

Небольшое замечание по производительности.

Совсем недавно для @ font-face был добавлен новый дескриптор под названием font-display .

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

Для работы с font-display необходимо добавить его в каждое из объявлений @ font-face :

  @ font-face {
  font-family: 'CaviarDreams'; 
  src: url ('шрифты / CaviarDreams.eot'); 
  src: url ('fonts / CaviarDreams.eot? #Iefix') формат ('embedded-opentype'), 
  url ('fonts / CaviarDreams.woff2') формат ('woff2'), 
  url (' fonts / CaviarDreams.woff ') формат (' woff '), 
  url (' fonts / CaviarDreams.ttf ') формат (' truetype '), 
  url (' fonts / CaviarDreams.svg # svgFontName ') формат (' svg '); 
  font-weight: 400; 
  стиль шрифта: обычный; 
  font-display: swap; 
 }

Значение, которое вы выбираете для font-display , конечно, зависит от вас.

Я обычно предпочитаю font-display: swap , так как это показывает вариант возврата шрифта при загрузке пользовательского шрифта.

Использование font-display: swap будет означать, что пользователю всегда будет отображаться шрифт (т.е.е. они никогда не увидят пустой экран, пока загружаются шрифты).

Взгляните на этот пример на веб-сайте BBC Sport, который использует font-display: swap :

(обратите внимание, как при загрузке страницы шрифт изначально использует резервный вариант Arial перед загрузкой своего пользовательского шрифта ReithSans )

Для более глубокого погружения в каждое из значений font-display , я бы рекомендовал проверить эту статью на сайте Google Developers.

`Шаг 6. Стилизация вашей типографики с помощью CSS`

Мы почти готовы!

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

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

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

Мне просто нужно добавить в свой проект следующий CSS:

  body {
  font-family: CaviarDreams, Helvetica; 
 }

Обратите внимание, что я добавил Helvetica в качестве резервного шрифта. Это будет использоваться, когда страница загружается медленно, поскольку я добавил font-display: swap на шаге 5 выше.

Вот и все!

Теперь в вашем проекте настроены пользовательские шрифты 💪.

`Получите эксклюзивные советы, стратегии и бесплатные услуги по CSS`

Узнайте, как написать более масштабируемый и модульный CSS с эксклюзивными идеями и статьями, которыми я делюсь только со своими подписчиками на рассылку новостей.

Я никогда не буду отправлять вам спам. Отпишитесь на в любое время .

Автор: Том Рэй, фронтенд-разработчик, который живет в Лондоне со своей невестой и котом Арнольдом.

© Scalable CSS 2020, построен с в Лондоне, Великобритания.

`веб-шрифтов: как заставить их работать в емейле`

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

Но доступность тоже имеет значение. Так что прекратите захватывать свое сообщение изображениями и начните использовать вместо этого живой текст с веб-безопасными шрифтами и веб-шрифтами. В конце концов, текст, который не зависит от изображений и может быть прочитан более широкой аудиторией, приносит отличные впечатления подписчикам.А для ваших лучших клиентов - электронная почта приносит 36 долларов на каждый вложенный доллар - это отлично подходит для вашей общей маркетинговой стратегии.

В этой записи блога я выделю:

`Веб-шрифты и веб-безопасные шрифты`

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

Когда ваша электронная почта закодирована, шрифт объявляется с помощью свойства CSS, называемого font-family.Это свойство font-family может иметь только одно имя шрифта или несколько имен шрифтов, часто называемых стеком шрифтов. Включение нескольких названий шрифтов гарантирует, что если один шрифт не работает, вы можете использовать резервный или резервный шрифт по вашему выбору. Не перечисляя несколько названий шрифтов, почтовый клиент может выбрать ваш резервный шрифт. Когда подписчики открывают вашу электронную почту, браузер считывает свойство font-family и выбирает шрифт для использования.

`Веб-безопасные шрифты`

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

Обратной стороной является то, что количество веб-безопасных шрифтов ограничено по сравнению с веб-шрифтами. И они используются довольно часто, поэтому у вас меньше шансов выделиться (если вы к этому стремитесь).

Очевидные веб-безопасные шрифты:

Arial
Helvetica
Вердана
Грузия
Times New Roman

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

Лучший ресурс, который я нашел для веб-безопасных шрифтов, - это CSS Fonts. Мне нравится, что они включают процент использования для ПК и Mac для каждого шрифта, поэтому вы примерно знаете, сколько из ваших подписчиков могут увидеть нужный шрифт, а сколько вместо этого увидят ваш запасной вариант.

`Веб-шрифты`

веб-шрифтов извлекаются с сервера - либо с сервера, который вы размещаете самостоятельно, либо с внешнего (например, Google или Adobe).Из-за этого разнообразие шрифтов, которые можно использовать, намного больше, и их можно использовать на любом компьютере ... при условии, что браузер или почтовый клиент может использовать шрифт. В некоторых случаях у вашего подписчика может уже быть Интернет шрифт загружен и установлен на их машину, поэтому эти шрифты будут работать даже в почтовых клиентах, которые не поддерживают веб-шрифты!

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

`Почему веб-шрифты?`

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

Сохранение важных копий в изображениях было стандартной практикой в дизайне электронной почты как способ сохранить бренд и проявить творческий подход. Но «скрытие» текста в изображениях ограничивает доступность электронной почты, поскольку программы чтения с экрана не могут прочитать текст на изображении.

Электронная почта с изображениями и без них при использовании веб-шрифта

Электронная почта с изображениями и без них при использовании текста в изображениях

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

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

`Могу ли я использовать веб-шрифты в электронной почте?`

Если вы еще не догадались, ответ - да! Но, как и во всем, что касается электронной почты, есть предостережения.

`Поддержка клиентов электронной почты`

Веб-шрифты

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

Почтовый клиент	Поддержка веб-шрифтов
Apple Mail	✓ Да
Outlook 2007-2016	✘ Нет
Outlook 2019	✘ Нет *
Outlook для Mac	✓ Да
Outlook Office 365	✘ Нет *
Приложение Gmail	✘ Нет *
iOS	✓ Да
Приложение Outlook	✘ Нет
Samsung Mail	✘ Нет *
AOL Mail	✘ Нет
Gmail	✘ Нет *
Office 365	✘ Нет
Outlook.com	✘ Нет
Yahoo! Почта	✘ Нет

* Дает нестабильные результаты в зависимости от метода встраивания электронной почты, который обсуждается позже.

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

Если большинство не согласны, это не будет стоить вашего времени и усилий, особенно если вы планируете использовать платный веб-шрифт.

Какие почтовые клиенты используют ваши подписчики?

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

Узнать больше →

`Лицензирование`

Шрифты

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

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

`Где найти веб-шрифты`

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

Некоторые шрифты читаются легче, чем другие.

Изящные или декоративные шрифты, такие как дисплейные или рукописные шрифты, могут затруднить людям с нарушениями зрения или дислексией различие между формами букв.Шрифты без засечек (шрифты без расширенных элементов или завитков букв, такие как Arial, Calibri, Century Gothic или Helvetica) и плоские шрифты (шрифты с более толстыми линиями, такие как Museo Slab и Rockwell) считаются более доступными.

Вот несколько хороших мест, чтобы начать поиск.

`Google шрифтов`

Доступно множество сервисов веб-шрифтов, но Google Fonts - наш фаворит. Услуга абсолютно бесплатна, и вы можете загрузить веб-шрифты на свой компьютер, если вы создаете макеты дизайна в Adobe Photoshop, Sketch или другом программном обеспечении для дизайна.

`Adobe Шрифты`

Typekit стал Adobe Fonts с октября 2018 года. Теперь они поддерживают как метод, так и метод @import для использования шрифтов в качестве веб-шрифтов (подробнее об этом далее). Услуга не является полностью бесплатной, но если у вас уже есть подписка на Creative Cloud, она включена в нее.

`Службы веб-шрифтов`

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

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

`Как встраивать веб-шрифты в электронные письма`

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

`1. Получите URL-адрес файла шрифта`

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

Если вы используете Google Fonts, найти URL-адрес немного сложно, но не так уж сложно.Узнайте, как на следующем шаге использовать метод встраивания @ font-face.

`2. Импортируйте веб-шрифт одним из трех способов.`

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

<ссылка>
@import
@ font-face

Так почему бы вам выбрать один метод вместо другого?

Метод @import откладывает загрузку импортируемого веб-шрифта до полной загрузки HTML-кода, в который он встроен.Это может привести к тому, что вашему веб-шрифту потребуется немного больше времени, чтобы отображаться в вашем электронном письме, в то время как остальная часть письма будет загружена. И наоборот, метод загружает ресурс прямо при чтении кода HTML-файла (сверху вниз), что может задержать загрузку вашего электронного письма, если ваш файл веб-шрифтов очень большой.

Еще одна вещь, о которой следует помнить при выборе метода, - это то, что поддерживает ваш ESP.

Вы можете создать красивый код, который будет работать в Litmus в течение всего дня, но если ваш ESP изменит ваш код, как мы знаем, большинство из них, то все ваши действия не будут иметь значения.Убедитесь, что ваш ESP не изменяет ваш код таким образом, чтобы шрифты перестали работать. В Litmus наш ESP не позволяет нам включать условные выражения MSO вокруг элементов стиля. Таким образом, методы и @import не будут работать для нас, поскольку они плохо поддерживаются в Outlook, о чем мы поговорим ниже.

`Использование`

Использование метода - относительно простой метод встраивания шрифтов в вашу электронную почту. Поместите эту строку кода в вашего электронного письма вверху:

`Начните работу с Font Awesome`

Настройка Font Awesome может быть такой же простой, как добавление двух строк кода на ваш сайт, или вы можете быть профессионалом и настройте МЕНЬШЕЕ самостоятельно! Font Awesome прекрасно работает даже с Bootstrap!

Добавьте на свой сайт Font Awesome + Bootstrap с помощью двух строк кода.Вам даже не нужно ничего скачивать или устанавливать!

Вставьте следующий код в раздел HTML-кода вашего сайта. Хотите использовать Font Awesome без Bootstrap? Только не включайте первую строку.
Похвалите себя за свои масштабируемые векторные иконки на веб-сайте решение дзюдо в двух строчках кода.
Ознакомьтесь с примерами, чтобы начать использовать Font Awesome!

Используйте этот метод, чтобы получить CSS Font Awesome по умолчанию с CSS Bootstrap по умолчанию.

Скопируйте каталог font-awesome в свой проект.
В вашего html укажите местоположение вашего font-awesome.мин. css.
Ознакомьтесь с примерами, чтобы начать использовать Font Awesome!

Используйте этот метод для настройки Font Awesome и Bootstrap 2.3.2 с помощью LESS.

Скопируйте каталог font-awesome в свой проект.
Откройте файл bootstrap / bootstrap вашего проекта.меньше и заменить с участием @import "путь / к / font-awesome / less / font-awesome.less";
Откройте файл font-awesome / variables.less своего проекта и отредактируйте переменную @FontAwesomePath , чтобы она указывала на каталог шрифтов. @FontAwesomePath: "../font"; Путь к шрифту является относительным от вашего скомпилированного каталога CSS.
Перекомпилируйте LESS, если используете статический компилятор. В противном случае все будет в порядке.
Ознакомьтесь с примерами, чтобы начать использовать Font Awesome!

Font Awesome работает без Bootstrap.

Скопируйте каталог font-awesome в свой проект.
Следуйте приведенным выше инструкциям и пропустите части Bootstrap.
Откройте файл font-awesome.less или font-awesome.min.css своего проекта и отредактируйте расположение шрифта, чтобы он указывал на каталог шрифтов (см. Примеры выше).
Ознакомьтесь с примерами, чтобы начать использовать Font Awesome!

Font Awesome поддерживает IE7.Если вам это нужно, примите мои соболезнования.

Get Font Awesome корректно работает в современном браузере.
Скопируйте font-awesome-ie7.min.css в свой проект.
В вашего html укажите местоположение вашего font-awesome-ie7.min.css.
Жалуйтесь тому, кто решил, что вашему проекту нужна поддержка IE7.

`Как использовать пользовательские шрифты Google в HTML5`

В этой статье мы узнаем, как использовать пользовательских шрифтов Google на вашем веб-сайте с HTML5 .

Эта статья основана на видео, записанном Gustavo Gallas с Copahost. Рекомендуем посмотреть.

Итак, темы этой статьи:

`Как использовать пользовательские шрифты Google на нашем веб-сайте HTML5`

Чтобы найти нужный шрифт, вы должны получить доступ к Google Fonts .Вы можете найти шрифты Google на сайте fonts.google.com. Есть много вариантов шрифтов, которые вы можете выбрать для использования на своем веб-сайте HTML5.

В этой статье мы будем использовать шрифт Pacifico . Густаво Галлас использует пример веб-сайта как изображение ниже, изначально без специального набора шрифтов:

Теперь вы должны выбрать шрифт, а затем вам нужно будет связать этот шрифт в заголовке вашего веб-сайта. Для этого мы будем использовать тег ссылки « ».

Помните: эта ссылка должна быть размещена в заголовке вашего HTML-файла.

Выбираем шрифт Pacifico. Чтобы найти его, давайте просто напишем название шрифта Pacifico в окне поиска Google Fonts. Как на изображении ниже:

Теперь мы должны скопировать эту ссылку из шрифтов Google и вставить в нашу главную ссылку.

После этого внутри атрибута href мы должны добавить имя источника справа от параметра « Family ».Это имя должно быть точно таким же, как в Google Fonts. Копия нашего тега ссылки должна быть такой:

`Установка семейства шрифтов с помощью CSS`

Итак, теперь мы только что связали шрифт с нашим HTML-сайтом.

Но мы еще ничего не установили. Для этого мы должны внести изменения с помощью таблицы стилей CSS. Этим мы сообщаем нашему браузеру, что хотим использовать этот шрифт на нашей веб-странице. Для этого вы должны использовать тег стиля «

».

Итак, это небольшая таблица стилей, которую мы будем использовать для установки шрифта в тело HTML. Тело означает тело HTML-файла.

Чтобы установить это, мы будем использовать атрибут семейства шрифтов со значением Pacifico, которое является шрифтом, который мы только что связали из Google.

 <стиль>
    тело {
        семейство шрифтов: Pacifico;
    }

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

`Установка семейства шрифтов для различных элементов HTML`

В примере веб-страницы у нас простая структура. У нас есть только тег заголовка , тег h2 , а затем тег абзаца .

Устанавливаем семейство шрифтов для всего тела сайта. Но, допустим, вы хотите применить этот шрифт только к тегу заголовка, а не к абзацу. В этом случае вы должны выбрать стиль и разместить h2, что эквивалентно используемому тегу заголовка.Таким образом, помещая в h2 вместо body, мы говорим браузеру применить этот шрифт только к тегу h2. Код должен быть похож на код ниже:

 <стиль>
    h2 {
        семейство шрифтов: Pacifico;
    }

Теперь у нас есть абзац со стандартным шрифтом и тег заголовка h2 с новым шрифтом. Тогда это должно выглядеть так:

Например, если вы хотите наоборот, чтобы применить только шрифт к абзацу, а не к заголовку, он поместит P вместо h2.

 <стиль>
    п{
        семейство шрифтов: Pacifico;
    }

Поскольку у нас есть текст с тегом P, он будет применяться только к этому абзацу. Ну это все.

`Как использовать другие шрифты из Custom Google Fonts`

Итак, если вы хотите использовать шрифт, отличный от Custom Google Fonts, вам следует изменить только имя шрифта в параметре «family».

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

Затем мы вернемся в Google и выберем другой шрифт. В этом примере мы выбрали шрифт Amatic SC .

Наконец, нам просто нужно поместить Amatic SC, имя шрифта, в параметр семейства. Как код ниже:

Теперь мы настроили для P, для абзаца, шрифт Pacifico, который был связан ранее.Теперь мы собираемся разместить для h2 другой шрифт под названием Amatic SC.

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

 <стиль>
    п{
        семейство шрифтов: Pacifico;
    }
    h2 {
        семейство шрифтов: 'Amatic SC';
    }

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

Итак, у нас есть для P для абзаца шрифт Pacifico из Custom Google Fonts, а для h2, тег заголовка, у нас есть шрифт Amatic SC, также из Custom Google Fonts. Итак, теперь у нас другой шрифт в заголовке и другой шрифт в абзаце.

`Как изменить размер шрифта`

Вы также можете, например, изменить размер шрифта. Вы можете просто добавить атрибут font-size в таблицу стилей. Давайте попробуем изменить размер шрифта P на 8 пикселей.

 <стиль>
    п{
        семейство шрифтов: Pacifico;
        размер шрифта: 8 пикселей;
    }
    h2 {
        семейство шрифтов: 'Amatic SC';
    }

Итак, теперь размер шрифта абзаца будет таким маленьким.

Для заголовка сделаем размер побольше. 50 пикселей так.

 <стиль>
    п{
        семейство шрифтов: Pacifico;
        размер шрифта: 8 пикселей;
    }
    h2 {
        семейство шрифтов: 'Amatic SC';
        размер шрифта: 50 пикселей;
    }

Теперь он больше, чем раньше.

Итак, вот как использовать шрифты Google на вашем сайте. Это очень легко. Если у вас есть какие-либо вопросы, вы можете просто прокомментировать в этой статье.

`Руководство по Google Font API`

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

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

`Введите API шрифтов Google`

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

Google Font API - это новый элемент в нише Font-as-Service, в которую входят TypeKit, Typotheque и другие.

Итак, давайте немного углубимся и обсудим Google Font API.

`Что такое Google Font API?`

Хорошо, вы много путешествуете по Интернету, но видели ли вы много нестандартных шрифтов, используемых на веб-сайтах или в блогах?

Давайте определим нестандартные шрифты как означающие что угодно, кроме веб-безопасных шрифтов, таких как Arial, Helvetica, Verdana, Georgia и Times New Roman.

Вне сайтов и блогов, ориентированных на дизайн (например, в основной сети), вероятно, немного.

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

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

`Преимущества использования Google Font API`

Если вы решите использовать Google Font API, вот некоторые из преимуществ, которыми вы сможете воспользоваться:

`Продолжайте использовать текст HTML`

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

Кроме того, это ненавязчивое решение, означающее, что вам не нужно изменять какой-либо существующий контент - вы просто обновляете свои таблицы стилей CSS.

`Доступно в Интернете`

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

`Высокая работоспособность инфраструктуры и сокращение обязанностей вашего веб-сервера`

Offloahttps: //www.webfx.com/blog/web-design/website-features-that-you-can-easily-offload/ Добавив ваш @ font-face в надежную инфраструктуру Google, вы можете быть уверены о том, что обслуживание файлов шрифтов будет быстрым, и что вы снимаете нагрузку с вашего собственного сервера.

`Как использовать Google Font API`

Вам не нужно быть заядлым веб-разработчиком, чтобы использовать Google Font API. Чтобы использовать Google Font API, все, что вам нужно сделать, это добавить один элемент таблицы стилей link на свои веб-страницы, а затем вы можете начать использовать этот шрифт в своем CSS.

Вот обобщенный процесс использования Google Font API:

`Шаг 1. Добавьте ссылку на таблицу стилей с предпочитаемым шрифтом`

Найдите в коллекции шрифтов Google, какие шрифты можно использовать.Основной формат для включения определенного шрифта на ваш собственный веб-сайт:

">

`Шаг 2. Используйте шрифт для стилизации HTML-элементов`

В приведенном ниже примере вы назначаете своим элементам

шрифт с именем Font Name , используя атрибут CSS font-family .

 h2 {
семейство шрифтов: «Название шрифта», с засечками;
}

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

  Шесть редакций прекрасны

`Шаг 3. Всегда имейте запасной план`

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

`Пример использования Google Font API`

Вот пример. Скопируйте и вставьте следующий блок кода в документ HTML, сохраните его, а затем откройте в своем веб-браузере.

Я предлагаю протестировать ваш HTML-документ в различных браузерах, чтобы вы могли увидеть различия между браузерами (или их отсутствие).

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

 

 href = "http: // fonts.googleapis.com/css?family=Lobster ">
  <стиль>
  h2 {
    семейство шрифтов: «Лобстер», с засечками;
    размер шрифта: 48 пикселей;
  }
 


   Шесть редакций - это прекрасно!

`Результат:`

Скриншот вышеуказанного блока кода через Google Chrome 4.1

Сгенерированный текст («Шесть редакций прекрасны!») Является обычным текстом HTML, поэтому вы можете добавить больше стилей в свой элемент стиля, если хотите (в нашем примере мы используем только один элемент: h2 ).

`Запрос нескольких шрифтов с помощью Google Font API`

Допустим, вам нужно три шрифта из каталога шрифтов Google. Не создавайте несколько запросов . Множественные запросы увеличивают количество HTTP-запросов, которые делает веб-страница. Чем меньше HTTP-запросов вы сделаете, тем лучше будет время отклика веб-страницы.

Вместо нескольких тегов link таблицы стилей используйте следующий формат для свойства href тега link таблицы стилей.

В следующем примере URL-запроса загружаются все три шрифта (Vollkorn, Yanone и Droid Sans) за один запрос.

  Фоллкорн  |  Yanone  |  Дроид + Санс

Теперь вы можете использовать любой из этих трех шрифтов в своих элементах стиля.

`Заметки`

Отделяйте имена шрифтов символом | без пробелов между ними. Обратите внимание на использование + в шрифте Droid Sans. Используйте знаки + в именах шрифтов с пробелами.В нашем случае название шрифта - Droid Sans, поэтому в ссылке запроса мы использовали Droid + Sans .

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

`Вес и стиль шрифта для шрифтов Google Font API`

У веб-шрифтов также есть вариации веса / стиля шрифта. Чтобы использовать эти варианты, добавьте двоеточие (: ) к имени шрифта, а затем стили и веса.

В приведенном ниже примере мы запрашиваем вариант Vollkorn жирным шрифтом и курсивом, а Inconsolata - вариант курсивом.

 http://fonts.googleapis.com/css?family=Vollkorn:  полужирный ,  полужирный  | Inconsolata:  курсив  | Droid + Sans

Есть также шорткоды для вариаций каждого шрифта. Их:

Полужирный шрифт: b
Курсив: i
Полужирный курсив: bi

Вот пример использования шорткодов:

 http: // шрифты.googleapis.com/css?family=Vollkorn:  b ,  bi  | Inconsolata:  i  | Droid + Sans

`Заметки`

Используйте двоеточие (: ) после названия шрифта без пробелов между ними, за которым следует название варианта (например, полужирным шрифтом ) или короткий код названия варианта (например, bi ). Если вам нужно несколько вариантов шрифта для одного шрифта, разделите их запятыми (, ) без пробелов между ними.

`Google Font API обеспечивает более красивую веб-типографику`

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

`Связанное содержимое`

`Использование шрифтов Adobe на целевой странице - Документация`

`Примечание:`

Вы новичок или у вас очень мало опыта работы с таблицами стилей? Вы можете легко получить доступ к библиотеке из сотен шрифтов Google прямо из Unbounce Builder без использования специального кода! Ознакомьтесь с нашей документацией по Google Fonts для получения дополнительной информации.У

Adobe есть отличные инструкции по выбору пользовательских шрифтов для использования на вашем личном веб-сайте в их собственной документации.

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

Что вам понадобится:

Учетная запись Adobe Creative Cloud.
пользовательских шрифтов, которые вы уже выбрали в разделе «Мои шрифты Adobe».
Аккаунт Unbounce с целевой страницей, на которой вы хотите применить новые шрифты.

Для добавления шрифтов Adobe на вашу целевую страницу нужно выполнить два отдельных шага:

Шаг 1. Добавьте ссылку CSS таблицы стилей шрифтов на вашу целевую страницу
Шаг 2. Добавьте пользовательский CSS шрифтов на вашу целевую страницу Применение настраиваемого шрифта к заголовкам Применение настраиваемого шрифта к кнопке Применение пользовательского шрифта ко всей странице

`Шаг 1. Добавьте ссылку CSS таблицы стилей шрифтов на вашу целевую страницу`

После того, как вы выполнили инструкции по выбору шрифтов для использования и настройке веб-проектов на веб-сайте Adobe, следующие шаги подробно описывают, как добавить JavaScript для вашего конкретного веб-проекта на целевую страницу:

Перейдите на сайт Adobe Fonts и щелкните ссылку My Adobe Fonts в правом верхнем углу страницы.Появится новый экран.
Щелкните ссылку Web Projects в левой части страницы. Появится новый экран.
Выберите веб-проект, который вы хотите использовать для своей целевой страницы, и скопируйте сценарий, представленный на панели «Встроить проект ». Не закрывайте это окно браузера, оно понадобится вам позже, на шаге 2!
В новом окне браузера перейдите к обзорному экрану целевой страницы, на которую вы хотите добавить собственный шрифт Adobe Fonts.Нажмите кнопку Изменить рядом с вариантом, который вы хотите изменить, чтобы войти в Unbounce Builder.
Нажмите кнопку "Таблицы стилей" в нижнем левом углу страницы. Появится новое диалоговое окно.
Введите Adobe Fonts в имя сценария . Вставьте код, который вы скопировали с веб-сайта Adobe, в пустое поле, затем нажмите кнопку Сохранить код в правом нижнем углу диалогового окна.

Компонент ссылки на таблицу стилей вашего шрифта Adobe установлен, поэтому мы можем продолжить и перейти к настройке таблиц стилей, чтобы ваш собственный шрифт отображался на целевой странице.

`Примечание:`

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

`Шаг 2. Добавьте собственный CSS Adobe Fonts на вашу целевую страницу`

Нажмите кнопку Stylesheets в нижнем левом углу Unbounce Builder. Появится новое диалоговое окно.

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

`Применение настраиваемого шрифта к заголовкам`

В диалоговом окне « Управление таблицами стилей » введите Заголовки, настраиваемый шрифт в поле «Имя таблицы стилей ».
Скопируйте указанный ниже пользовательский код в пустое поле: Примечание: Копирование кода без изменений приведет к повреждению кода. Перед сохранением таблицы стилей выполните изменения, перечисленные в шагах 3-7, чтобы внести поправки в код.
Вернитесь в окно браузера, в котором открыта страница «Мои шрифты Adobe», или перейдите на страницу веб-проекта для выбранного шрифта Adobe.
Щелкните ссылку Edit Project в правой части панели.
Нажмите кнопку Копировать CSS рядом с конкретным шрифтом, который вы хотите использовать для своего сайта.
Вернитесь к Конструктору Unbounce. Отредактируйте код, который вы добавили в пустое поле, заменив слова / * typekit CSS здесь * / кодом, который вы скопировали с веб-сайта Adobe Fonts.
Перед точкой с запятой для font-weight, font-family и font-style добавьте следующее: ! Important
После завершения ваш код должен выглядеть так:
Нажмите кнопку Сохранить код в правом нижнем углу диалогового окна.
Сохранить и Публикация / повторная публикация вашей страницы.

Готовых результатов:

`Примените пользовательский шрифт к кнопке`

В диалоговом окне « Управление таблицами стилей » введите Пользовательский шрифт кнопки в поле «Имя таблицы стилей ».
Скопируйте указанный ниже пользовательский код в пустое поле: Примечание: Копирование кода без изменений приведет к повреждению кода.Перед сохранением таблицы стилей выполните изменения, перечисленные в шагах 3-7, чтобы внести поправки в код.
Вернитесь в окно браузера, в котором открыта страница «Мои шрифты Adobe», или перейдите на страницу веб-проекта для выбранного шрифта Adobe.
Щелкните ссылку Edit Project в правой части панели.
Нажмите кнопку Копировать CSS рядом с конкретным шрифтом, который вы хотите использовать для своего сайта.
Вернитесь к Конструктору Unbounce.Отредактируйте код, который вы добавили в пустое поле, заменив слова / * typekit CSS здесь * / кодом, который вы скопировали с веб-сайта Adobe Fonts.
Перед точкой с запятой для font-weight, font-family и font-style добавьте следующее: ! Important
После завершения ваш код должен выглядеть так:
Нажмите кнопку Сохранить код в правом нижнем углу диалогового окна.
Сохранить и Публикация / повторная публикация вашей страницы.

Готовых результатов:

`Применение пользовательского шрифта ко всей странице`

В диалоговом окне « Управление таблицами стилей » введите Пользовательский шрифт в поле «Имя таблицы стилей ».
Скопируйте указанный ниже пользовательский код в пустое поле: Примечание: Копирование кода без изменений приведет к повреждению кода. Перед сохранением таблицы стилей выполните изменения, перечисленные в шагах 3-7, чтобы внести поправки в код.
Вернитесь в окно браузера, в котором открыта страница «Мои шрифты Adobe», или перейдите на страницу веб-проекта для выбранного шрифта Adobe.
Щелкните ссылку Edit Project в правой части панели.
Нажмите кнопку Копировать CSS рядом с конкретным шрифтом, который вы хотите использовать для своего сайта.
Вернитесь к Конструктору Unbounce. Отредактируйте код, который вы добавили в пустое поле, заменив слова / * typekit CSS здесь * / кодом, который вы скопировали с веб-сайта Adobe Fonts.
Перед точкой с запятой для font-weight, font-family и font-style добавьте следующее: ! Important
После завершения ваш код должен выглядеть так:
Нажмите кнопку Сохранить код в правом нижнем углу диалогового окна.
Сохранить и Публикация / повторная публикация вашей страницы.

Готовых результатов:

.

Подключить шрифт html: Свой шрифт на странице | htmlbook.ru

Веб-шрифты — Изучение веб-разработки | MDN

Поиск шрифтов

Генерация требуемого кода

Реализация кода в вашем демо

Как подключить шрифт к сайту при помощи @font-face в CSS. Блог на facefont

Пошаговая установка

Что если я уже скачал шрифт в другом месте, и хочу его подключить?

Синтаксис @font-face

Подключение шрифта к сайту с помощью Google Fonts

Как подключить шрифт Awesome у себя на сайте — Технический блокнот

Как установить шрифт Awesome на сайт

Альтернативный способ подключения шрифтов Awesome

Как использовать шрифты awesome на сайте

Пример использования шрифтов Awesome

Где посмотреть иконки Awesome для сайта

Какую версию шрифтов Awesome лучше использовать на сайте

P.S.

Благодарности

Основы CSS — Основы современной вёрстки

Стили CSS

Подключение CSS

Использование отдельного CSS-файла.

Использование тега style

Inline-стили

Селекторы

Вложенность селекторов

Дополнительное задание

Остались вопросы? Задайте их в разделе «Обсуждение»

Нашли опечатку или неточность?

Что-то не получается или материал кажется сложным?

Об обучении на Хекслете

Как подключить собственный шрифт к форме

Читайте также:

Иконочный шрифт Font Awesome

Преимущества и недостатки иконочных шрифтов

Как подключить шрифт Font Awesome

Как использовать иконки Font Awesome на сайте

«Безопасные» шрифты и их применение в веб-дизайне

Список безопасных шрифтов

Шрифты – иконки

Web инструменты для работы со шрифтами

Подбор шрифтов

Распознавание шрифтов

Скачать шрифты

Прочее

веб-шрифтов — Изучите веб-разработку

Поиск шрифтов

Создание необходимого кода

Реализация кода в вашей демонстрации

Как настроить пользовательские шрифты с помощью CSS и @ font-face

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

Шаг 2: Добавьте файлы шрифтов в свой проект

Шаг 3. Используйте @ font-face в CSS для использования файлов шрифтов

Шаг 4 (необязательно): Использование нескольких настраиваемых шрифтов

Шаг 5. Не забывайте о font-display

Шаг 6. Стилизация вашей типографики с помощью CSS

Получите эксклюзивные советы, стратегии и бесплатные услуги по CSS

веб-шрифтов: как заставить их работать в емейле

Веб-шрифты и веб-безопасные шрифты

Веб-безопасные шрифты

Веб-шрифты

Почему веб-шрифты?

Могу ли я использовать веб-шрифты в электронной почте?

Поддержка клиентов электронной почты

Лицензирование

Где найти веб-шрифты

Google шрифтов

Adobe Шрифты

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

Как встраивать веб-шрифты в электронные письма

1. Получите URL-адрес файла шрифта

2. Импортируйте веб-шрифт одним из трех способов.

Использование

Начните работу с Font Awesome

Как использовать пользовательские шрифты Google в HTML5

Как использовать пользовательские шрифты Google на нашем веб-сайте HTML5

Установка семейства шрифтов с помощью CSS

Установка семейства шрифтов для различных элементов HTML

Как использовать другие шрифты из Custom Google Fonts

`Как настроить пользовательские шрифты с помощью CSS и @ font-face`

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

`Шаг 2: Добавьте файлы шрифтов в свой проект`

`Шаг 3. Используйте @ font-face в CSS для использования файлов шрифтов`

`Шаг 4 (необязательно): Использование нескольких настраиваемых шрифтов`

`Шаг 5. Не забывайте о font-display`

`Шаг 6. Стилизация вашей типографики с помощью CSS`

`Получите эксклюзивные советы, стратегии и бесплатные услуги по CSS`

`веб-шрифтов: как заставить их работать в емейле`

`Веб-шрифты и веб-безопасные шрифты`

`Веб-безопасные шрифты`

`Веб-шрифты`

`Почему веб-шрифты?`

`Могу ли я использовать веб-шрифты в электронной почте?`

`Поддержка клиентов электронной почты`

`Лицензирование`

`Где найти веб-шрифты`

`Google шрифтов`

`Adobe Шрифты`

`Службы веб-шрифтов`

`Как встраивать веб-шрифты в электронные письма`

`1. Получите URL-адрес файла шрифта`

`2. Импортируйте веб-шрифт одним из трех способов.`

`Использование`

`Начните работу с Font Awesome`

`Как использовать пользовательские шрифты Google в HTML5`

`Как использовать пользовательские шрифты Google на нашем веб-сайте HTML5`

`Установка семейства шрифтов с помощью CSS`

`Установка семейства шрифтов для различных элементов HTML`

`Как использовать другие шрифты из Custom Google Fonts`

`Как изменить размер шрифта`

`Руководство по Google Font API`

`Введите API шрифтов Google`

`Что такое Google Font API?`

`Преимущества использования Google Font API`

`Продолжайте использовать текст HTML`

`Доступно в Интернете`

`Высокая работоспособность инфраструктуры и сокращение обязанностей вашего веб-сервера`

`Как использовать Google Font API`

`Шаг 1. Добавьте ссылку на таблицу стилей с предпочитаемым шрифтом`

`Шаг 2. Используйте шрифт для стилизации HTML-элементов`

`Шаг 3. Всегда имейте запасной план`

`Пример использования Google Font API`

`Результат:`

`Запрос нескольких шрифтов с помощью Google Font API`

`Заметки`

`Вес и стиль шрифта для шрифтов Google Font API`

`Заметки`

`Google Font API обеспечивает более красивую веб-типографику`

`Связанное содержимое`

`Использование шрифтов Adobe на целевой странице - Документация`

`Примечание:`

`Шаг 1. Добавьте ссылку CSS таблицы стилей шрифтов на вашу целевую страницу`

`Примечание:`

`Шаг 2. Добавьте собственный CSS Adobe Fonts на вашу целевую страницу`

`Применение настраиваемого шрифта к заголовкам`

`Примените пользовательский шрифт к кнопке`

`Применение пользовательского шрифта ко всей странице`

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