Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

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

Содержание

HTML-письма — как правильно подключить шрифты

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

font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: Georgia, serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: 'MS Serif', 'New York', sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;

Таким образом, эти шрифты можно использовать в рассылках без страха и
риска. Если вы все же хотите использовать совсем нестандартные шрифты
через правило @font-face, то будьте внимательными, это правило
работает только в IOS, Google mail и Android 4 (Gmail).

источник

P.S: вот такая конструкция в head позволяет гугл шрифты подключить, но за поддержку не скажу:

<!-- Web Font / @font-face : BEGIN -->
    <!-- NOTE: If web fonts are not required, lines 9 - 26 can be safely removed. -->

    <!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
    <!--[if mso]>
        <style>
            * {
                font-family: sans-serif !important;
            }
        </style>
    <![endif]-->

    <!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
    <!--[if !mso]><!-->
        <!-- insert web font reference, eg: <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> -->
    <!--<![endif]-->

  <!-- Web Font / @font-face : END -->

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

Почему безопасные шрифты в HTML-письмах – это ошибка

От автора: не существует такого понятия, как «безопасный веб-шрифт». Я видел так много сообщений с просьбой написать о безопасных шрифтах для использования в электронных письмах HTML, на которые обычно отвечали сокращенным списком шрифтов, доступных в Windows. Итак, позвольте мне объяснить, почему безопасные шрифты — это ошибочная концепция и насколько больше может быть шрифтов в электронных письмах HTML, чем в Arial и Times.

Шрифты в электронном письме в формате HTML могут быть из четырех разных источников:

Системные шрифты.

Пользовательские шрифты.

Шрифты Email клиента.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Встроенные шрифты.

Поговорим о каждом из них.

1. Системные шрифты

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

macOS Catalina предоставляет огромное количество предустановленных шрифтов — 520. Далее следует iOS 13 с 273 предустановленными шрифтами. В Windows 10 183 шрифта. А в Android… 9 семейств шрифтов.

Android — это особый случай, потому что не существует ни одной настоящей версии Android. Шрифты по умолчанию будут отличаться, если у вас есть устройство Samsung, Xiaomi или Google. Хотя Apple и Microsoft предоставляют очень четкие списки шрифтов по умолчанию, установленных в их системах, мне не удалось найти такой список ни для одного производителя устройств Android. (У Google есть только список, начиная с Android 4.1).

С таким небольшим количеством шрифтов, доступных на Android, теперь должно быть ясно, почему говорить о «безопасных шрифтах» практически бессмысленно. Даже Arial или Times New Roman отсутствуют в Android, что означает возврат к Roboto и Noto Serif соответственно.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

2. Пользовательские шрифты

На сегодняшний день вы можете установить свои собственные шрифты в любую систему. Загрузите понравившийся шрифт из Google Fonts, Adobe, DaFont или другого вашего любимого поставщика, установите его, и теперь он станет доступным для всей вашей системы.

Хотя это было возможно с самого начала в таких операционных системах, как Windows, macOS или Android, в iOS это стало возможно только с iOS 13 (в 2019 году). Например, вы можете установить Adobe Creative Cloud на iOS и загрузить и установить оттуда любой новый шрифт, сделав его доступным в любом другом приложении для iOS.

3. Шрифты Email клиента

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

Например, в веб-почту Gmail встроена собственная версия Google Sans (обычная, средняя) и Roboto (обычная, средняя, жирная). В веб-почту Outlook.com встроен Segoe UI Web (обычный, полужирный, полужирный) и иконочный шрифт Shell Fabric MDL2 Icons.

4. Встроенные шрифты

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

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

Рекомендации по настройке шрифтов в HTML письмах

Сокращенное свойство font имеет очень хорошую поддержку. Поэтому вместо объявления отдельных свойств (например, font-family: sans-serif; font-size: 16px; line-height: 24px; font-weight: bold;) вы можете объявить одно свойство шрифта (например, font:bold 16px/24px sans-serif). Это короче, чище. Мне это нравится.

Всегда объявляйте общее название семейства шрифтов как запасной вариант. Если вы его не укажете, механизм рендеринга будет использовать шрифт по умолчанию. Например, в современном браузере font-family: Lobster будет отображаться как Times, а font-family: Lobster, sans-serif будет отображаться как Arial, Helvetica или Roboto в зависимости от вашей системы.

Если вы используете объявление @font-face, включите свойства mso-generic-font-family и mso-font-alt, чтобы лучше контролировать резервный шрифт в The Outlooks в Windows.

Font Style Matcher от Моники Динкулеску — отличный инструмент для поиска запасного шрифта, не слишком отличающегося от веб-шрифта, который вы хотите использовать.

Font Family Reunion от Зака Лита — отличный инструмент, чтобы увидеть, какой системный шрифт вы получите из стека шрифтов семейства шрифтов.

Автор: Rémi Parmentier

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

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Шрифты и работа с ними

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

Помимо насыщенности, CSS позволяет управлять следующими настройками:

  • Семейство шрифтов;
  • Стиль шрифта;
  • Стиль строчных символов;
  • Размер шрифта;
  • Межстрочный интервал.

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

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

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

.font {
  font-family: Georgia, "Times New Roman";
}

Если у пользователя в системе есть шрифт Georgia, то будет применён он. В противном случае браузер будет искать шрифт Times New Roman. Теперь возможны две ситуации:

  • У пользователя в системе установлен шрифт Times New Roman — шрифт применится к странице.
  • У пользователя в системе не установлен шрифт Times New Roman — браузер подставит шрифт из основных настроек браузера. Это необходимо для возможности отобразить контент на странице.

А какой шрифт именно выберет браузер? Тут всё зависит от настроек. Может случиться так, что стандартный шрифт будет из другого типа. Это может «сломать» визуальную часть сайта. Все шрифты можно разделить на три большие группы:

  • Антиква или шрифты с засечками. Такие шрифты чаще всего используется в книгах и новостных сайтах. В CSS обозначается serif.
  • Гротеск или шрифты без засечек. Основной тип шрифтов на сайтах. Прямо сейчас вы читаете именно такой шрифт. В CSS обозначается sans-serif.
  • Моноширинный шрифт. У этого семейства все символы имеют одинаковую ширину. Вы можете увидеть такой шрифт в терминалах или редакторах кода. В CSS обозначается monospace.

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

.font {
  font-family: Georgia, "Times New Roman", serif;
}

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

Установка новых шрифтов

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

  • .woff/.woff2 — шрифт формата Web Open Font Format. Распространённый формат, который поддерживается большинством современных браузеров.
  • .ttf — шрифт формата TrueType. Данный формат был придуман в 80-е года 20 века и сейчас используется для поддержки старых браузеров. Совместим с современными браузерами. Золотая середина форматов.
  • .eot — шрифт формата Embedded OpenType. Это наиболее старый формат. Его использование необходимо только в случае поддержки старых браузеров, например, Internet Explorer 6.0. Ситуация редкая, поэтому его использование почти не встречается.

Для установки шрифта используется конструкция @font-face. Она позволяет подключить шрифт в различных расширениях, определить имя и путь к файлу. На примере шрифта Roboto воспользуемся такой конструкцией.

Пусть наш проект имеет директорию fonts, внутри которой находятся файлы шрифтов.

project/
├── css/
│   └── style.css
├── fonts/
│   │── Roboto-Regular.ttf
│   │── Roboto-Bold.ttf
│   └── Roboto-Light.ttf

Хорошим тоном является указание @font-face в самом начале CSS файла, а не перед первым использованием шрифта. Это позволит правильнее структурировать CSS. Есть два основных свойства, которые принимает @font-face:

  • font-family — Имя подключаемого шрифта. Именно по нему можно обратиться после подключения.
  • src — Путь к файлу со шрифтом.

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

@font-face {
  font-family: 'Roboto Regular';
  src: url('../fonts/Roboto-Regular.ttf');
}

body {
  font-family: 'Roboto Regular', sans-serif;
}

Следующий шаг — подключить другие два начертания. Можно воспользоваться примером выше. Тогда наш CSS приобретёт следующий вид:

@font-face {
  font-family: 'Roboto Regular';
  src: url('../fonts/Roboto-Regular.ttf');
}

@font-face {
  font-family: 'Roboto Bold';
  src: url('../fonts/Roboto-Bold.ttf');
}

@font-face {
  font-family: 'Roboto Light';
  src: url('../fonts/Roboto-Light.ttf');
}

body {
  font-family: 'Roboto Regular', sans-serif;
}

h2 {
  font-family: 'Roboto Bold', sans-serif;
}

h3 {
  font-family: 'Roboto Light', sans-serif;
}

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

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

@font-face {
  font-weight: 400; /* Соответствует значению normal */
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Regular.ttf');
}

@font-face {
  font-weight: 700; /* Соответствует значению bold */
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Bold.ttf');
}

@font-face {
  font-weight: 300;
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Light.ttf');
}

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

h2 {
  font-weight: bold;
}

h3 {
  font-weight: 300;
}

Стиль шрифта

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

  • normal — стандартное значение. Соответствует нормальному стилю отображению шрифта. Именно такой стиль вы читаете прямо сейчас.
  • italic — курсивное начертание. Данное начертание имеет наклонные буквы, в отличие от нормального стиля. Вот так выглядит курсивный шрифт.
  • oblique — тоже курсивное начертание. Зачастую оно не отличается от значения italic.

Но почему существует два похожих значения для курсива? На самом деле они не очень похожие. Курсив, который задаётся значением italic, является самостоятельным шрифтом, для которого есть отдельный файл в системе или на сервере. Он относится больше к рукописному тексту, тогда как oblique искусственно наклоняет символы текущего шрифта.

.italic {
  font-style: italic;
}

Строчные символы

С помощью CSS можно задать такой вид строчных символов как «Капитель».

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

Текст с использованием капители

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

Капитель устанавливается с помощью свойства font-variant. У него возможны два значения:

  • normal — стандартная стилистика строчных символов.
  • small-caps — капитель.
p {
  font-variant: small-caps;
}

Межстрочный интервал

Межстрочный интервал, или, как его ещё называют интерлиньяж — это расстояние по вертикали между базовыми линиями одного и другого символа в соседних строках. Так создаётся расстояние между этими строками. Важным элементом при создании дизайна является использование достаточного межстрочного интервала. Чаще всего это 150% от значения размера шрифта. Например, если шрифт имеет размер 16 пикселей, то межстрочный интервал должен быть не менее 24 пикселей. Такое значение не является необходимым правилом и от него всегда можно отступить.

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

p {
  font-size: 16px;
  line-height: 1.5;
}

Обобщённое правило

Теперь, для работы со шрифтами, вы знаете все основные правила. Это:

  • font-style
  • font-variant
  • font-weight
  • font-size
  • line-height
  • font-family

Их можно указывать не только по отдельности, но и все вместе с помощью одного CSS правила font. Шесть разных правил внутри одного! Это может быть удобно, если действительно нужны все значения. При этом вы не обязаны указывать все значения. Единственное ограничение — наличие значений для font-size и font-family. Остальные значения можно не указывать. Укажем значения для всех этих свойств внутри правила font:

p {
  font: italic small-caps bold 16px/24px Roboto, sans-serif;
}

Важно обратить внимание на запись 16px/24px. Внутри правила font так обозначаются свойства font-size и line-height.

Использование одного правила или нескольких

Этот раздел относится не только к правилу font, но и ко всем обобщённым правилам, которые вы изучите в процессе прохождения курсов. С одной стороны кажется, что использование одного правила сокращает количество строк, которые используются в CSS. Это действительно так, но есть две основные проблемы использования таких свойств:

  1. Запоминание правильного порядка значений. Используя обобщённые свойства вам всегда стоит держать в голове верный порядок значений свойств. В этом легко можно ошибиться на первых этапах изучения. Хорошим вариантом будет использование отдельных свойств, но в том порядке, в котором они идут в обобщённом свойстве. С опытом вы сможете переключиться на одно правило.
  2. Обобщённые свойства перебивают отдельные. Если в коде вы указали font-variant: small-caps;, а потом для этого же элемента применили font: 16px/24px sans-serif;, то капитель будет сброшена в значение по умолчанию.

Используйте обобщённые свойства только один раз при задании стандартных стилей. Например, свойство font отлично подойдёт для селектора body, а модификации текста будут производиться одиночными свойствами.


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

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

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

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

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

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

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

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

Записки HTML-верстальщика: шрифты и всё, что с ними связано

 Приветствую всех!

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

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

  1. Использование стандартных шрифтов и отсутствие их подключения как такового (за исключением указания font-family;
  2. Использование сервиса google fonts;
  3. Использование нестандартных шрифтов.

Использование стандартных шрифтов

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

Подключение при помощи сервиса google fonts

Здесь также, проблем возникнуть не должно. Перейдя на сайт https://fonts.google.com/ мы можем выбрать понравившийся нам шрифт (или найти шрифт, который используется в дизайне) и сгенерировать нужные нам стили: 

Использование нестандартных шрифтов

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

Шаг первый: Для начала, скорее всего, этот шрифт дизайнер Вам не предоставил (за исключением некоторых отдельных личностей — спасибо Вам! Вы экономите наше время и нервы). Шрифт нужно найти на просторах великой сети интернет. Найдя этот шрифт, сильно не радуемся — скорее всего, он у нас в одном формате. Для корректной работы шрифта во всех браузерах, нам нужно их несколько. Слава Богу, существует большое количество генераторов шрифтов: я использую чаще всего вот этот: https://www.web-font-generator.com/ (еще пару полезных сервисов Вы сможете найти в этой статье). Сервис до безобразия прост. Для начала, мы загружаем туда наш шрифт, ставим галочку напротив  «I’m uploading a font that is legal for web embedding. I checked with the author and/or EULA», немного ждем, и получаем архив с нужными нам файлами: 

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

Если Вас всё устроило, жмём кнопку Download Package и смотрим что же мы скачали:

Скачали мы архив, в котором есть 4 файла с нужными нам расширениями шрифтов (woff, ttf, svg, eot), файл styles.css (остановимся чуть позже на нем) и пример того как выглядят шрифты: preview.html.

Из этого архива мы берем файлы шрифтов и переносим в наш проект. Затем открываем файл styles.css

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

Именно этот код позволяет нам кроссбраузерно и правильно вставить наш нестандартный шрифт на сайт. Расширение шрифта eot нужно для поддержки самых древних браузеров а-ля IE8, шрифт woff — для: 

  • IE9+
  • FF 3.6+
  • Opera 11+
  • Chrome 6+
  • Safari 5.1+
  • Opera mobile 11+, 

шрифт ttf

  • FF 3.5+
  • Opera 10+
  • Chrome 4+
  • Safari 3.2+
  • Opera mobile 10+
  • iOS 4.2+
  • Android 2.2+,

шрифт svg:

  • Opera 9+
  • Chrome 4+
  • Safari 3.2+
  • Opera mobile 10+
  • iOS
  • Android 3

Ну и далее, мы, как и в стандартном шрифте, можем использовать значение font-family, которое сгенерировал нам сервис. В нашем случае: font-family: Roboto-Black. Хотелось бы добавить небольшой лайфхак: мы в своих последних проектах даем font-family универсальное для любого шрифта, к примеру: font-family: bold — для жирного начертания, а так же, переименовываем наши шрифты, давая им названия bold.svg, bold.ttf и т.д. Таким образом, если нам нужно будет заменить шрифт на какой-либо другой — нам нужно будет только сгенерировать шрифт, переименовать его, и всё. В код лезть нужно не будет вообще! (Естественно, я говорю об обычном CSS, без использования каких-либо препроцессоров).

 

Спасибо за внимание 🙂   

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

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

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

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

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

Как изменить тип шрифта в HTML

Чтобы изменить тип шрифта в HTML, используйте свойство CSS font-family. Установите для него желаемое значение и поместите его в атрибут стиля.Затем добавьте этот атрибут стиля к элементу HTML, например к абзацу, заголовку, кнопке или тегу диапазона.

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

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

  
Ваш текст здесь.

Однако этот тег шрифта устарел еще в 1998 году, поэтому он не работает с последней версией HTML, HTML5. На смену ему пришел гораздо более эффективный способ изменить внешний вид текста, а именно CSS. Форматирование текста CSS — это более легкая и гибкая альтернатива тегу шрифта HTML, и его несложно изучить.

Давайте перепишем приведенный выше пример, используя CSS, чтобы изменить тип шрифта абзаца. Важно отметить, что я использую CodePen, который использует шрифт Times New Roman в качестве шрифта по умолчанию.Я собираюсь добавить атрибут стиля к первому элементу абзаца, что означает, что стиль будет применен только к этому абзацу. Остальной абзац и заголовки на странице останутся в формате Times New Roman.

Вот HTML со встроенным CSS:

 
 

Как изменить тип шрифта в HTML [встроенный CSS]

Это фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.

Объяснение

Поскольку я использую редактор CodePen, шрифт по умолчанию - Times New Roman. Это означает, что изменение гарнитуры абзаца потребует от меня использования атрибута стиля, который содержит свойство CSS font-family, установленное на «Arial». Другие элементы на странице не предназначены для встроенного CSS и поэтому остаются Times New Roman.

Вот результат:

См. Pen oNBMjeB Кристины Перриконе (@hubspot) на CodePen.

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

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

Вот код CSS:

 
 

п {

семейство шрифтов: Arial;

}

Вот HTML:

 
 

Как изменить тип шрифта в HTML [Внутренний CSS]

Это фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.

Объяснение

Поскольку я использую редактор CodePen, шрифт по умолчанию - Times New Roman. Это означает, что для изменения гарнитуры всех абзацев на странице мне потребуется использовать селектор типа CSS и установить для свойства CSS font-family значение «Arial."Заголовки на странице останутся Times New Roman.

Вот результат:

См. Pen GRrBpyQ Кристины Перриконе (@hubspot) на CodePen.

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

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

Чтобы изменить размер шрифта в HTML, используйте свойство CSS font-size. Установите для него желаемое значение и поместите его в атрибут стиля.Затем добавьте этот атрибут стиля к элементу HTML, например к абзацу, заголовку, кнопке или тегу диапазона.

Чтобы продолжить переписывание первого примера, в котором использовался устаревший тег шрифта, давайте изменим размер шрифта абзаца на 20 пикселей с помощью CSS. В этом примере я все еще собираюсь использовать CodePen, но загружу на страницу Bootstrap CSS. Это означает, что в дополнение к типу шрифта по умолчанию Helvetica, размер шрифта по умолчанию для абзацев будет 16 пикселей, заголовок 2 — 32 пикселя, а заголовок 3 — 28 пикселей.

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

Вот HTML со встроенным CSS:

 
 

Как изменить размер шрифта в HTML [встроенный CSS]

Это фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.

Объяснение

Я использую редактор CodePen, но загружаю BootstrapCDN, поэтому размер шрифта по умолчанию для текста и абзацев составляет 16 пикселей, h3s - 32px, а h4s - 28px. Шрифт по умолчанию - также Helvetica. Это означает, что изменение размера первого абзаца потребует от меня использования атрибута стиля, который содержит свойство CSS font-size, установленное на «20 пикселей."Другие элементы на странице не нацелены на встроенный CSS и поэтому сохраняют свои размеры по умолчанию.

Вот результат:

См. Ручка «Как изменить размер шрифта в HTML [встроенный CSS]» Кристины Перриконе (@hubspot) на CodePen.

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

Вот код CSS:

 
 

п {

размер шрифта: 20 пикселей;

}

Вот HTML:

 
 

Как изменить размер шрифта в HTML [внутренний CSS]

Это фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.Это больше фиктивный текст.

Объяснение

Я использую редактор CodePen, но загружаю BootstrapCDN, поэтому размер шрифта по умолчанию для текста и абзацев составляет 16 пикселей, h3s - 32px, а h4s - 28px. Шрифт по умолчанию также Arial. Это означает, что изменение размера всех абзацев на странице потребует от меня использования селектора типа CSS и установки свойства CSS font-size на «20 пикселей». Заголовки на странице будут иметь размер по умолчанию.

Вот результат:

См. Ручка «Как изменить размер шрифта в HTML [внутренний CSS]» Кристины Перриконе (@hubspot) на CodePen.

Изменить размер шрифта в том же абзаце

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

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

Вот HTML со встроенным CSS:

 
 

Как изменить размер шрифта в том же абзаце [встроенный CSS]

Это фиктивный текст. Это больше фиктивный текст. Это более крупный текст. Это более фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.

Объяснение

Я использую редактор CodePen, но загружаю BootstrapCDN, поэтому размер шрифта по умолчанию для абзацев составляет 16 пикселей. Чтобы изменить размер шрифта текста в абзаце, я заключу текст в теги span. Затем я добавлю атрибут стиля, который содержит свойство CSS font-size, для которого задано значение, отличное от 16 пикселей. В этом примере он установлен на 22 пикселя.

Вот результат:

См. «Ручка» Как изменить размер шрифта в том же абзаце [встроенный CSS] Кристины Перриконе (@hubspot) на CodePen.

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

Вот код CSS:

 
 

# больше {

размер шрифта: 18 пикселей;

}

# меньше {

размер шрифта: 14 пикселей;

}

Вот HTML:

 
 

Как изменить размер шрифта в том же абзаце [внутренний CSS]

Это фиктивный текст.Это больше фиктивный текст. Это меньший текст. Это более фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.

Объяснение

Я использую редактор CodePen, но загружаю BootstrapCDN, поэтому размер шрифта по умолчанию для абзацев составляет 16 пикселей. Чтобы изменить размер шрифта абзаца и текста внутри абзаца, я заключу текст в теги span и добавлю атрибуты ID как к абзацу, так и к элементу span.Затем я воспользуюсь селекторами идентификаторов и установлю для них разные размеры шрифта в разделе заголовка страницы.

Вот результат:

См. «Перо для изменения размера шрифта в том же абзаце» [внутренний CSS] от Кристины Перриконе (@hubspot) на CodePen.

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

Как изменить цвет шрифта в HTML

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

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

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

Вот HTML со встроенным CSS:

 
 

Как изменить цвет шрифта в HTML [встроенный CSS]

Это фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.

Объяснение

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

Вот результат:

См. Ручка «Как изменить цвет шрифта в HTML» [встроенный CSS] Кристины Перриконе (@hubspot) на CodePen.

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

Вот код CSS:

 
 

п {

цвет: # FF7A59;

}

Вот HTML:

 
 

Как изменить цвет шрифта в HTML [Внутренний CSS]

Это фиктивный текст.Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.

Объяснение

Поскольку я использую редактор CodePen Editor, по умолчанию используется черный цвет шрифта. Это означает, что изменение цвета всех абзацев на странице потребует от меня использования селектора типа CSS и установки свойства цвета CSS на шестнадцатеричный код цвета для оранжевого (# FF7A59).Заголовки на странице останутся черными.

Вот результат:

См. Ручка «Как изменить цвет шрифта в HTML» [внутренний CSS], автор — Кристина Перриконе (@hubspot) на CodePen.

Чтобы узнать, как изменить цвет фона текста, прочтите статью «Как изменить цвет текста и фона в CSS».

Как изменить шрифт в Div в HTML

Изменение шрифта в div ничем не отличается от изменения шрифта в элементе абзаца или диапазона.

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

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

Вот код CSS:

 
 

#example {

семейство шрифтов: Arial;

размер шрифта: 20 пикселей;

цвет: # FF7A59;

}

Вот HTML:

 
 

Как изменить шрифт в Div в HTML [Внутренний CSS]

Это фиктивный текст.Это больше фиктивный текст. Это текст меньшего размера, это скорее фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это скорее фиктивный текст.

Объяснение

Я использую редактор CodePen, поэтому тип, размер и цвет шрифта по умолчанию - Times New Roman, 16 пикселей и черный. Чтобы изменить все эти свойства раздела текста, я мог бы обернуть текст в div и добавить к элементу атрибут ID.Затем я могу использовать селектор идентификаторов и установить свойства font-family, font-size и font-color в разделе head страницы.

Вот результат:

См. Pen How to Change Font in a Div in HTML [Internal CSS] Кристины Перриконе (@hubspot) на CodePen.

Изменение шрифта с помощью HTML и CSS

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

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

шрифтов

шрифтов


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

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

  1. Пользовательский агент создает (или получает доступ) базу данных соответствующего CSS 2.1.
    свойства всех шрифтов, о которых знает UA.
    Если есть два шрифта с одинаковыми свойствами, пользователь
    агент выбирает один из них.
  2. Для данного элемента и для каждого символа в этом элементе UA
    собирает свойства шрифта, применимые к этому элементу. С помощью
    полный набор свойств, UA использует свойство font-family для
    выберите предварительное семейство шрифтов. Остальные свойства проверены
    против семьи в соответствии с критериями соответствия, описанными в
    каждое свойство.Если есть совпадения по всем остальным свойствам,
    тогда это совпадающее начертание шрифта для данного элемента или символа.
  3. Если в семействе шрифтов нет подходящего начертания шрифта
    обрабатывается на шаге 2, и если есть следующая альтернатива ‘font-family’
    в наборе шрифтов, затем повторите шаг 2 со следующей альтернативой
    ‘семейство шрифтов’.
  4. Если есть совпадающее начертание шрифта, но оно не содержит глифа
    для текущего персонажа, и если есть следующая альтернатива
    ‘font-family’ в наборах шрифтов, затем повторите шаг 2 со следующим
    альтернативное «семейство шрифтов».
  5. Если в семействе, выбранном в 2, нет шрифта, используйте
    «Font-family» по умолчанию, зависящий от UA, и повторите шаг 2, используя лучшее
    совпадение, которое может быть получено в пределах шрифта по умолчанию. Если конкретный
    символ не может быть отображен с использованием этого шрифта, тогда UA может использовать другой
    означает определение подходящего шрифта для этого символа. UA должен отобразить
    каждый символ, для которого нет подходящего шрифта для видимого символа
    выбранный UA, предпочтительно глиф «отсутствующего символа» из одного из
    шрифты, доступные для UA.

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

Правила сопоставления по свойствам из пункта (2) выше следующие:

  1. ‘font-style’ сначала пробуется. «Курсив»
    будет удовлетворен, если в базе данных шрифтов UA есть лицо
    помечены ключевым словом CSS «курсив» (предпочтительно) или «наклонный».
    В противном случае значения должны быть точно сопоставлены, иначе стиль шрифта не будет работать.
  2. Далее выполняется попытка

  3. ‘font-option’.Спички с маленькой заглавной буквы (1) a
    шрифт, помеченный как ‘small-caps’, (2) шрифт, в котором маленькие заглавные буквы
    синтезированный, или (3) шрифт, в котором все строчные буквы заменены на
    заглавные буквы. Шрифт с маленькими заглавными буквами может быть синтезирован
    электронное масштабирование заглавных букв обычного шрифта.
    ‘normal’ соответствует нормальному варианту шрифта (не с маленькими заглавными буквами). У шрифта не может быть нормального варианта. Шрифт
    который доступен только в виде маленьких заглавных букв, должен выбираться как «нормальное» лицо или как «малое заглавное» лицо.
  4. ‘font-weight’ соответствует следующему, он будет
    никогда не подведи. (См. «Font-weight» ниже.)
  5. ‘font-size’ должен соответствовать в пределах
    UA-зависимый запас допуска. (Обычно размеры масштабируемых шрифтов
    округляются до ближайшего целого пикселя, а допуск для
    растровые шрифты могут достигать 20%.) Дальнейшие вычисления, например,
    значениями ’em’ в других свойствах, основаны на
    вычисленное значение font-size.

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

body {font-family: Gill, Helvetica, sans-serif}
 

Хотя многие шрифты содержат глиф «отсутствующий символ»,
обычно это открытый ящик, поскольку его название подразумевает, что это не должно быть
считается совпадением
для символов, которых нет в шрифте. (Должно,
однако считается соответствием U + FFFD, «отсутствующий символ»
код символа).

Существует два типа названий семейств шрифтов:

<фамилия>
Имя выбранного семейства шрифтов.В последнем примере «Гилл»
и «Helvetica» — семейства шрифтов.
<родовое-семейство>
В приведенном выше примере последним значением является родовое имя семейства. В
определены следующие общие семейства:

  • ‘serif’ (например, Times)
  • ‘без засечек’ (например, Helvetica)
  • ‘курсив’ (например, Zapf-Chancery)
  • ‘фэнтези’ (например, вестерн)
  • ‘моноширинный’ (например, Courier)

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

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

Например, следующие объявления недействительны:

семейство шрифтов: красный / черный, без засечек;
семейство шрифтов: "Lucida" Grande, без засечек;
семейство шрифтов: Кхм !, без засечек;
семейство шрифтов: test @ foo, sans-serif;
семейство шрифтов: #POUND, без засечек;
семейство шрифтов: Гавайи 5-0, без засечек;
 

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

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

body {font-family: "New Century Schoolbook", serif}

<ТЕЛО>
 

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

15.3.1 Общие семейства шрифтов

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

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

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

15.3.1.1

serif

Глифы шрифтов с засечками, как этот термин используется в CSS, обычно имеют завершение.
штрихи, расклешенные или сужающиеся концы, или иметь окончание с засечками
(включая плоские засечки).Шрифты с засечками обычно
пропорционально разнесены. Они часто демонстрируют большую разницу между
толстые и тонкие штрихи, чем шрифты из общего шрифта ‘sans-serif’
семья. CSS использует термин ‘serif’ для применения к шрифту любого скрипта,
хотя другие имена могут быть более знакомыми для конкретных сценариев, например
как Mincho (японский), Sung или Song (китайский), Totum или Kodig (корейский).
Любой шрифт, описанный таким образом, может использоваться для обозначения
родовое семейство ‘serif’.

Примеры шрифтов, подходящих под это описание:

Латинские шрифты Times New Roman, Бодони,
Гарамонд, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit
Греческие шрифты Bitstream Cyberbit
Кириллические шрифты Adobe Minion Cyrillic, Excelsior Cyrillic Upright,
Монотипия Альбион 70, Bitstream Cyberbit, ER Bukinist
Еврейские шрифты New Peninim, Raanana, Bitstream Cyberbit
Японские шрифты Рюмин Лайт-KL, Киокашо ИКА, Футо Мин A101
Арабские шрифты Bitstream Cyberbit
шрифты Cherokee Lo Cicero Cherokee
15.3.1.2

sans-serif

Глифы в шрифтах без засечек, поскольку этот термин используется в CSS, обычно имеют обводку
гладкие окончания — с небольшим расширением или без развальцовки, поперечного штриха и т. д.
орнамент. Шрифты без засечек обычно
пропорционально разнесены. У них часто есть небольшие различия между толстыми
и тонкие штрихи по сравнению со шрифтами из семейства «serif». CSS использует
термин «без засечек» для применения к шрифту для любого шрифта, хотя
другие имена могут быть более знакомы для конкретных сценариев, например
Готический (японский), Кай (китайский) или Патанг (корейский).Любой шрифт,
описанный таким образом, может использоваться для обозначения общего «без засечек»
семья.

Примеры шрифтов, подходящих под это описание:

Латинские шрифты MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers,
Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica
Греческие шрифты Attika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek
Кириллические шрифты Helvetica Cyrillic, ER Univers, Lucida Sans Unicode, Bastion
Еврейские шрифты Arial Hebrew, MS Tahoma
Японские шрифты Shin Go, Heisei Kaku Gothic W5
Арабские шрифты MS Tahoma
15.3.1.3

cursive

Глифы курсивным шрифтом, как этот термин используется в CSS, обычно имеют
либо присоединение штрихов, либо другие характеристики курсива, помимо тех
курсивных шрифтов. Глифы частично или полностью
связаны, и результат больше похож на рукописную ручку или кисть
письмо, чем печатное письмо. Шрифты для некоторых скриптов, например
Арабский, почти всегда пишется курсивом. CSS использует термин «курсив» для
применять к шрифту для любого скрипта, хотя другие названия, такие как Chancery,
Кисть, Swing и Script также используются в названиях шрифтов.

Примеры шрифтов, подходящих под это описание:

Латинские шрифты Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand,
Zapf-Chancery
Кириллические шрифты ER Architekt
Еврейские шрифты Корсива
Арабские шрифты DecoType Naskh, монотипия урду 507
15.3.1.4

фэнтези

Фэнтезийные шрифты, используемые в CSS, в основном являются декоративными, в то время как
все еще содержащие представления символов (в отличие от Пи или
Графические шрифты, которые не представляют символы).Примеры включают:

латинские шрифты Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz
15.3.1.5

моноширинный

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

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

Латинские шрифты Courier, MS Courier New, Prestige, Everson Mono
Греческие шрифты MS Courier New, Everson Mono
Кириллические шрифты ER Kurier, Everson Mono
Японские шрифты Осака моноширинный
шрифты Cherokee Эверсон Моно
, стиль шрифта
Значение: нормальное | курсив | косой | наследовать
Начальный: нормальный
Применимо к: все элементы
Унаследовано: да
В процентах: Н / Д
Медиа: визуальный
Вычисленное значение: как указано

Свойство font-style выбирает между обычным (иногда
называемые «римскими» или «вертикальными»), курсивом и наклонным шрифтом внутри
семейство шрифтов.

Значение «нормальный» выбирает шрифт, который классифицируется как «нормальный».
в базе данных шрифтов UA, в то время как ‘oblique’ выбирает шрифт, который
помечены как «наклонные». Значение «курсив» выбирает шрифт, который помечен
«курсив» или, если он недоступен, помеченный как «наклонный».

Шрифт, помеченный как «наклонный» в базе данных шрифтов UA, может
фактически были сгенерированы электронным наклоном обычного шрифта.

Шрифты с наклонными, наклонными или наклонными названиями будут
обычно обозначается как «наклонный» в базе данных шрифтов UA.Шрифты с
Курсив, Курсив или Курсив в их именах будут
обычно обозначается курсивом.

h2, h3, h4 {font-style: italic}
h2 em {font-style: normal}
 

В приведенном выше примере выделенный текст в ‘h2’ появится в
нормальное лицо.

‘вариант шрифта’
Значение: нормальное | малые шапки | наследовать
Начальный: нормальный
Применимо к: все элементы
Унаследовано: да
В процентах: Н / Д
Медиа: визуальный
Вычисленное значение: как указано

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

Значение ‘normal’ выбирает шрифт, который не является шрифтом с маленькими заглавными буквами,
‘small-caps’ выбирает шрифт small-caps. Это приемлемо (но не
требуется) в CSS 2.1, если шрифт с маленькими заглавными буквами создается с помощью
обычный шрифт и замена строчных букв масштабированными прописными
символы. В крайнем случае будут использоваться прописные буквы в качестве
замена капельного шрифта.

Следующий пример приводит к элементу h4 в малых заглавных буквах,
с любыми подчеркнутыми словами наклонными и любыми подчеркнутыми словами внутри
и наклонные малые заглавные буквы ‘h4’:

h4 {font-variant: small-caps}
em {font-style: oblique}
 

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

Примечание: , поскольку это свойство приводит к тому, что текст
преобразовано в верхний регистр, применяются те же соображения, что и для ‘text-transform’.

‘font-weight’
Значение: нормальное | жирный | смелее | зажигалка | 100 | 200 | 300 | 400 | 500 |
600 | 700 | 800 | 900 | наследовать
Начальный: нормальный
Применимо к: все элементы
Унаследовано: да
В процентах: Н / Д
Медиа: визуальный
Расчетное значение: см. Текст

Свойство font-weight выбирает толщину шрифта.В
значения от ‘100’ до ‘900’ образуют упорядоченную последовательность, где каждое число
указывает на вес, который по крайней мере такой же темный, как и его предшественник. В
ключевое слово «нормальный» является синонимом «400», а «жирный» — синонимом.
с «700». Ключевые слова, отличные от «нормального» и «жирного», были показаны
часто путают с названиями шрифтов, поэтому числовая шкала
выбран для списка из 9 значений.

p {font-weight: normal} / * 400 * /
h2 {font-weight: 700} / * полужирный * /
 

Значения «жирнее» и «светлее» выбирают толщину шрифта,
относительно веса, унаследованного от родителя:

сильный {font-weight: bolder}
 

Шрифты (данные шрифта) обычно имеют одно или несколько свойств,
значения — это имена, которые описывают «вес» шрифта.Там
не имеет общепринятого универсального значения для этих названий веса. Их основные
роль заключается в том, чтобы различать лица разной темноты в одном
семейство шрифтов. Использование разных семейств шрифтов весьма вариативно; Например,
шрифт, который можно было бы назвать жирным, можно описать как
быть Regular, Roman, Book, Medium, Semi- или DemiBold,
Полужирный,
или Черный, в зависимости от того, насколько черным «нормальное» лицо
шрифта в дизайне. Потому что нет стандартного использования
имен, значения свойств веса в CSS 2.1 даны на числовом
шкала, в которой значение «400» (или «нормальный») соответствует
«нормальное» текстовое лицо для этой семьи. Название веса, связанное с
это лицо обычно будет Книжный, Обычный, Римский, Обычный или
иногда Средний .

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

  • Если в семействе шрифтов уже используется числовая шкала с девятью значениями
    (например, e.g., OpenType делает), вес шрифта должен быть сопоставлен
    напрямую.

  • Если есть лицо с меткой Средний и лицо с меткой
    Книжный, Обычный, Римский или Обычный, , затем
    Средний обычно присваивается «500».

  • Шрифт с надписью «Полужирный» часто соответствует значению веса «700».

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

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

  • Если желаемый вес 400, сначала проверяется 500, а затем
    используется правило для желаемого веса менее 400.

  • Если желаемый вес равен 500, сначала проверяется 400, а затем
    используется правило для желаемого веса менее 400.

В следующих двух примерах показаны типичные сопоставления.

Предположим, что у семейства «Гремучая змея» четыре веса, от самого легкого до
самый темный: Обычный, Средний, Полужирный, Плотный.

14

14

Первый пример отображения веса шрифта
Доступные грани Назначения Заполнение отверстий
«Rattlesnake Regular» 400 100, 200, 300
«Rattlesnake1414

5

5 500

5 905 Rattlesnake Bold » 700 600
« Rattlesnake Heavy » 800 900

Предположим, что в
Семейство «Ice Prawn»: Book, Medium, Bold, Heavy, Black,
ExtraBlack.
Обратите внимание, что в этом случае пользовательский агент
решил, что , а не , назначать числовой
значение «Ice Prawn ExtraBlack».

Extra

Второй пример отображения веса шрифта
Доступные грани Назначения Заполнение отверстий
«Ice Prawn Book» 400 100, 200, 300
«Ice Prawn Medium» 500 500 905

«Ice Prawn Bold» 700 600
«Ice Prawn Heavy» 800
«Ice Prawn Black» 900
(нет)

Значения «жирнее» и «светлее» обозначают значения относительно
вес родительского элемента.Основываясь на унаследованном значении веса,
используемый вес рассчитывается с использованием приведенной ниже таблицы. Дочерние элементы
наследовать рассчитанный вес, а не значение «смелее» или «легче».

Значения «смелее» и «светлее»
Унаследованное значение жирный шрифт зажигалка
100 400 100
200 400 100
300 400 100
400 700 100
500 700 100
600 900 400
700 900 400
800 900 700
900 900 700

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

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

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

<абсолютный размер>
Ключевое слово — это индекс таблицы шрифтов.
размеры рассчитываются и хранятся UA. Возможные значения:

[xx-маленький | x-small | маленький | средний | большой | x-большой | xx-большой]

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

Значения абсолютного размера CSS xx-малый x-маленький малый средний большой x-большой хх большой
Размер шрифта HTML 1 2 3 4 5 6 7

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

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

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

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

<относительный размер>
Ключевое слово интерпретируется относительно
таблица размеров шрифта и размера шрифта родительского элемента.Возможный
значения: [больше | меньше]. Например, если родительский элемент
имеет размер шрифта «средний», значение «больше» сделает шрифт
размер текущего элемента должен быть «большим». Если размер родительского элемента
не близок к записи в таблице, UA может интерполировать между
записи в таблице или округлить до ближайшего. UA, возможно, придется
экстраполировать значения таблицы, если числовое значение выходит за пределы
ключевые слова.

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

Отрицательные значения не допускаются.

Во всех остальных свойствах значения длины em и ex относятся к
вычисленный размер шрифта текущего элемента. В свойстве font-size эти
Единицы длины относятся к вычисленному размеру шрифта родительского элемента.

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

Примеры:

п {размер шрифта: 16 пикселей; }
@media print {
п {размер шрифта: 12 пт; }
}
цитата {font-size: больше}
em {font-size: 150%}
em {размер шрифта: 1.5em}
 

Свойство ‘font’:
за исключением описанного ниже, сокращенное свойство для
параметр
‘стиль шрифта’,
‘вариант-шрифта’,
‘font-weight’,
‘размер шрифта’,
‘line-height’ и
‘font-family’ одновременно
место в стиле
простыня. Синтаксис этого свойства основан на традиционном
типографская сокращенная запись для установки нескольких свойств, связанных с
шрифты.

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

p {font: 12px / 14px без засечек}
п {шрифт: 80% без засечек}
p {font: x-large / 110% "New Century Schoolbook", serif}
p {шрифт: полужирный курсив, большой Palatino, serif}
p {font: normal, small-caps 120% / 120% fantasy}
 

Во втором правиле процентное значение размера шрифта (‘80% ‘) относится к
к размеру шрифта родительского элемента. В третьем правиле строка
процент высоты относится к размеру шрифта самого элемента.

В первых трех правилах выше «стиль шрифта», «вариант шрифта»
и font-weight явно не упоминаются, что означает, что они
все три установлены на свое начальное значение («нормальное»). Четвертый набор правил
font-weight на bold, font-style на italic и
неявно устанавливает для ‘font-option’ значение ‘normal’.

Пятое правило устанавливает ‘font-option’ (‘small-caps’),
‘font-size’ (120% родительского шрифта), ‘line-height’ (120% раз
размер шрифта) и «font-family» («фантазия»).Отсюда следует, что
ключевое слово ‘normal’ применяется к двум оставшимся свойствам: ‘font-style’
и font-weight.

Следующие значения относятся к системным шрифтам:

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

Системные шрифты можно устанавливать только целиком; то есть шрифт
семья, размер, вес, стиль и т. д. настраиваются одновременно.
При желании эти значения затем могут быть изменены индивидуально. Если нет
шрифт с указанными характеристиками существует на данной платформе,
пользовательский агент должен либо разумно заменить (например, меньший
версия шрифта ‘caption’ может использоваться для ‘small-caption’
font) или замените шрифт пользовательского агента по умолчанию.Что касается обычных шрифтов,
если для системного шрифта какие-либо отдельные свойства не являются частью
доступных пользовательских настроек операционной системы, эти свойства
должны быть установлены на их начальные значения.

Вот почему это свойство является «почти» сокращенным свойством: system
шрифты могут быть указаны только с этим свойством, а не с самим ‘font-family’, поэтому ‘font’ позволяет авторам делать больше, чем
сумма его подсвойств. Однако отдельным свойствам, таким как font-weight, по-прежнему присваиваются значения, взятые из системного шрифта, которые можно изменять независимо.

Примеры:

button {font: 300 italic 1.3em / 1.7em "FB Armada", sans-serif}
кнопка p {font: menu}
кнопка p em {font-weight: bolder}
 

Если шрифт, используемый для раскрывающихся меню в определенной системе
оказался, например, углем 9-point, весом 600, то P
элементы, являющиеся потомками BUTTON, будут отображаться, как если бы
это правило действовало:

кнопка p {font: 600 9px Charcoal}
 

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

button p {
  семейство шрифтов: Уголь;
  стиль шрифта: нормальный;
  вариант шрифта: нормальный;
  font-weight: 600;
  размер шрифта: 9 пикселей;
  высота строки: нормальный;
}
 

Обновление CSS API | Google Fonts | Разработчики Google

Google Fonts теперь полностью поддерживает переменные шрифты в обновлении v2 API.Хорошо
объясните, как вызывать как одно, так и несколько семейств шрифтов и как указать
диапазоны осей. Подробнее о вариативных шрифтах читайте в этом
интерактивно иллюстрированная брошюра
от Дэвида Берлоу из TypeNetwork.

Что нового?

Все начинается с нового базового URL:

  https://fonts.googleapis.com/css2
  

Синтаксис для определения стилей в каждом семействе изменен для описания
переменный шрифт «Design Space».

Руководства по быстрому запуску

Скопируйте и вставьте этот HTML-код в файл:


  
    <ссылка rel = "таблица стилей"
          href = "https: // шрифты.googleapis.com/css2?family=Crimson+Pro ">
    <стиль>
      тело {
        семейство шрифтов: 'Crimson Pro', serif;
        размер шрифта: 48 пикселей;
      }
    
  
  
    
Делаем Интернет красивой!

Используя браузер для открытия файла, на странице должен отображаться текст «Создание
Web Beautiful »шрифтом Crimson Pro.

Делаем Интернет красивой!

Многократные семьи

Чтобы запросить несколько семейств, укажите параметр family = для каждого семейства.

Например, чтобы запросить шрифты
Crimson Pro и
Литература:

  https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata
  

Скопируйте и вставьте этот HTML-код в файл:


  
    
    <стиль>
      тело {
        размер шрифта: 48 пикселей;
      }
      div: nth-child (1) {
        семейство шрифтов: 'Crimson Pro', serif;
      }
      div: nth-child (2) {
        семейство шрифтов: 'Literata', serif;
      }
    
  
  
    
Делаем Интернет красивой!
Делаем Интернет красивой!

Используя браузер для открытия файла, страница должна отобразить текст «Делаем сеть красивой» сначала в Crimson Pro, а затем в Literata.

Делаем Интернет красивой!

Делаем Интернет красивой!

Диапазоны осей

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

Чтобы запросить диапазон оси переменного шрифта, соедините 2 значения с ..

Шрифт (ы) Запрос
Crimson Pro [вес 200-900] https://fonts.googleapis.com/css2?family=Crimson+Pro:[email protected]
Crimson Pro Italic [вес 200-900] https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,[email protected],200..900
Crimson Pro Bold Italic & [wght 200-900] https: // шрифты.googleapis.com/css2?family=Crimson+Pro:ital,[email protected],200..900;1,700

Ваш браузер не поддерживает переменные шрифты (caniuse).
В браузере, который поддерживает варианты шрифтов, следующий текст должен отображаться
Crimson Pro как плавный набор весов от 400 до 500. CSS-анимацию можно сделать
текст плавно меняет стиль при взаимодействии.

Если ваш браузер полностью поддерживает переменные шрифты (caniuse),
то следующий текст должен отображать Crimson Pro как плавный набор весов из
От 400 до 500.CSS-анимация позволяет плавно изменять стиль текста при взаимодействии.

Делаем Интернет красивой!

Делаем Интернет красивой!

Делаем Интернет красивой!

Делаем Интернет красивой!

Делаем Интернет красивой!

Делаем Интернет красивой!

Индивидуальные стили, например вес

Без спецификаций стиля API предоставляет стиль по умолчанию для
просил семью. Чтобы запросить другие индивидуальные стили, например определенные веса,
добавьте двоеточие (:) после имени семейства шрифтов, а затем список осей
ключевые слова свойств в алфавитном порядке, знак «@» и один или несколько списков
значений для этих свойств оси.

Эти примеры показывают это в действии.

Шрифт (ы) Запрос
Crimson Pro (по умолчанию) https://fonts.googleapis.com/css2?family=Crimson+Pro
Crimson Pro полужирный https://fonts.googleapis.com/css2?family=Crimson+Pro:[email protected]
Crimson Pro Обычный и жирный https: //fonts.googleapis.com / css2? family = Crimson + Pro: wght @ 400; 700
Crimson Pro Bold & Bold Курсив https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,[email protected],700;1,700

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

Стиль по умолчанию

Если в запросе не указано положение или диапазон оси, по умолчанию
будет использоваться позиция. Положение курсивной оси по умолчанию — 0 (нормальное) и
значение по умолчанию для оси веса — 400 (обычное).

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

Масса нестандартная

Для статических шрифтов толщина стилей обычно указывается как кратная 100.
(например, 300, 400, 700). Вариативные шрифты имеют как стандартную толщину, так и
промежуточные веса. Для рендеринга промежуточного веса:

  https: // шрифты.googleapis.com/css2?family=Crimson+Pro:[email protected]
  

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

Если ваш браузер полностью поддерживает вариативные шрифты
(caniuse),
следующий текст должен отображать Crimson Pro с визуально различимой массой 400,
450 и 500.

Делаем Интернет красивой!

Делаем Интернет красивой!

Делаем Интернет красивой!

Оптимизация задержки и размера файла

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

Использовать дисплей шрифта

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

Передайте желаемое значение на дисплее . параметр:

  https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap
  

Оптимизация запросов шрифтов

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

В этих случаях вам следует подумать о том, чтобы указать в шрифте значение текст = .
URL-адрес запроса. Это позволяет Google Fonts возвращать файл шрифта, оптимизированный для
ваш запрос. В некоторых случаях это может уменьшить размер файла шрифта до
90%.

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

  https: // шрифты.googleapis.com/css2?family=Comfortaa&text=Hello
  

Как и все строки запроса, вы должны кодировать URL-адресом значение:

  https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello%20World
  

Эта функция также работает для международных шрифтов, позволяя указать UTF-8.
символы. Например, ¡Hola! представляется как:

  https://fonts.googleapis.com/css2?family=Comfortaa&text=%c2%a1Hola!
  

Формирование URL-адресов API

Строгость

В целом, обновленный CSS API более строг в отношении того, какие запросы
принято, чем исходный CSS API.

Общие правила:

  • Список осей в алфавитном порядке
  • Группы значений оси (т. Е. Кортежи) должны быть отсортированы численно
  • Кортежи не могут перекрываться или касаться друг друга (например, шириной 400..500 и 500..600)

Спецификация URL API

/css2?family=[&family=…………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

spec : <имя_семейства> [: @ ]

family_name : Название семейства шрифтов

axis_tag_list : [, ...] // Сортировка по алфавиту

ось : Тег оси, например итал , вес , вес

список_осей : <набор_осей> [; <набор_осей> ...]

axis_tuple : [, ...] // Та же длина, что и axis_tag_list

значение : <диапазон> | <плавающий>

диапазон : <плавать>..

float : значение в диапазоне соответствующей оси

текст : текст, который будет отображаться с запрошенным шрифтом

дисплей : авто | блок | своп | резерв | опционально

Поддержка устаревшего браузера

Браузеры без поддержки переменных шрифтов могут не отображать ваш дизайн как
предназначены. Проверьте поддержку переменных шрифтов в браузерах на caniuse.

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

В этом примере мы хотели бы использовать вес текста Маркази 450, но нам придется
вернуться к обычному (вес 400) или среднему (вес 500), когда переменная
функции шрифта не поддерживаются:

  

<стиль>
  * {
    семейство шрифтов: 'Markazi Text';
    font-weight: 400;
  }

  @supports (font -iversity-settings: "wght" 450) {
    * {
      семейство шрифтов: 'Markazi Text';
      font-weight: 450;
    }
  }

  

Запрос CSS Markazi + Text: wght @ 450 отправляет вес 450 клиентам, которые поддерживают
переменные шрифты и плотность 400 и 500 для тех, которые этого не делают.В целом
в старых версиях браузеров будут доступны резервные варианты для диапазона вашего запроса.

Ось Отклонения
итал 0, 1
вес 100, 200, 300, 400, 500, 600, 700, 800, 900

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

Запрос Стили, доступные в устаревших браузерах
итал @ 0 итал @ 0
ширина @ 500 вес @ 500
ширина при 432 вес @ 400; 500
ширина 440..560 вес @ 400; 500; 600

Доступные вариативные шрифты

Таблицу переменных шрифтов, доступных в v2 API, можно найти здесь.

Дополнительная литература

Ускорение шрифтов Google в 2021 г.

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

Фото Боба Ньюмана на Unsplash

В этой статье я покажу вам, как:

  1. Выберите лучший способ импорта шрифтов Google
  2. Пропустить время задержки при загрузке шрифтов
  3. Исправить мигание невидимого текста (FOIT)
  4. Самостоятельное размещение шрифтов для большей скорости и большего контроля

Анатомия запроса Google Fonts #

Давайте сделаем шаг назад и посмотрим, что происходит, когда вы запрашиваете у Google Fonts стандартный , скопированный с их веб-сайта:

    

Вы заметили, что ссылка предназначена для таблицы стилей, а не для файла шрифта? Если мы загрузим href ссылки в наш браузер, мы увидим, что Google Fonts загружает таблицу стилей из объявлений @ font-face для всех стилей шрифтов, которые мы запрашивали в каждом доступном наборе символов. К счастью, не все из них используются по умолчанию.

Затем каждое объявление @ font-face сообщает браузеру использовать локальную версию шрифта, если она доступна, прежде чем пытаться загрузить файл из шрифтов.gstatic.com :

  
@ font-face {
font-family: "Open Sans";
стиль шрифта: нормальный;
font-weight: 400;
src: локальный ("Open Sans Regular"), локальный ("OpenSans-Regular"), URL (https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2) формат ("woff2" ); Диапазон Unicode
: U + 0000-00FF, U + 0131, U + 0152-0153, U + 02BB-02BC, U + 02C6, U + 02DA, U + 02DC, U + 2000-206F, U + 2074, U + 20AC, U + 2122, U + 2191, U + 2193, U + 2212, U + 2215, U + FEFF, U + FFFD;
}

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

Должен ли я использовать

или @import ? #

Иногда нам проще добавить пользовательские шрифты в наши проекты, импортировав их в CSS:

  @import url ("https://fonts.googleapis.com/css?family=Open+Sans:400,700");  

К сожалению, это замедляет загрузку нашего сайта, потому что мы увеличили критическую глубину запроса без всякой пользы. В приведенном ниже сетевом водопаде мы видим, что каждый запрос связан - HTML загружается в строке 1, что вызывает вызов style.css. Только после загрузки style.css и создания CSSOM будет запущен для загрузки CSS из шрифтов Google. И, как мы узнали в предыдущем разделе, этот файл также необходимо загрузить и прочитать до того, как будут загружены сами шрифты (последние 2 строки):

Загрузка шрифтов Google через @import в CSS увеличивает критическую глубину запроса и замедляет загрузку страницы.

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

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

Разогрейте это соединение быстрее с помощью preconnect #

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

У нас есть как минимум 2 отдельных запроса к 2 разным хостам - сначала для таблицы стилей на fonts.googleapis.com , а затем на уникальный URL-адрес для каждого шрифта, размещенного на fonts.gstatic.com .

Вы можете спросить себя: «Почему я не могу просто использовать прямую ссылку на шрифт?» Шрифты Google обновляются часто, поэтому вы можете довольно быстро попытаться загрузить шрифт по ссылке, которая больше не существует.🤦🏾

Мы можем сделать одно быстрое улучшение производительности, разогревая поиск DNS, установление связи TCP и согласование TLS с доменом fonts.gstatic.com с предварительным подключением:

   

Почему? Если вы не прогреете соединение, браузер будет ждать, пока он не увидит файлы шрифтов вызова CSS, прежде чем он начнет DNS / TCP / TLS:

Загрузка шрифтов Google без предварительного подключения

Это напрасная трата времени, потому что мы ЗНАЕМ, что нам обязательно потребуется запрашивать ресурсы у шрифтов.gstatic.com . Добавляя предварительное соединение, мы можем выполнить DNS / TCP / TLS до того, как сокет понадобится, тем самым продвинув эту ветвь водопада:

Загрузка Google Fonts с предварительным подключением к fonts.gstatic.com

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

    

Google Fonts теперь автоматически предоставляет инструкцию preconnect в фрагменте HTML.

Вспышка невидимого текста и свойство отображения шрифта #

Раньше мы не контролировали вспышку невидимого текста (FOIT) и вспышку нестилизованного текста (FOUT) во время загрузки шрифтов:

FOIT в действии - обратите внимание на отсутствующий текст навигационной панели на снимке экрана киноленты (регулирование до медленного 3G).

Установка свойства font-display в объявлении @ font-face в нашем CSS дает нам этот контроль.Разные люди по-разному относятся к FOIT (вспышка невидимого текста) и FOUT (вспышка нестилизованного текста). По большей части мы предпочитаем отображать текст как можно быстрее, даже если это означает неприятный переход к нашему предпочтительному шрифту после его загрузки. Для контента с сильным брендом вы можете не использовать FOIT, а не показывать небрендовые шрифты.

Если вас устраивает FOUT или мигание нестилизованного текста, то мы можем исправить FOIT, добавив font-display: swap; в объявления @ font-face .Моника Динкулеску создала забавную игровую площадку для Glitch, чтобы продемонстрировать все варианты шрифтов и дисплеев . В прошлый раз, когда я проверял, ссылка была неработающей, но эта удобная диаграмма из ее сообщения помогает нам понять эти варианты:

параметры font-display, изображение Моники Динкулеску

У нас нет контроля над объявлениями @ font-face в таблице стилей Google Fonts, но, к счастью, они добавили API для изменения font-display . Теперь он включен в сниппет по умолчанию:

  


Если вы хотите изменить отображение шрифта в устаревшем проекте, добавьте & display = swap в конец href вашей ссылки. Обязательно ознакомьтесь с другими полезными параметрами отображения шрифтов, такими как (необязательный) и резервный .

Самостоятельное размещение веб-шрифтов для полного контроля #

Google Fonts размещается в довольно быстрой и надежной сети доставки контента (CDN), так почему мы можем рассмотреть возможность размещения в нашей собственной CDN?

Помните, как у нас есть минимум 2 отдельных запроса к 2 разным хостам? Это делает невозможным использование мультиплексирования HTTP / 2 или подсказок ресурсов.

Во-вторых, хотя это бывает редко, если Google Fonts не работает, мы не получим наши шрифты. Если наш собственный CDN не работает, то, по крайней мере, мы постоянно ничего не доставляем нашим пользователям, верно? 🤷🏻️

Обратите внимание, что самостоятельное размещение шрифтов не обязательно приведет к ускорению загрузки, если только ваши ресурсы не размещены в CDN. Многие провайдеры упрощают это, например Netlify, где размещен этот сайт. Перед тем, как перейти на Netlify, я использовал AWS S3 и Cloudfront, которые требуют дополнительной настройки.

Чтобы иметь полный контроль над нашими файлами шрифтов, загрузкой и свойствами CSS, мы можем самостоятельно разместить наши шрифты Google.К счастью, Марио Ранфтл создал google-webfonts-helper, который помогает нам в этом! Это замечательный инструмент для предоставления нам файлов шрифтов и объявлений шрифтов на основе выбранных вами шрифтов, кодировок, стилей и поддержки браузера.

Считаете ли вы этот пост полезным? Если да, подпишитесь на мою рассылку, чтобы получать уведомления о новых сообщениях!

Используйте google-webfonts-helper, чтобы загрузить наши шрифты и предоставить базовые объявления шрифтов CSS #

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

Шаг 1. Выберите шрифт.

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

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

Различные шрифты имеют разные уровни поддержки символов и варианты стилей.Например, Open Sans поддерживает намного больше кодировок, чем Muli:

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

Ваш окончательный выбор - какие браузеры вы хотите поддерживать. «Современные браузеры» предоставят вам форматы WOFF и WOFF2, а «Лучшая поддержка» также предоставит вам TTF, EOT и SVG. Для нашего варианта использования мы решили размещать только WOFF (caniuse) и WOFF2 (caniuse) при выборе системных шрифтов в качестве резервных для браузеров старше IE9. Работайте со своей командой дизайнеров, чтобы выбрать лучший вариант для вас.

Выберите «Лучшая поддержка» для всех форматов файлов или «Современные браузеры» только для WOFF и WOFF2.

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

Наконец, загрузите файлы. Разархивируйте их и поместите в свой проект в подходящее место.

Оптимизация нагрузки: предварительная нагрузка и другие опции #

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

Как использовать предварительную загрузку для более быстрой загрузки шрифтов #

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

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

Как только мы узнаем, что нам определенно нужен определенный шрифт на странице, мы можем предварительно загрузить его с помощью предзагруженного подсказки ресурса :

Preload - это декларативная выборка, позволяющая заставить браузер делать запрос ресурса, не блокируя событие загрузки документа.

- из «Предварительная загрузка, предварительная выборка и приоритеты в Chrome» Адди Османи

Предупреждение : Прежде чем мы продолжим, убедитесь, что вы понимаете, что preload загрузит ресурс независимо от того, используете вы его или нет. Предварительно загружайте только те ресурсы, которые необходимы на определенной странице, и ограничивайте количество предварительно загружаемых ресурсов.

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

В свой HTML-файл добавьте подсказки ресурсов для файлов шрифтов WOFF2, которые вам нужны для текущей страницы:

  <ссылка 
rel = "preload"
as = "font"
type = "font / woff2"
href = "./ fonts / muli-v12-latin-regular.woff2"
crossorigin
/>

Давайте разберем нашу предварительную загрузку element:

  • rel = "preload" сообщает браузеру декларативно извлекать ресурс, но не «выполнять» его (наш CSS будет использовать очередь).
  • as = "font" сообщает браузеру, что он будет загружать, чтобы он мог установить соответствующий приоритет. Без него браузер установил бы низкий приоритет по умолчанию.
  • type = "font / woff2 сообщает браузеру тип файла, поэтому он загружает ресурс только в том случае, если он поддерживает этот тип файла.
  • crossorigin требуется, потому что шрифты выбираются с использованием анонимного режима CORS.

Итак, как мы это сделали? Давайте посмотрим на выступление до и после.Используя webpagetest.org в простом режиме (Moto G4, Chrome, медленный 3G), наш индекс скорости составил 4,147 с при использовании только предварительного подключения и 3,388 с при использовании собственного хостинга и предварительной загрузки. Водопады для каждого показывают, как мы экономим время, играя с задержкой:

Загрузка из Google с предварительным подключением к fonts.gstatic.com Самостоятельный хостинг шрифтов и использование предварительной загрузки

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

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

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

Вообще говоря, держите ваши предварительные нагрузки ниже 4-5, а желательно даже ниже. Вы можете выбрать только предварительную загрузку наиболее часто используемых стилей и наборов символов (например, вес 400 и латиницу для большинства веб-сайтов, написанных на английском языке), а затем позволить браузеру обрабатывать логику для остальных, имея подмножества без предварительной загрузки. Свойство unicode-range в объявлении начертания шрифта сообщает браузеру, какие символы включены в конкретный файл или подмножество:

  
@ font-face {
font-family: "Open Sans";
стиль шрифта: нормальный;
font-weight: 400;
src: local ("Open Sans Regular"), local ("OpenSans-Regular"), url (https: // fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2) формат ("woff2"); Диапазон Unicode
: U + 0000-00FF, U + 0131, U + 0152-0153, U + 02BB-02BC, U + 02C6, U + 02DA, U + 02DC, U + 2000-206F, U + 2074, U + 20AC, U + 2122, U + 2191, U + 2193, U + 2212, U + 2215, U + FEFF, U + FFFD;
}

Какие у меня есть варианты, если я не буду предварительно загружать? #

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

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

Не рекомендую делать это вручную. Ознакомьтесь с разделом «Извлечь критический CSS» от Милицы Михайлии, чтобы ознакомиться с этой техникой и различными доступными инструментами.

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

Использовать дополнительный шрифт для автоматизации некоторых шагов #

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

Вы поклонник Гэтсби? Для этого есть даже плагин подшрифтов.

🚀 День 3 #devAdvent: SubFont, автор @_munter_!

Существуют передовые методы повышения производительности загрузки шрифтов, которые могут сократить время загрузки на секунды. С помощью Subfont Питер автоматизировал весь процесс. Раньше я делал много этого вручную, теперь это быстро, как npm i! Https: //t.co/yukja6AqsX pic.twitter.com/hgjLWa6cn9

- Сара Драснер (@sarah_edo) 3 декабря 2018 г.

Дополнительно Соображения #

Размещать статические ресурсы на CDN #

Одна вещь, которую предлагает Google Fonts, - это быстрая и надежная сеть доставки контента (CDN).Вы также должны разместить свои статические ресурсы в CDN для более быстрой доставки пользователям в разных регионах. Мы используем AWS S3 плюс Cloudfront, сервис CDN, предлагаемый Amazon, и Netlify, который использует AWS и Google Cloud Platform за кулисами таким же образом, но существует множество вариантов.

Размер

и популярные шрифты #

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

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

—из «Оптимизация веб-шрифтов» Ильи Григорика

Раньше мы говорили, что очень популярные шрифты, такие как Open Sans и Roboto, могут существовать в кеше ваших пользователей. К сожалению, общий кеш отсутствует во всех основных браузерах (и какое-то время отсутствовал в Safari) из-за безопасности. Было спорно, сколько пользы мы получили от этого в первую очередь.

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

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

Ресурсы, которые стоит оформить заказ #

Был ли этот пост полезен для вас? 💕 Хотите выразить свою признательность? Купи мне кофе на Github Sponsors или Ko-fi.

WebPerf
Шрифты
Популярный

Привет, я Сиа.

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

Найми меня

шрифтов HTML

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

В этом руководстве основное внимание уделяется:

  • Тег
  • Тег
  • Разные шрифты
  • Переход на CSS

Тег

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

Атрибуты тега

  • size - принимает числовое значение (1 (наименьшее) - 7 (наибольшее)), определяющее размер текста.
  • face - определяет шрифт текста. Множество возможных значений, включая Times New Roman, Georgia и Courier New.
  • color - определяет цвет текста с именем цвета, шестнадцатеричным значением или значением RGB.

Пример:

Текст с размером шрифта 5

Зеленый текст, размер шрифта 4, шрифт Georgia

Мелкий серый текст с условным обозначением

Выход:

Текст шрифтом 5

Зеленый текст, размер шрифта 4, шрифт Georgia

Маленький серый текст Arial

Тег устарел.Вместо этого следует использовать CSS.

Тег

Тег может использоваться для определения общего вида текста на веб-странице. Его следует разместить сразу после тега .

ПРИМЕЧАНИЕ: Тег имеет те же атрибуты, что и тег .

Пример:



Базовый шрифт

Этот текст будет размером 5, иметь
Verdana и будет синим

Результат:

Этот текст будет размером 5, иметь
Verdana и будет синим

ПРИМЕЧАНИЕ: Если вы укажете список шрифтов с атрибутом face , как в приведенном выше примере, веб-браузер посетителя будет использовать первый шрифт в списке, доступном на компьютере посетителя.Это означает, что если кто-то просматривает веб-страницу и его компьютер не поддерживает первый указанный вами шрифт, браузер будет пробовать второй шрифт и так далее, пока не доберется до поддерживаемого шрифта. Это относится к тегу , а также к тегу .

Тег :

  • Без закрывающего тега.
  • устарело. (Вместо этого следует использовать CSS)
  • Следует использовать только один раз в документе HTML
  • Не влияет на текст в заголовках, таблицах или текст в тегах

Различные шрифты

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

Пример распространенных шрифтов:

Этот текст набран шрифтом Arial

Этот текст набран шрифтом Comic Sans MS.
(ПРИМЕЧАНИЕ : Шрифт Comic Sans MS не одобряется)

Этот текст набран шрифтом Courier New.

Этот текст набран шрифтом 'Georgia'


Этот текст набран шрифтом Lucida Console.

Этот текст набран шрифтом Tahoma


Этот текст набран шрифтом Times New Roman.

Этот текст набран шрифтом Trebuchet MS

Этот текст набран шрифтом Verdana

Этот текст набран шрифтом MS Serif

Вывод:

Этот текст набран шрифтом Arial.
Этот текст набран шрифтом Comic Sans MS.
(ПРИМЕЧАНИЕ : Шрифт Comic Sans MS не одобряется)
Этот текст набран шрифтом Courier New.
Этот текст набран шрифтом "Джорджия".
Этот текст набран шрифтом Lucida Console.
Этот текст набран шрифтом Tahoma.
Этот текст набран шрифтом Times New Roman.
Этот текст набран шрифтом Trebuchet MS.
Этот текст набран шрифтом Verdana.
Этот текст набран шрифтом MS Serif

.

Переход на CSS

Тег и тег устарели.

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

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

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

Если вы хотите сразу перейти к стилизации шрифтов с помощью CSS, прочтите нашу страницу свойств шрифтов CSS.

Лучшие безопасные веб-шрифты с поддержкой HTML и CSS для использования в 2021 году

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

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

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

Включены эти веб-безопасные шрифты CSS:

Arial
Courier New
Georgia
Times New Roman
Verdana

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

Некоторые из новых шрифтов CSS, которые считаются популярными, включают:

Open Sans
Roboto
Lato
Helvetica
Montserrat

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

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

Следует ли использовать безопасные веб-шрифты?

Короче говоря, каждый веб-сайт, который вы видите сегодня в сети, скорее всего, уже использует веб-безопасный шрифт css. Это сделано для того, чтобы Times New Roman не отображался в чьем-либо браузере Internet Explorer, если у него старый компьютер или если у него плохое соединение и он не может загружать веб-шрифты из Typekit.Также есть проблемы с разными операционными системами. Посетители не обязательно знают, какой шрифт вы выбрали, потому что большинство людей не смотрят исходный код, чтобы понять, почему все внезапно стало шрифтом Times New Roman.

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

Электронная почта и веб-шрифты

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

Apple Mail
iOS Mail
Android Mail
Outlook 2000
Приложение Outlook.com

Вы можете использовать разные методы для создания писем с веб-шрифтами.Например, метод @Import позволяет импортировать шрифты Google и Typekit в электронное письмо с помощью фрагмента кода.

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

Вы также можете попробовать метод font-family, который наименее успешен.

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

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

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

Вот несколько различных наборов шрифтов на выбор в Интернете:

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

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

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

MyFonts
Font Spring
Font Shop
Тип процесса Литейный
Коммерческий тип

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

Не забудьте проверить свои шрифты

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

Правильное использование веб-шрифтов

Хотя вы можете установить шрифт Google довольно быстро, вы можете не знать, когда использовать веб-шрифты. Важно, чтобы везде, где у вас есть семейство шрифтов, использующее веб-шрифт, вы также указывали шрифт по умолчанию или веб-шрифт.Это может просто означать, что вы указываете «семейство шрифтов: Montserrat, Arial, Sans Serif»; в коде. Хотя компьютер сначала попытается загрузить веб-шрифт Montserrat, по умолчанию он будет использовать Arial в качестве веб-шрифта.

Длинный список лучших безопасных веб-шрифтов

«без засечек»: обычные шрифты

без засечек

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

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

Arial Black (без засечек)

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

Helvetica (без засечек)

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

Verdana (без засечек)

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

Trebuchet MS (без засечек)

Этот шрифт без засечек был разработан Винсентом Коннаром для корпорации Microsoft в 1996 году.Этот шрифт чаще всего используется в основном тексте в Интернете и является очень популярным шрифтом для этой цели.

Gill Sans (без засечек)

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

Noto Sans (без засечек)

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

Optima (без засечек)

Как и Gill Sans, Optima - это гуманистический шрифт с органическими рукописными качествами. Шрифт напоминает древнеримский текст и придает королевский вид любой веб-странице. Это один из самых популярных шрифтов в своем роде, который широко используется для логотипов и названий.

Arial Narrow (без засечек)

Arial Narrow - один из самых популярных шрифтов благодаря своей универсальности. Его намеренно общий дизайн делает этот шрифт хорошим выбором для больших объемов текста. Поскольку семейство шрифтов Arial доступно на Mac и Windows, вам не придется беспокоиться о визуальных несоответствиях между операционными системами.

‘serif’: обычные шрифты

с засечками

раз (с засечками)

Шрифт

Times - традиционный шрифт для газетной печати.Один из самых узнаваемых шрифтов в мире.

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

Time New Roman - самый популярный шрифт с засечками и то же самое, что Arial по отношению к семейству шрифтов san-serif. Times New Roman, используемая в основном на устройствах и в приложениях Windows, представляет собой обновленную версию шрифта Times.

Didot (с засечками)

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

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

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

Палатино (с засечками)

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

Книжник (с засечками)

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

New Century Schoolbook (с засечками)

Как следует из названия, New Century Schoolbook - это шрифт с засечками, созданный специально для основного текста.Гарнитура довольно ностальгическая, поскольку она встречается во многих учебниках для начинающих. Как и Bookman, New Century Schoolbook - хороший выбор шрифта для больших объемов текста.

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

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

«моноширинный»: шрифты фиксированной ширины

Andale Mono (моноширинный)

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

Courier New (моноширинный)

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

Courier (моноширинный)

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

FreeMono (моноширинный)

FreeMono - менее известный моноширинный шрифт, который является частью проекта GNU FreeFont. Как и моноширинные шрифты, описанные выше, этот шрифт напоминает пишущий на машинке текст и имеет механическое качество. Как следует из названия, это совершенно бесплатно.

‘cursive’: шрифты, имитирующие почерк.

Comic Sans MS (курсив)

Comic Sans - это шрифт, который люди любят ненавидеть.Это шрифт типа «не относись к себе слишком серьезно». Немного веселья. Но если вы серьезно относитесь к дизайну, не используйте его, ха-ха!

Apple Chancery (курсив)

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

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

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

Brush Script MT (курсив)

Brush Script MT - еще один каллиграфический шрифт, основанный на случайном почерке. Шрифт немного более формальный, чем у Bradley Hand, но все же сохраняет личные качества. Его смелый и уникальный стиль делает его обычным шрифтом для логотипов.

«фэнтези»: декоративные шрифты, для заголовков и т. Д.

Удар (фантазия)

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

Luminari (фэнтези)

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

Chalkduster (фэнтези)

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

Jazz LET (фэнтези)

Jazz LET - это шрифт, вызывающий в воображении образы Великого Гэтсби. Этот шрифт - отличный способ вызвать рев 20-х годов на веб-странице. Как и Chalkduster, это жирный и подробный шрифт, который лучше всего подходит для короткого текста и заголовков.

Blippo (фэнтези)

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

Stencil Std (фантазия)

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

Маркер Felt (фэнтези)

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

Траттателло (фэнтези)

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

Следующие две вкладки изменяют содержимое ниже.

Меня зовут Джейми Спенсер, и я потратил последние 10 лет на зарабатывание денег на создание блогов. После того, как я устал от 9-5, ездил на работу и никогда не видел свою семью, я решил, что хочу внести некоторые изменения, и запустил свой первый блог. С тех пор я запустил множество успешных нишевых блогов и после продажи своего блога выживальщика решил научить других делать то же самое.

советов по предварительной загрузке для веб-шрифтов

7 августа 2015 г.

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

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

Загрузка веб-шрифтов дождитесь загрузки файлов HTML и CSS. В этом примере время рендеринга увеличивается примерно до 700 мс.

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

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

Увеличение использования веб-шрифтов с 2012 по 2015 год. Источник: HTTP-архив.

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

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

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

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

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

  
  

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

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

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

Теперь о плохих новостях: спецификация предварительной загрузки все еще находится в стадии разработки и в настоящее время не реализована ни в одном браузере. Другие связанные функции, такие как CSS загрузка шрифта API и свойство font-display, позволят веб-разработчикам имитировать некоторые преимущества подсказок предварительной загрузки.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *