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

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

В первой статье модуля, мы изучали основные функции 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;
}

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

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

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

Обратите внимание: Веб-шрифты как технология поддерживается в 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» в колонке справа, вы можете кликать по различным тегам и классификациям чтобы отфильтровать отображаемые варианты для выбора.

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

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

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

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

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

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

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

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

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

font-family: 'zantrokeregular', serif;

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

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

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

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

CSS правила

Определение и применение

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

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

Поддержка браузерами

• TTF/OTF (True Type и Open Type Fonts) — эти шрифты имеют широкую поддержку. Разработаны Microsoft совместно с Adobe, с целью применения в различных операционных системах.
• WOFF (Web Open Font Format) — сжатая версия шрифтов TTF/OTF. Формат включает в себя метаданные, в которые автор шрифта может добавить информацию об использовании шрифта. WOFF-формат имеет широкую поддержку со стороны браузеров.
• WOFF2 (Web Open Font Format 2) — спецификация была разработана, чтобы обеспечить улучшенное сжатие и тем самым снизить использование пропускной способности сети, в то же время, позволяя быстро производить декомпрессию даже на мобильных устройствах.
• SVG (Scalable Vector Graphic) – способ создания векторной графики. SVG-формат имеет очень ограниченную поддержку (IOS/Safari). Планируется, что он перестанет использоваться в Chrome.
• EOT (Embedded Open Type) – шрифты, которые поддерживаются только в Internet Explorer/Edge (разработаны компанией Microsoft для использования в качестве встроенных шрифтов на веб-страницах).

CSS синтаксис:

@font-face{
font-properties: font-properties value;
}

@font-face{
font-family: name; /* Обязательное значение */
src: URL; /* Обязательное значение */
font-stretch: normal | condensed | ultra-condensed | extra-condensed | semi-condensed | expanded | semi-expanded | extra-expanded | ultra-expanded;
font-style: normal | italic | oblique;
font-weight: normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
unicode-range: unicode-range;
}

Значения правила

Версия CSS

CSS3

Пример использования

Для добавления шрифта на страницу Вам необходимо:

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

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

1. Переходим на сайт службы Google Fonts.
2. Выбираем понравившийся нам шрифт, я остановился на шрифте без засечек Roboto, Вы можете найти его в поиске, либо выбрать любой другой:
3. После этого необходимо добавить его в коллекцию (у Вас должен быть создан аккаунт Google):
4. После добавления шрифта в коллекцию, для Вас будет доступна возможность скачать его:
5. Распакуйте архив со шрифтами в директорию, из которой они будут подключаться к Вашей веб-странице, либо страницам:

Как Вы можете заметить, в архиве содержится 12 различных шрифтов. Исходя из названий можно установить, что, например, Roboto-Italic предназначен для курсивного стиля шрифта, Roboto-Bold для жирного начертания шрифта, Roboto-BoldItalic для курсивного жирного начертания и так далее.

Еще раз обращаю Ваше внимание, что один файл шрифта содержит:

• одну плотность шрифта.
• один стиль для этого шрифта.

Т.е. если Вам необходимо получить полужирные и курсивные шрифты, то необходимо подгружать их отдельно (использовать правило CSS @font-face для данного типа шрифта)!
Конечно в том случае, если они существуют для понравившегося Вам варианта шрифта. Обязательно учтите эти моменты при работе с веб-шрифтами!

Приступим к подключению, загруженных нами шрифтов к нашему документу. Для заголовков второго уровня (элемент <h3>) и для жирного начертания (элемент <b>) мы будем использовать шрифт — Roboto-Bold. Для абзацев (элемент <p>) будем использовать шрифт Roboto-Regular, а для курсивного начертания — Roboto-Italic.

<!DOCTYPE html>
<html>
<head>
<title>Пример использования правила @font-face</title>
<style> 
@font-face {
font-family : "Roboto";  /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */
src : url("../../fonts/Roboto-Regular.ttf") format('ttf');  /* задаем путь к шрифту (url) и тип шрифта (format). Тип шрифта выступает подсказкой для браузера (в идеале ускоряет процесс обработки) */
font-style : normal;  /* указываем, что стиль шрифта обычный - это значение по умолчанию */
font-weight : normal;  /* определяет нормальное начертание символов - это значение по умолчанию */ 
}
@font-face {
font-family : "Roboto";  /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */
 /* для упрощения работы со шрифтами допускается использовать одинаковое имя, но при этом начертание или стиль шрифта должен отличаться.
 IE 8 и ниже не поддерживают такой подход и если Вы хотите поддерживать эти браузеры, то Вам необходимо называть каждый шрифт по разному и более детально стилизовать каждый селектор */
src : url("../../fonts/Roboto-Bold.ttf") format('truetype');  /* задаем путь к шрифту (url) и тип шрифта (format). Тип шрифта выступает подсказкой для браузера (в идеале ускоряет процесс обработки) */
font-style : normal;  /* указываем, что стиль шрифта обычный - это значение по умолчанию */
font-weight : bold;  /* определяет жирное начертание символов */ 
}
@font-face {
font-family : "Roboto";  /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */
src : url("../../fonts/Roboto-Italic.ttf") format('truetype');  /* задаем путь к шрифту (url) и тип шрифта (format). Тип шрифта выступает подсказкой для браузера (в идеале ускоряет процесс обработки) */
font-style : italic;  /* указываем, что стиль шрифта курсивный */
font-weight : normal;  /* определяет нормальное начертание символов - это значение по умолчанию */ 
}
h3, p, b, i {  /* задаем групповой селектор для элементов <h3>, <p>, <b>, <i> */
font-family : "Roboto", sans-serif;  /* устанавливаем шрифт Roboto, если он не будет загружен по какой-то причине, то указываем, чтобы браузер установил шрифт из семейства шрифтов без засечек (sans-serif)  */
}
</style>
</head>
<body>
	<h3>Немного о пандах</h4>
	<p><b>Большая панда</b> (<i>Ailuropoda melanoleuca</i>) — бамбуковый медведь, одно из редчайших вымирающих животных, занесённых в международную Красную книгу; единственный современный представитель рода <b>большие панды</b> (<i>Ailuropoda</i>).</p>
</body>
</html>

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

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

@font-face {
font-family : "Roboto";  /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */
src : 
local("font");  /* проверяется есть ли шрифт на локальном компьютере пользователя по имени, если нет то поиск осуществляется в других указанных источниках */
url("/fonts/font.woff2") format('woff2');  /* задаем путь к шрифту (url) и тип шрифта (format). */
url("/fonts/font.woff") format('woff');  /* задаем путь к шрифту (url) и тип шрифта (format). */
url("/fonts/font.ttf") format('truetype');  /* задаем путь к шрифту (url) и тип шрифта (format). */
}

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

Более подробно использование правила @font-face Вы можете изучить из учебника CSS в статье: «Работа со шрифтами в CSS».

CSS правила

как не надо • Не дублируйте стили текста

Не нужно задавать разным элементам одинаковые стили текста.

Почему? #

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

Как это увидеть? #

В браузере в инструментах разработчика:

Все перечёркнутые свойства были унаследованы, но затем перезаписаны точно такими же. Так делать не надо.

А как надо? #

Стили текста достаточно задать один раз в body, и они автоматом применятся ко всем элементам страницы.

• Плохо

  BODY {
    background: #FFF;
  }
  .page-main {
    font-family: Georgia, serif;
    font-size: 16px;
    line-height: 1.4;
    color: #333;
  }
  .news {
    font-family: Georgia, serif;
    font-size: 16px;
    line-height: 1.4;
  }
  .news-item {
    font-family: Georgia, serif;
    font-size: 16px;
    line-height: 1.4;
    color: #333;
  }
  .news-item__title {
    font-family: Georgia, serif;
    font-size: 20px;
    line-height: 1.4;
    color: #333;
  }
  .news-item__content {
    font-family: Georgia, serif;
    font-size: 16px;
    line-height: 1.4;
    color: #000;
  }

• Хорошо

  BODY {
    background: #FFF;
    font-family: Georgia, serif;
    font-size: 16px;
    line-height: 1.4;
    color: #333;
  }
  .news-item__title {
    font-size: 20px;
  }
  .news-item__content {
    color: #000;
  }

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

Как проверить, что всё работает как надо? Там же, в инструментах разработчика:

На скриншоте видно, что стили текста унаследовались из body, а цвет фона — нет (он показан бледным)

Ещё один способ:

Во вкладке Computed поищите конкретные свойства или посмотрите в Rendered Fonts — там показывается какой шрифт в итоге применился к тексту.Там же можно проверить применился ли ваш красивый кастомный шрифт. Не смотря на то, что кастомный MyFancyFont объявлен в списке первым, текст в итоге отрисовался запасным — Georgia. Значит надо проверить правильно ли подключен кастомный шрифт.

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

Подводные камни #

Стили текста для инпутов и кнопок задаются браузером:

Стили в body перечеркнуты, потому что перезаписаны стилями, который задаёт браузер — они отображаются на сером фоне, а в качестве источника указано user agent stylesheet.В Rendered Fonts что-то совсем не то, что нужно.

Это легко поправить, задав наследование явно:

input, textarea, select, button {
  font: inherit;
}

Если нужно наследовать только семейство шрифтов, вместо font: inherit; задайте font-family: inherit;

Проверяем в Computed: Georgia.Там же можно увидеть что чем перезаписалось.

Итого

• Не дублируйте стили текста, они наследуются.
• Браузер перезаписывает стили для инпутов и кнопок, пропишите явное наследование.

Как подключить шрифт к сайту? [CSS+ HTML инструкция для wordpress]

Приветствую вас, дорогие читатели! Сегодня статья, совершенно в мои планы не входила. Почему?, спросите Вы. Да все потому что я и не думал, что у меня случится проблема со шрифтами на сайте internetlift.ru и ответа на эту проблему я в интернете не найду. КАК ТАК? Вы знаете я даже топик на форуме завел searchengines.guru , но и там ответа я не получил. И тогда я понял, что есть проблема, которую нужно раскрыть подробно, дабы помочь большому количеству людей.

Кстати, я уже писал инструкцию,  как подбирать слова для ваших видео и статей, и Вы можете воспользоваться сервисом для рунета и узнать насколько актуальна проблема и раскрыть ее детально с видео обзором. Я не перестану твердить всем, что тема видео уроков очень актуальна, т.к. с каждым днем я, да и вы наверное, сталкиваетесь с какими-то сложностями и решение их ищите в сети, но когда вы не находите, вы задумываетесь, что я один такой….. А вот нет, просто на него не дали хороший ответ, так что, кто понял дерзайте. Делюсь с вами идеями. Самое главное – если пришла идея запишите ее на бумаге, дабы не забыть. (Сужу по себе). Лично я все заметки и задачи веду в сервисе bitrix24.ru Очень удобно, особенно для коллективной работы. Ну да ладно вернемся к теме статьи.

Структура статьи: Как подключить шрифт к сайту?

Где искать шрифты при верстке сайта

Как узнать стиль шрифта на сайте CSS / HTML

Как сделать жирный текст CSS / HTML

Как менять размер шрифта в CSS / HTML

Как увеличить/уменьшить шрифт в CSS / HTML

Как форматирование текст /ссылки на сайте в CSS

Как подключить на сайт шрифт google / гугл

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

Где искать шрифты при верстке сайта

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

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

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

Как узнать стиль шрифта на сайте CSS / HTML

В этом вопросе нам поможет приложение для хрома, оперы и яндекс браузера  от сервиса webfont.ru/extension (см. скрин ниже)  А что касается Мазилы я писал немного выше, он уже встроенный.

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

При создании своего блога, подключать шрифты при верстке и использовал внешний источник, на который ссылался мой сайт. Конечно я имел в своей CSS таблице исходники шрифтов, разных форматов .ttf .otf .woff .svg данного шрифта, которые ранее загружались на компьютер к пользователям, посещавший мой сайт. И работало все четко. Но конце ноября 2015 года, корректное отображение во всех браузерах пропала. Первая у меня мысль, что я нарушил авторство, ведь я не интересовался в самом начале чей этот шрифт и можно ли его использовать в своих целях. (А это очень важное условие) Но после того как я порылся в сети про авторство идея пропала сама собой – можно использовать. Начал искать дальше. И понял, что сейчас видимо левые сайты, которые не одобряются гуглом и рядом др. браузеров, попали под некий фильтр. И сегодня корректно отображается на любом сайте, в том числе и на WordPress, используя google шрифты. Как только я их подключил, все заработало как часы ))) *** Учтите мой опыт и совет***

Как сделать жирный текст CSS / HTML

Эта задача очень легкая, особенно на wordpress. Для начала нужно знать к чему мы конкретно будем делать жирный шрифт. Например к h2 h3 h4 или к <p> или к таблице <tr><td>. Определились? После этого, Вам нужно залезть в таблицу стилей .CSS (см. скрин) И чтобы шрифт отобразился жирным, ответственен селектор font-weight.  Нажимаем сочетание клавиш поиска CTRL+F и вводим запрос “font-weight” (Без кавычек)  Выше мы определились к чему мы будем менять, допустим h2 h3 (см. пример ниже) Значения могут быть normal (нормальное), bold (жирное), а также можно указывать диапазон значений от 100 до 900. Базовым значением является 400. Поэтому варианты ниже равнозначны.

h2, h3 {
font-weight:bold;
}

h2, h3 {
font-weight:400;
}

Т.е. Заменив старые данные на новые и сохранив, при этом вы получите изменения в шрифте на вашем сайте. Что касается Html – то добавьте в ваш текст в HTML редакторе тег <b></b> и будет вам жирный шрифт )))

Как менять размер шрифта в CSS / HTML

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

Тем самым мы и шрифт отредактируем и придадим жирность. Что касается поменять  шрифт в HTML, то так обычно не делают, а если уж надо, то просто добавьте в HTML редакторе код <font size=”25″><b>У тебя все получится! </b></font> Тем самым мы и шрифт отредактируем и придадим жирность.

Как увеличить/уменьшить шрифт в CSS / HTML

На этот вопрос я уже ответил выше, приводя пример, как менять шрифт на сайте. Но если у Вас не WordPress, а другой сайт одностраничник или с другой CMS системой, то вам тоже нужно найти файл, обычно style.css и в нем через поиск найти font-size и внести изменения.

body {
background: #EAE8E5 url(images/bg.png) repeat;
font-size: 14px; – вот тут уменьшить или увеличить, если хотите в теле сайта изменить размер
line-height: 1.5em;
color: #646464;
font-family: , “Georgia”, serif;
margin: 30px 0;

Как форматирование текст /ссылки на сайте в CSS

Как я говорил выше, можно в таблице стилей произвести любые корректировки размеров для h2-h6, а также для различных тегов, так вот я всегда выделяю жирным шрифтом текст на англ/ссылки/аббревиатуры и т.д. за это отвечает тег  <strong> . Заходим в нашу таблицу и там в поиске находим его и видим какой шрифт (font-size), какой цвет, кстати за цвет отвечает селектор color и т.д. См. на скрин

Как подключить на сайт шрифт google / гугл

Вот тут самое интересное, нужно ни где не ошибиться и следовать 3 шагам.

Шаг 1 Заходим на сайт Гугл Шрифтов и выбираем подходящий нам шрифт далее нажимаем, на стрелку вправо (см. на скрин)

Шаг 2 Затем вы увидите, вам будет предложен, простой стиль, курсив, жирный и т.д., а также наборы символов. Ниже вам будет предложен фрагмент кода, который вы будете добавлять в <HEAD> вашего сайта. Для этого примера я выбрал Amaranth

<head>

<link href=’https://fonts.googleapis.com/css?family=Amaranth:400,400italic,700,700italic’ rel=’stylesheet’ type=’text/css’>

</head>

Шаг 3 Google API будет генерировать необходимый код CSS для добавления в таблицу стилей. Просто добавьте сгенерированный код в файл CSS.

body {

    font-family: ‘Open Sans’, sans-serif;

}

НА этом по подключению все! А вы ожидали больше ))) Важно перед тем как выбрать шрифт проверьте – отображает ли он кириллицу. (В данном примере я не проверял)

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

Знак рубля для HTML

Студией Артема Лебедева создан шрифт со знаком рубля. 

Чтобы использовать его на локальном компьютере — устанвливаем шрифт. Шрифт есть в двух форматах — rouble.ttf («Трутайп») или rouble.otf («Оупентайп») 

В этом файле есть начертания символа для различных шрифтов:

1. 
   a — Arial Regular
2. 
   b — Arial Italic
3. 
   c — Arial Bold
4. 
   d — Arial Bold Italic
5. 
   e — Georgia Regular
6. 
   f — Georgia Italic
7. 
   g — Georgia Bold
8. 
   h -Georgia Bold Italic
9. 
   i — Tahoma Regular
10. 
    j- Tahoma Bold
11. 
    k — Times Regular
12. 
    l — Times Italic
13. 
    m — Times Bold
14. 
    n — Times Bold Italic
15. 
    o — Lucida Regular
16. 
    p — Verdana Regular
17. 
    q — Verdana Italic
18. 
    r — Verdana Bold
19. 
    s — Verdana Bold Italic

То есть, если мы напишем английскую букву шрифтом AlsRubl, то знак рубля будет соответствовать шрифту Arial Regular.

Выглядет это так:

Теперь воспользуемся сервисом Font Squirrel для генерации файлов шрифта для самых распространенных браузеров. См. как это делается. 

В данном случае со шрифтом rouble в генераторе шрифтов нужно использовать такие настройки:

• 
  Expert
• 
  Custom
• 
  Subsetting
• 
  Unicode Ranges:0061-0073

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

Что теперь с этим архивом делать… Можно, например, в папке шаблона Joomla создать папку fonts и загрузить туда 4 файла:

• 
  rouble-webfont.eot
• 
  rouble-webfont.woff
• 
  rouble-webfont.ttf’
• 
  rouble-webfont.svg

А в файл с css кодом добавить определение шрифта:

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

Теперь, чтобы в тексте html страницы отобразить знак рубля делаем так:

<span>a</span>

Вместо английской буквы a в тексте страницы мы увидим знак рубля для шрифта Arial.

Думаю, лучше будет определить класс для знака рубля:

.rubl{font-family:als_rublregular;}

и использовать в тэге span не атрибут style, а class:

<span>a</span>

CSS: Изменение шрифта

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

Разница между семействами шрифтов Sans-serif и Serif

PuzzleWeb.ru — шрифт sans-serif

PuzzleWeb.ru — шрифт serif

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

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

• sans-serif — шрифты без засечек, считается что они лучше читаются на экране компьютера, чем шрифты семейства serif.
• serif — семейство шрифтов с засечками. У многих людей они ассоциируются с газетными статьями. Засечки — декоративные штрихи и черточки по краям букв.
• monospace — семейство, состоящее из шрифтов, символы которых имеют одинаковую фиксированную ширину. Такие шрифты используются в основном для отображения примеров кода программы.
• cursive — шрифты, имитирующие рукописный текст.
• fantasy — художественные и декоративные шрифты. Они не очень широко распространены, доступны не на всех компьютерах и редко используются в веб-дизайне.

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

body {
  font-family: Verdana, Helvetica, Arial, sans-serif;
}

Рассмотрим, как браузер обрабатывает список шрифтов, заданный в нашем свойстве font-family:

1. Сначала он проверяет, установлен ли шрифт Verdana на компьютере, и, если да, использует его в качестве шрифта для текста внутри элемента (в нашем случае внутри элемента <body>)
2. Если Verdana не установлен, то ищет шрифт Helvetica. В случае успешного поиска использует его внутри <body>.
3. Если и Helvetica не установлен, то ищет шрифт Arial. Если он имеется на компьютере, то применяет его внутри <body>.
4. И наконец, если ни один из указанных шрифтов не найден, применяется первый, найденный браузером на компьютере шрифт из семейства sans-serif. Таким образом браузер сможет самостоятельно определить подходящий шрифт из семейства.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.exserif { font-family: "Times New Roman", Times, serif; }
      p.exsansserif { font-family: Arial, Helvetica, sans-serif; }
    </style>
  </head>

  <body>
    <h2>CSS свойство font-family</h2>
    <p>Абзац использующий шрифт Times New Roman.</p>
    <p>Абзац использующий шрифт Arial.</p>
  </body>
</html>

Попробовать »

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

С этой темой смотрят:

Свойства в CSS: шрифт | Шнайдер блог

2042 Посещений

Ранее мы уже разбирали общие вопросы по работе с текстом в CSS, настройку цвета и фона, стилизации цитат, а также текстовые эффекты с использованием тени. Теперь пришло время обратить внимание на еще один важнейший элемент 一 шрифт. Ключевые свойства:

• font-family 一 семейства используемого шрифта. Таких семейств может быть несколько (они прописываются через запятую в приоритетном порядке). Шрифты условно поделены на несколько групп:
• Serif 一 шрифты с засечками (к примеру, Times New Roman).
• Sans-serif 一 шрифты без засечек (Arial).
• Monospace 一 непропорциональный шрифт, все знаки которого имеют идентичную ширину (Courier New).
• Cursive 一 курсивные шрифты (Calisto MT).
• Fantasy 一 нестандартные шрифты (Torhok).

Например, если вы хотите сделать основным шрифтом Times New Roman, добавьте в таблицу стилей следующее:

Аналогично выставляются и другие шрифты:

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

• font-style 一 стиль шрифта:
• normal (обычный).
• oblique (наклонный).
• italic (курсивный).

Например:

Аналогично “включаются” и другие стили шрифта. Если же вы хотите использовать все три варианта в разных параграфах, поступите следующим образом: задайте каждому параграфу уникальный ID (например, n, o, i) → задайте шрифт для всего текста:

Задайте каждому параграфу свой стиль:

В браузере:

• font-variant 一 свойство отвечает за варианты написания букв: обычный (normal) и малые прописные буквы (small-caps). По умолчанию установлен первый вариант, поэтому рассмотрим. как установить small-caps. Например:

В браузере:

• font-weight 一 толщина букв. В этом случае актуальны как числа (100, 200, 300, 400, 500, 600, 700, 800, 900), так и ключевые слова:

1. normal (нормальный) 一 ему соответствует число 400.
2. bold (полужирный) 一 ему соответствует число 700.
3. bolder (жирнее).
4. lighter (менее жирный).

Например: 

В браузере:

• font-size 一 размер шрифта. Данное свойство задается одним из трех способов:

1. Ключевые слова (xx-small, x-small, small, medium, large, x-large, xx-large, smaller, large).
2. Относительные единицы (%, em).
3. Единицы измерения длины (px, см, мм, пункты).

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

• px 一 равен точке на экране.
• em 一 равен высоте используемого шрифта.
• ex 一 равен высоте строчной “х” используемого шрифта.

Не стоит забывать и о пяти абсолютных диницах измерения: mm (один миллиметр), sm (один сантиметр), in (один дюйм), pt (1/72 дюйма), pc (⅙ дюйма). В силу различных обстоятельств рекомендуется использовать три параметра:

• pt 一 когда речь идет о фиксированном дизайне веб-портала).
• % 一для “резинового” веб-портала.
• em 一 для того, чтобы менять размер пропорционально.

Например, зададим общий размер параграфов 一 12 px, первый параграф увеличим на 30%,а третий уменьшим на 20%:

В браузере:

20 лучших веб-шрифтов HTML для использования в 2021 году — Учебники Hostinger

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

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

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

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

Что такое безопасный для Интернета шрифт?

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

Наиболее популярные примеры веб-шрифтов: Arial , Times New Roman и Helvetica .

Каковы категории шрифтов HTML?

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

Курсив

Курсивный шрифт имитирует почерк, обычно буквы соединяются плавно и зацикленно.

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

Фэнтези

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

Например, эта категория шрифтов широко используется в фантастических фильмах, таких как «Звездные войны», «Гарри Поттер» и «Холодное сердце».

Serif

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

На веб-сайтах

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

Популярные шрифты Serif включают Times New Roman , Cambria и Garamond .

Без засечек

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

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

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

Моноширинный

Каждая буква и символ в шрифте Monospace имеют одинаковую ширину.

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

20 лучших HTML-шрифтов, безопасных для Интернета

Ниже приведены 20 вариантов шрифтов HTML, которые можно использовать в Интернете, которые вы можете применить к своему контенту.

1. Arial

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

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

Помимо этого, этот шрифт также популярен в печатных СМИ, таких как газеты и реклама.

В целом, если вы ищете классический шрифт, который подойдет для большинства веб-сайтов, Arial — отличный выбор.

2. Arial Narrow

Arial Narrow — один из 38 стилей семейства шрифтов Arial. По сравнению с оригинальным шрифтом, этот стиль предлагает гораздо более гладкий дизайн.

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

Отличные варианты сочетания шрифтов включают более жирные шрифты без засечек, такие как Verdana и Geneva .

3. Время

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

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

Первоначально Times в основном использовалась в печатных СМИ, таких как газеты, и с тех пор стала ассоциироваться с журналистикой и академической литературой.

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

Кроме того, этот шрифт подходит для веб-сайтов с длинными блоками текста, таких как редакции в Интернете и блоги.

4. Times New Roman

Times New Roman — это вариация шрифта Times из шрифта с засечками.

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

Благодаря своему профессиональному стилю, Times New Roman стала любимым выбором для формального контента в новостных публикациях и образовательных веб-сайтах.

5.Helvetica

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

Это популярный шрифт без засечек, используемый многими известными брендами. Например, Jeep, Microsoft, Motorola и BMW используют этот шрифт для своих логотипов.

Помимо этого, правительство США также использует Helvetica в своих налоговых формах.

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

6. Курьер

Courier — самый известный шрифт в классификации slab serif — все операционные системы поставляются с ним заранее.

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

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

7. Courier New

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

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

Courier New доступен в четырех стилях: обычный, курсив, полужирный и полужирный курсив.

8. Вердана

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

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

Если вам нужен шрифт HTML с хорошей читабельностью, этот шрифт — отличный выбор.

9. Чандара

Candara впервые была представлена ​​в массовом порядке в ОС Microsoft Vista для улучшения читаемости на ЖК-дисплеях.

Этот шрифт хорошо читается благодаря большому интервалу между символами, что делает его идеальным шрифтом для отображения.

Более того, Candara приобретает современный вид благодаря своим изгибам и открытым формам. Этот шрифт подходит для неформальных типографских настроек, таких как заголовки сообщений в блогах и слоганы на веб-сайтах.

10. Женева

Geneva предлагает чистый и современный вид благодаря неизменной длине, ширине и интервалам.

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

11. Калибри

Calibri — широко используемый и популярный шрифт. Это шрифт по умолчанию для различных известных программ, таких как пакет Microsoft Office и Google Docs.

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

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

Благодаря чистому дизайну этот шрифт подходит для всех типов веб-сайтов.

12. Оптима

Optima черпает вдохновение в классических латинских прописных буквах. Он используется для передачи элегантности с его щедрым интервалом и дополнительными штрихами.

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

Хотя все варианты интервала читабельны, установка более широкого интервала лучше дополнит этот шрифт.

Optima лучше всего подходит для демонстрации логотипов таких элитных брендов, как Estée Lauder и Marks and Spencer.

13. Камбрия

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

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

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

Этот шрифт бывает обычного, полужирного, курсивного и полужирного курсива.

14. Гарамонд

Garamond относится к классу шрифтов с засечками старого стиля.

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

Этот шрифт лучше всего подходит для добавления старинного, но вневременного нюанса на ваш сайт.

15. Perpetua

Perpetua — это строгий, классический и элегантный. Шрифт был создан английским скульптором, на которого оказали влияние памятники и мемориальные надписи.

Характеристики этого шрифта побудили Penguin Classics и Пенсильванский университет использовать Perpetua в своих публикациях.

В целом, образовательная или информационная страница может значительно выиграть от этого шрифта.

16. Монако

Monaco — это шрифт, используемый в приложениях MacOS X Terminal и Xcode.

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

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

17. Didot

Didot — это неоклассический шрифт, в нем классический дизайн с современной интерпретацией.

Уникальный дизайн шрифта можно найти на CBS News и The Late Show со Стивеном Колбертом.

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

18. Кисть для текста

Brush Script — современный шрифт, неформальный и непринужденный.

Он выполнен в стиле каллиграфии, основанном на технике рукописного ввода. Из-за этого Brush Script MT переводится в красивый, но читаемый дисплейный шрифт для вашего сайта.

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

19. Люцида Брайт

Lucida Bright классифицируется как плита с засечками. Это одна из версий шрифта Lucida с большей контрастностью.

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

Известный пользователь этого шрифта — журнал Scientific American.

20. Медь

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

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

Этот шрифт стал известен после того, как Who Wants To Be A Millionaire использовал шрифт в своей торговой марке.

Dishonorable Mention: Comic Sans

Comic Sans был основан на надписях из журналов комиксов и должен был быть дружелюбным и непринужденным.

Однако этот шрифт многие считают непрофессиональным и детским. Есть даже сообщество, которое поддерживает запрет Comic Sans как шрифта.

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

Почему следует использовать веб-шрифт HTML?

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

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

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

• Единый дизайн .Веб-шрифт HTML гарантирует, что выбранный вами шрифт будет правильно отображаться в любом браузере и на любом устройстве.
• Резервный шрифт . Если выбранный вами шрифт неправильно загружается в браузере пользователя, веб-шрифты HTML вернутся к шрифту по умолчанию, установленному на устройстве пользователя.
• Нет загрузки . Вы можете легко встроить HTML-шрифты из веб-безопасного поставщика шрифтов, такого как Google Fonts, в свой HTML-документ.

Как добавить шрифты HTML в WordPress?

Есть несколько способов добавить шрифты HTML в WordPress.В этом разделе мы рассмотрим два популярных метода:

Добавить шрифты HTML вручную

Добавление шрифтов вручную — отличный вариант, если вы не хотите использовать плагины или хотите добавить собственный шрифт на свой сайт WordPress.

Сначала выберите и загрузите пользовательский шрифт от поставщика веб-шрифтов, например Adobe Fonts, TypeNetwork или Fonts.

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

После загрузки файла загрузите его в каталог wp-content / themes / your-theme / fonts .

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

Популярный метод дальнейшего стилизации шрифта — использование встроенного CSS. Он добавляет стили к одному элементу HTML с атрибутом стиля CSS.

Вот пример того, как встроенный CSS может выглядеть как элемент HTML:

 
 Встроенный CSS в красном цвете 
 Это абзац желтого цвета.
 

Добавление HTML вручную может сбивать с толку новичков. Поэтому изучение основ CSS и HTML может быть полезным.

Добавление шрифтов HTML с помощью плагинов

Существует множество плагинов для добавления шрифтов HTML на ваш сайт WordPress. Однако мы сузили его до двух самых популярных вариантов.

Простые шрифты Google

Easy Google Fonts автоматически извлечет шрифты из каталога Google Fonts.Этот плагин также работает с любой темой WordPress.

Начните с установки и активации плагина. После этого перейдите к Appearance -> Customize на панели администратора WordPress.

Оттуда выберите Типографика -> Типографика по умолчанию , и вам будут представлены текстовые элементы, такие как заголовки и абзацы.

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

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

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

Использовать любой шрифт (UAF)

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

После установки плагина на панели администратора WordPress появится вкладка Use Any Font .Нажмите на нее и активируйте свой ключ API.

После завершения проверки добавьте файлы шрифтов .ttf , .otf и .woff и нажмите кнопку «Загрузить», чтобы позволить UAF преобразовать пользовательские шрифты в веб-шрифты.

Кроме того, UAF также совместим с Flatsome для настройки живых шрифтов на темах Flatsome.

Заключение

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

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

• Arial — классический шрифт, который можно использовать на всех типах сайтов.
• Times New Roman — отличный вариант для новостных и образовательных сайтов.
• Cambria — универсальный вариант, в котором используются обычные, полужирные, курсивные и полужирные варианты.
• Monaco — если у вас есть веб-сайт о кодировании или играх, это отличный шрифт для декоративных текстов.

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

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

Полный список безопасных для Интернета шрифтов HTML и CSS

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

В частности, он играет решающую роль в создании уникальной идентичности бренда. Вы, вероятно, заметите определенные «стандартные» шрифты, связанные с известными брендами, особенно в их логотипах. Например, у Facebook, Amazon, Disney и Microsoft есть разные шрифты, которые их отличают. Большинство из них изготавливаются на заказ и являются вариациями существующих шрифтов.

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

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

Что такое веб-шрифты?

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

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

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

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

Какие бывают типы веб-шрифтов?

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

• Шрифты с засечками содержат засечки, небольшие декоративные штрихи, которые выступают из основной части письма.Шрифты с засечками легче читать в физических печатных форматах, поскольку они ведут взгляд зрителя от символа к символу. Times New Roman — это шрифт с засечками.
• Шрифты без засечек не имеют засечек. Шрифты без засечек легче читать на экранах, поэтому они гораздо чаще встречаются при копировании веб-сайтов. Arial — это шрифт без засечек.
• Моноширинный относится к шрифтам с одинаковым интервалом между символами. Courier — это моноширинный шрифт.
• Cursive относится к шрифтам, напоминающим рукописный текст.Brush Script MT — это курсивный шрифт.
• Fantasy относится к стилизованным декоративным шрифтам. Luminari — это фантастический шрифт.
• MS означает Microsoft и указывает на то, что шрифт был создан Microsoft для цифровых устройств. Trebuchet MS является примером.

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

Но это просто неправда. Давайте обсудим, почему веб-шрифты по-прежнему важны.

Нужны ли еще веб-шрифты?

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

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

Представьте себе, например, рендеринг сайта HubSpot в Times New Roman — все потому, что мы не установили наш предпочтительный веб-шрифт на серверной части. Time New Roman абсолютно безопасен в Интернете — проблема в том, что он по умолчанию установлен браузером, поэтому наш веб-сайт в конечном итоге выглядит непоследовательным и, ну, немного небрендовым.

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

1. Ваш HTML-текст останется согласованным.

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

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

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

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

Это позволит вашему шрифту «плавно ухудшиться». Вместо того, чтобы переключаться с Playfair Display прямо на Times New Roman, шрифт может перейти с Playfair Display на Didot, гораздо более близкую альтернативу. Если Didot недоступен, шрифт можно изменить на Georgia и, наконец, на шрифт с засечками по умолчанию, используемый браузером.

3. У вас будет несколько резервных копий, если вы используете собственный шрифт.

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

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

Стеки шрифтов

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

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

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

  p {font-family: «Playfair Display», «Didot», «Times New Roman», Times, serif; }  

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

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

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

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

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

1. Arial (без засечек)
2. Arial Black (без засечек)
3. Verdana (без засечек)
4. Тахома (без засечек)
5. Требушет MS (без засечек)
6. Impact (без засечек)
7. Times New Roman (с засечками)
8. Didot (с засечками)
9. Грузия (с засечками)
10. Американская пишущая машинка (с засечками)
11. Andalé Mono (моноширинный)
12. Courier (моноширинный)
13. Консоль Lucida (моноширинный)
14. Монако (моноширинный)
15. Брэдли Хэнд (курсив)
16. Brush Script MT (курсив)
17. Luminari (фэнтези)
18. Comic Sans MS (курсив)

1.Arial (без засечек)

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

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

2. Черный Arial (без засечек)

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

3. Вердана (без засечек)

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

4. Тахома (без засечек)

Подобно Verdana, шрифт Tahoma отличается более жирным весом и более узким трекингом (т.е.е. меньше места между символами).

5. Требушет MS (без засечек)

Trebuchet MS — еще один безопасный для Интернета шрифт без засечек, разработанный корпорацией Microsoft в 1996 году. Он обычно используется для основного текста многих веб-сайтов и может быть надежной альтернативой шрифту без засечек на вашем сайте. Он также может выглядеть не таким «базовым», как Arial.

6. Воздействие (без засечек)

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

Impact был впервые представлен на цифровых устройствах в Microsoft Windows в 1998 году, и с тех пор наблюдается возрождение популярности интернет-мемов, наложенных поверх изображений для создания юмористического эффекта.

7. Times New Roman (с засечками)

Times New Roman — лучший шрифт с засечками. Это чрезвычайно популярный и основной шрифт для устройств и приложений Windows, таких как Microsoft Word. Браузеры возвращаются к нему, если указанный шрифт не отображается.

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

8. Дидо (с засечками)

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

9. Грузия (с засечками)

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

10. Американская пишущая машинка (с засечками)

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

11. Andalé Mono (моноширинный)

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

Andalé Mono — прекрасный пример моноширинного шрифта. Этот вариант без засечек был разработан Apple и IBM и часто используется в средах разработки программного обеспечения.

12. Курьер (моноширинный)

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

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

13. Консоль Lucida (моноширинный)

Консоль

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

14. Монако (монокосмический)

Моноширинный шрифт без засечек Monaco встроен в macOS и в результате будет более знаком пользователям Apple.

15. Брэдли Хэнд (курсив)

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

16. Brush Script MT (курсив)

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

17. Луминари (фантазия)

Шрифты

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

18. Comic Sans MS (курсив)

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

Тем не менее, Comic Sans полезен по причинам доступности: поскольку в нем отсутствуют похожие буквенные формы, такие как p / q и b / d, люди с дислексией, как правило, испытывают меньше трудностей с ним, чем с обычными шрифтами.

Используйте безопасные веб-шрифты CSS и HTML для своих проектов

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

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

Примечание редактора: этот пост был первоначально опубликован в марте 2020 года и был обновлен для полноты.

Как изменить тип и цвет шрифта на веб-странице

Обновлено: 16.08.2021, Computer Hope

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

Примечание

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

Кончик

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

 
 Этот текст имеет шрифт Courier, синий цвет и 20 пикселей. 
 

 
 Вся эта фраза - красная и курьерская 
 Только слово  test  красное и Courier. 
 

 @charset «utf-8»; 
 .courier {
 семейство шрифтов: Courier;
 цвет: # 005CB9;
} 

  Пример специального шрифта.