Шрифты для html и css: Красивые шрифты от Google Web Fonts

Содержание

CSS-шрифты

Шрифт в CSS — это ресурс, содержащий визуальное представление символов. На самом простом уровне он содержит информацию, которая сопоставляет коды символов с фигурами (называемые глифами), представляющие эти символы.

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

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

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

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

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

Базовые свойства CSS-шрифтов

1. Семейство шрифтов: свойство font-family

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

Если в названии шрифта имеются пробелы или символы (например, #, $, %), то оно заключается в кавычки. Это делается для того, чтобы браузер мог понять, где начинается и заканчивается название шрифта.

Свойство наследуется.

font-family
Значения:
family-name	Название (имя) семейства шрифтов, например, `Times`, `Courier`, `Arial`. Рекомендуется указывать вместе с базовым семейством.
generic-family	Базовое семейство. CSS определяет пять базовых семейств шрифтов: Шрифты с засечками — Serif (Times New Roman, Times, Garamond, Georgia) Рубленые шрифты — Sans-serif (Helvetica, Geneva, Arial, Verdana, Trebuchet, Univers) Моноширинные шрифты — Monospace (Courier, Courier New, Andele Mono) Рукописные шрифты — Cursive (Comic Sans, Gabriola, Monotype Corsiva, Author, Zapf Chancery) Аллегорические шрифты (Western, Woodblock, Klingon)
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

font-family: "Times New Roman", Georgia, Serif;
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: inherit;
font-family: initial;

2. Насыщенность шрифта: свойство font-weight

Свойство font-weight задаёт насыщенность шрифта.

Свойство наследуется.

font-weight
Значения:
`normal`	Значение по умолчанию, устанавливает нормальную насыщенность шрифта. Эквивалентно значению насыщенности, равной 400.
`bold`	Делает шрифт текста полужирным. Эквивалентно значению насыщенности, равной 700.
`bolder`	Насыщенность шрифта будет больше, чем у предка.
`lighter`	Насыщенность шрифта будет меньше, чем у предка.
`100, 200, 300, 400, 500, 600, 700, 800, 900`	Значение 100 соответствует самому легкому варианту начертания шрифта, а 900 — самому плотному. При этом, эти числа не определяют конкретной плотности, т.е. 100, 200, 300 и 400 могут соответствовать одному и тому же варианту слабой насыщенности начертания шрифта; 500 и 600 — средней насыщенности, а 700, 800 и 900 могут выводить одинаковое очень насыщенное начертание. Распределение плотности так же зависит от количества уровней насыщенности, определенных в конкретном семействе шрифтов.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

font-weight: normal;
font-weight: bold;
font-weight: lighter;
font-weight: bolder;
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
font-weight: inherit;
font-weight: initial;

Рис. 1. Свойство font-weight

3. Ширина шрифта: свойство font-stretch

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

Свойство наследуется.

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

font-stretch
Значения:
`ultra-condensed`	Указывает на наиболее сжатый шрифт.
`extra-condensed`	Указывает на второй по сжатости шрифт.
`condensed`	Указывает на сжатый шрифт.
`semi-condensed`	Указывает на немного сжатый шрифт.
`normal`	Значение по умолчанию.
`semi-expanded`	Слегка расширенный шрифт.
`expanded`	Расширенный шрифт.
`extra-expanded`	Второй по расширенности шрифт.
`ultra-expanded`	Максимально расширенный шрифт.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;
font-stretch: inherit;
font-stretch: initial;

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

Рис.

2. Свойство font-stretch

4. Начертание шрифта: свойство font-style

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

Свойство наследуется.

font-style
Значения:
`normal`	Значение по умолчанию, устанавливает для текста обычное начертание шрифта.
`italic`	Выделяет текст курсивом.
`oblique`	Устанавливает наклонное начертание шрифта.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

font-style: normal;
font-style: italic;
font-style: oblique;
font-style: inherit;
font-style: initial;

Рис.

3. Свойство font-style

5. Размер шрифта: свойство font-size

Свойство font-size указывает желаемую высоту глифов из шрифта.

Свойство наследуется.

font-size
Значения:
absolute-size	`xx-small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`. В качестве стандартного размера принимается `medium`. В CSS1 предложенный коэффициент масштабирования между соседними индексами составлял 1.5, что для пользователя оказалось слишком большим. В CSS2 предложенный коэффициент масштабирования для экрана компьютера между смежными индексами составлял 1.2, что все еще создавало проблемы для небольших размеров. Новый коэффициент масштабирования варьируется между каждым индексом, чтобы обеспечить лучшую читаемость.
relative-size	`smaller`, `larger`. Относительные размеры обусловливают изменение размера шрифта элемента относительно родителя. При этом размер шрифта может выйти за рамки размеров, предполагаемых для `xx-small` и `xx-large`.
длина	Размер шрифта устанавливается с помощью положительных значений единиц длины, например, `px`, `em`, как целых, так и дробных.
`%`	Относительное значение, вычисляется на основании любого размера, унаследованного от родительского элемента. Обеспечивает более точную настройку вычисляемого размера шрифта. Задание размеров шрифта с помощью `em` эквивалентно процентному значению.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: smaller;
font-size: larger;
font-size: 14px;
font-size: 0. 8em;
font-size: 80%;
font-size: inherit;
font-size: initial;

Значения absolute-size
`xx-small`	`x-small`	`small`	`medium`	`large`	`x-large`	`xx-large`
Коэффициент масштабирования
3/5	3/4	8/9	1	6/5	3/2	2/1	3/1
HTML заголовки
h6		h5	h5	h4	h3	h2
HTML размер шрифта
1		2	3	4	5	6	7

6. Относительный размер шрифта: свойство font-size-adjust

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

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

Свойство font-size-adjust — способ сохранить читабельность текста при использовании резервных шрифтов. Это достигается путем настройки размера шрифта таким образом, чтобы x-height была одинаковой независимо от используемого шрифта.

Свойство наследуется.

Рис. 4. Термины в типографике

font-size-adjust
Значения:
`none`	Не сохраняет `x-height` шрифта.
число	Задает значение аспекта, используемое в приведенных ниже расчетах для расчета скорректированного размера шрифта: `c = (a / a ') s` где: `s` = значение размера шрифта `a` = значение аспекта, указанное в свойстве `font-size-adjust` `a '` = значение аспекта фактического шрифта `c` = скорректированный размер шрифта для использования Отрицательные значения недействительны.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис:

font-size-adjust: none;
font-size-adjust: 0.7;
font-size-adjust: inherit;
font-size-adjust: initial;

Как отображается текст в каждом из этих сравниваемых шрифтов, показано ниже, столбцы показывают текст, отображаемый в Verdana, Futura и Times. Одно и то же значение размера шрифта используется для ячеек в каждой строке, и для отображения различий по x-height включены красные линии. В верхней половине каждая строка отображается в том же значении размера шрифта. То же самое верно и для нижней половины, но в этой половине также устанавливается свойство font-size-adjust, чтобы фактический размер шрифта регулировался таким образом, чтобы сохранить x-height для каждой строки. Обратите внимание, что небольшой текст остается относительно разборчивым в каждой строке в нижней половине.

Рис. 5. Текст с использованием и без использования font-size-adjust

7. Сокращенная запись свойств шрифта: свойство font

Свойство font за исключением описанного ниже, является сокращенным свойством для установки font-style, font-variant, font-weight, font-stretch, font-size/line-height, font-family. Также могут быть включены значения для свойства font-variant, которые поддерживаются CSS 2.1 — normal или small-caps.

Все подсвойства свойства font сначала сбрасываются на свои начальные значения, включая перечисленные выше, плюс font-size-adjust, font-kerning, все подсвойства font-variant и настройки шрифтов, за исключением font-synthesis. Затем этим свойствам присваиваются те значения, которые указаны в свойстве font. Для свойства font-size-adjust невозможно установить значение, отличное от его начального значения, поэтому следует использовать вместо этого индивидуальное свойство. Если явное значение какого-либо свойства не нужно, то оно опускается.

Свойство наследуется.

Синтаксис

font: 12pt/14pt sans-serif;
font: 80% sans-serif;
font: x-large/110% "new century schoolbook", serif;
font: bold italic large Palatino, serif;
font: normal small-caps 120%/120% fantasy;
font: condensed oblique 12pt "Helvetica Neue", serif;

Следующие значения относятся к системным шрифтам:
caption — шрифт, используемый для элементов управления с субтитрами (например, кнопок, раскрывающихся списков и т.д.).
icon — шрифт, используемый для обозначения значков.
menu — шрифт, используемый в меню (например, раскрывающиеся меню и списки меню).
message-box — шрифт, используемый в диалоговых окнах.
small-caption — шрифт, используемый для маркировки подписи элементов управления.
status-bar — шрифт, используемый в строке состояния окна.

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

font: menu;        /* используются настройки шрифта для системных меню */
font: large menu;  /* используется семейство шрифтов под названием "menu" */

8. Управление синтезом шрифтов: свойство font-synthesis

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

Свойство наследуется.

font-synthesis
Значения:
`none`	Запрещает синтез начертаний.
`weight` и/или `style`	По умолчанию свойство принимает значение `font-synthesis: weight style;`. Если указано только `weight`, это говорит браузеру, что жирный шрифт может быть синтезирован при необходимости. Если только `style` — синтезируется только курсив.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

font-synthesis: none;
font-synthesis: weight;
font-synthesis: style;
font-synthesis: weight style;
font-synthesis: initial;
font-synthesis: inherit;

По материалам CSS Fonts Module Level 3

Как правильно подобрать шрифт для сайта

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

1. Сочетайте шрифты с засечками со шрифтами без засечек (sans serif и serif)

Самый популярный типографский прием – набор заголовка рубленым (без засечек) шрифтом, а текста – шрифтом с засечками. Это классическая комбинация, в ней почти невозможно ошибиться.
В примере ниже — типичный макет статьи, в заголовке использован Trade Gothic Bold No.2, а в тексте — Bell Gothic. Оба шрифта – рубленые, тем не менее, у них очень разные «личности». Хорошее правило при создании макета — не привлекать излишнее внимание читателя к виду шрифта. Trade Gothic предполагает серьезность, а Bell Gothic, наоборот – динамику и экспрессивность.

Сочетание этих шрифтов вызывает нежелательный дизайнерский конфликт. Trade Gothic хочет перейти прямо к фактам, а Bell Gothic хочет веселиться. Такое напряжение между шрифтами – не наша цель, его следует избегать.
Теперь рассмотрим пример справа. Bell Gothic заменён шрифтом Sabon. Sabon, как шрифт с засечками, очень хорошо работает с Trade Gothic. Они оба нацелены на ясность и читабельность благодаря хорошей высоте знаков x-height (грубо говоря, это высота строчной буквы x в шрифте, она определяет расстояние между базовой линией и верхней). Таким образом, у обоих шрифтов одна и та же цель, что создает прекрасное сочетание.

2. Избегайте шрифтов одного класса

Шрифты одного класса, но из разных семейств могут запросто вызвать разногласие при их комбинировании. Их ярко выраженные личности будут тянуть одеяло каждая на себя, в результате макет станет «грязным».
На примере внизу, слева, в заголовке использован шрифт Clarendon Bold, который относится к классу Slab serif. В теле статьи использован Officina Serif который также относится к Slab serif. Шрифты класса Slab serif отличаются ярко выраженным характером, им нравится доминировать на странице. Использование двух шрифтов класса Slab serif в одном месте может вызвать ненужное напряжение.

А теперь обратите внимание на правую сторону примера. Clarendon Bold в заголовке поставлен рядом с более нейтральным New Baskerville. New Baskerville относится к универсальному классу Transitional serif с широкими знаками, которые хорошо сочетаются с жирным Clarendon. Выбор шрифтов разных классов с самого начала избавит вас от головной боли при создании макета.

3. Присвойте шрифтам разные роли

Один из простых способов комбинации шрифтов, это составление ролевой дизайнерской схемы для каждого шрифта. В примере ниже мы использовали Akzidenz Grotesk Bold прописными для имени автора статьи. Для заголовка — Rockwell Bold. Вводный абзац и основной текст статьи в одном шрифте – Bembo, но разного размера. И, наконец, подзаголовок — Akzidenz Grotesk Medium.

Отчетливый Rockwell Bold мы оставили для привлечения внимания к заголовку. В целом использовали уже открытую нами схему сочетания рубленого шрифта и шрифта с засечками. И даже при таком выборе у нас большое количество вариаций по размеру, весу и функциям шрифтов. В общей сложности использовались 4 шрифта из 3-х гарнитур, все они привели к связанному, сплоченному дизайну, так как у каждого шрифта своя роль, четко определенная в типографической иерархии. Так что если сомневаетесь – распределите роли!

4. Контрастная насыщенность шрифтов

Самый лучший способ испортить макет – не разделить элементы текста друг от друга по их иерархии. Кроме использования разных размеров, убедитесь, что ваши шрифты разного веса (жирности), чтобы дать читателю «путеводитель» по вашему дизайну.
На примере слева у нас разные размеры шрифта, но недостаточный контраст по толщине. Myriad Light рядом с Minion Bold «пропадает» и теряет визуальный авторитет. Как бы то ни было, но глаз читателя должен в первую очередь выделять заголовок, а не превью.

Справа мы использовали Myriad Black над Minion нормальной толщины. Возможно, заголовок тяжеловат, но по крайней мере, у читателя не возникает сомнений по поводу того, что читать первым.

5. Создайте на странице различную тональность текста

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

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

6. Не смешивайте настроения шрифтов

Одна из частых ошибок – игнорирование присущего шрифту настроения. Шрифты имеют свою личность. Иногда настроение шрифта может меняться в зависимости от контекста, но несущественно. Одна проблема – неправильно подобрать шрифт для конкретной работы. Но еще большая проблема – составить два шрифта с разным настроением!
На примере слева мы соединили Franklin Gothic Bold и Souvenir. Общее впечатление от Franklin Gothic – мужество, сила, стойкость, но с налетом элегантности. Он не ублажающий взор, но очень функциональный. А Souvenir – игривый, легкомысленный, немного равнодушный, но очень симпатичный. Сочетание этих двух шрифтов подобно встрече гвардейца, охраняющего Букингемский дворец, и девочки. Гвардеец послушно игнорирует игривую девчонку у его ног, пытающуюся заставить его улыбнуться. Такое смешение плохо работает. Разное настроение шрифтов привлекает внимание к самим шрифтам, а не содержанию, что свидетельствует о слабом дизайне.

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

7. Сочетайте яркое с нейтральным

Чистый, читабельные типографский дизайн требует внимательного отношения к намеренному и непреднамеренному напряжению между шрифтами. Столкновение разных личностей шрифтов – это только одна причина ненужного напряжения. Если один из шрифтов имеет яркую личность, то второй должен быть нейтральным.
На примере слева Dax Bold стоит рядом с Bernhard Modern. Это плохой выбор хотя бы по двум соображениям. Во-первых, Dax имеет узкие знаки и большую x-height, в то время как Bernhard Modern, наоборот, при большой ширине глифов обладает одной из самых низких x-height среди популярных классических гарнитур. Во-вторых, Dax неформальный, современный и яркий. Идеально подходит при подачи текста технарям, компьютерщикам и вообще современной молодежи. Bernhard Modern, наоборот, классический, спокойный, рафинированный и даже немного личный. Объедините неподходящие физические характеристики шрифта с личностными, и получите очень плохо функционирующую типографику.

Взглянем на более удачный выбор. В правой колонке Dax Bold поставили рядом с Caslon, который относится к классу Old style, но был модернизирован и смягчен для лучшей сочетаемости с другими шрифтами. В данном контексте он выглядит удовлетворительно рядом с Dax. Заметьте, как в первую очередь мы видим личность Dax в заголовке, и как Caslon отступает назад и приглашает нас к чтению. В этом примере Caslon является нейтральным выбором для поддержки более яркого Dax.

8. Избегайте несоизмеримых сочетаний

Когда между выбранными шрифтами слишком большой контраст, это создает визуальный дисбаланс, что плохо отражается на всем дизайне. Слева мы поставили Antique Olive Nord – чрезвычайно жирный шрифт, — рядом с Garamond Narrow. Контрастный перебор очевиден. В большинстве подобных случаев, такой контраст идет дальше обычного привлечения внимания и вызывает ощущение неуклюжести. Следовательно, он не доносит до читателя смысла текста.

Справа Antique Olive Nord был заменен более мягким и сдержанным Antique Olive Bold. Garamond Narrow мог бы быть заменен на тот же Garamond в варианте book weight, но более хорошим выбором нам представляется Chaparral. У Chaparral более высокая x-height, чем у Garamond, и в общем у него более современный и нейтральный вид рядом с характерным Antique Olive Bold.

9. Будьте проще – не используйте более двух шрифтов

Вместо того, чтобы перелопачивать библиотеки шрифтов в поисках «того самого» сочетания, иногда лучше вернуться к классическому и гораздо более простому варианту – сочетанию шрифта с засечками и рубленого. На примере внизу мы составили четкую типографскую иерархию, добились разнообразия, получили интересную разбивку по тональности текста и его возрастающую читабельность. Все это было сделано с помощью всего двух шрифтов. Хотя, строго говоря, у нас здесь пять шрифтов: три Helvetica Neue и два Garamond.

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

10. Используйте различные размеры шрифта

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

Справа использовались те же два шрифта, но другого размера. TheMix Italic был значительно увеличен, в то время как New Century Schoolbook уменьшен до более нормального, хоть и все еще читабельного, размера. Использование шрифтов различных размеров помогает четко распределить иерархию и увеличить тоновое разнообразие в типографике.

В заключение

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

(Перевод Виктории Шидловской статьи Best Practices of Combining Typefaces из журнала Smashing Magazine (в ред. автора)

CSS: шрифти

Дивіться також покажчик усіх прийомів.

На цій сторінці:

Cімейства шрифтів

Після кольору шрифт, можливо, найважливіша властивість сторінки. На цій сторінці я не буду демонструвати ніяких «трюків», але покажу ряд варіацій шрифтів, допустимих в CSS.

Оскільки не всі шрифти доступні на всіх комп’ютерах (існують тисячі шрифтів і більшість з них не безкоштовні), CSS передбачає резервну систему. Першим ви вказуєте шрифт, який хотіли б використовувати. За ним йдуть будь-які шрифти, які ви могли б використовувати, якщо перший зазначений шрифт недоступний. А закінчити список ви повинні типовим шрифтом, який має 5 видів: serif, sans-serif, monospace, cursive та fantasy.

Наступна таблиця показує приклади різних шрифтів (ваш браузер може не знати їх всіх) і ви можете побачити, що ваш браузер робить з кожним з п’яти типових шрифтів:


‘sans-serif’: звичайні шрифти без засічок
`Arial, sans-serif`	На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
`Helvetica, sans-serif`	На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
`Verdana, sans-serif`	На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
`Trebuchet MS, sans-serif`	На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
`Gill Sans, sans-serif`	На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
`Noto Sans, sans-serif`	На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
`Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif`	На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
`Arial Narrow, sans-serif`	На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
`sans-serif`	На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
‘serif’: звичайні шрифти із засічками
`Times, Times New Roman, serif`	На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
`Georgia, serif`	На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
`Palatino, URW Palladio L, serif`	На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
`Bookman, URW Bookman L, serif`	На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
`New Century Schoolbook, TeX Gyre Schola, serif`	На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
`serif`	На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
‘monospace’: шрифти фіксованої ширини
`Andale Mono, monospace`	На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
`Courier New, monospace`	На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
`Courier, monospace`	На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
`FreeMono, monospace`	На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
`DejaVu Sans Mono, monospace`	На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
`monospace`	На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
‘cursive’: шрифти, що імітують почерк
`Comic Sans MS, Comic Sans, cursive`	На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
`Bradley Hand, cursive`	На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
`Brush Script MT, Brush Script Std, cursive`	На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
`Snell Roundhand, cursive`	На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
`cursive`	На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
‘fantasy’: декоративні шрифти, для назв і т. д. ..
`Impact, fantasy`	На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
`Luminari, fantasy`	На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
`Marker Felt, fantasy`	На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
`Trattatello, fantasy`	На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати
`fantasy`	На подушечці форми любої є й ґудзик щоб пір’я геть жовте сховати

Стилі шрифтів

Більшість шрифтів мають різноманітні стилі в межах одного і того ж шрифтового сімейства. Зазвичай це жирний стиль (bold) або курсив (italic), часто зустрічається також стиль «жирний курсив» (bold italic), менше — капітель (малі прописні літери — small-caps), а в ряді випадків — екстра-світлі/екстра-жирні або розтягнуті/стислі версії.

У таблиці нижче наведено кілька різних стилів. Багато з рядків будуть виглядати однаково, якщо у вас немає великої колекції шрифтів.

правило	serif	sans-serif
Стилі
`font-style: normal`	На подушечці…	На подушечці…
`font-style: italic`	На подушечці…	На подушечці…
`font-style: oblique`	На подушечці…	На подушечці…
Насиченість шрифту
`font-weight: 100`	На подушечці…	На подушечці…
`font-weight: 200`	На подушечці…	На подушечці…
`font-weight: 300`	На подушечці…	На подушечці…
`font-weight: normal`	На подушечці…	На подушечці…
`font-weight: 500`	На подушечці…	На подушечці…
`font-weight: 600`	На подушечці…	На подушечці…
`font-weight: bold`	На подушечці…	На подушечці…
`font-weight: 800`	На подушечці…	На подушечці…
`font-weight: 900`	На подушечці…	На подушечці…
Варіанти
`font-variant: normal`	На подушечці…	На подушечці…
`font-variant: small-caps`	На подушечці…	На подушечці…
Розтягування
`font-stretch: ultra-condensed`	На подушечці…	На подушечці…
`font-stretch: extra-condensed`	На подушечці…	На подушечці…
`font-stretch: condensed`	На подушечці…	На подушечці…
`font-stretch: semi-condensed`	На подушечці…	На подушечці…
`font-stretch: normal`	На подушечці…	На подушечці…
`font-stretch: semi-expanded`	На подушечці…	На подушечці…
`font-stretch: expanded`	На подушечці…	На подушечці…
`font-stretch: extra-expanded`	На подушечці…	На подушечці…
`font-stretch: ultra-expanded`	На подушечці…	На подушечці…

Модуль «Шрифти» в CSS має більше властивостей для вказівки спеціальних стилів (для шрифтів, які підтримують кілька варіантів), зокрема, властивість font-variant має набагато більше значень.

Навігація по сайту

Учебник CSS 3. Статья «Работа со шрифтами в CSS»

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

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

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

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

p {
font-family : Courier; /* устанавливаем тип шрифта – Courier */
}

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

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

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

Давайте рассмотрим следующий пример:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Свойство font-family</title>
<style> 
.times {
font-family: "Times New Roman", serif; /* определяем основной шрифт "Times New Roman", альтернативный  serif (с засечками)*/
}
.courier {
font-family: Courier, monospace; /* определяем основной шрифт "Courier", альтернативный monospace (семейство моноширинных шрифтов) */
}
</style>
</head>
	<body>
		<p class = "times">Параграф, отображаемый шрифтом "Times New Roman".</p>
		<p class = "courier">Параграф, отображаемый шрифтом "Courier".</p>
	</body>
</html>

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

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

Результат нашего примера:

Рис. 34 Пример использования свойства font-family.

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

sans-serif (без засечек)
Семейство шрифта (font-family)	Пример
Arial, Helvetica, sans-serif	Съешь же еще этих сочных мандаринов.
«Arial Black», Gadget, sans-serif	Съешь же еще этих сочных мандаринов.
«Comic Sans MS», cursive, sans-serif	Съешь же еще этих сочных мандаринов.
Impact, Charcoal, sans-serif	Съешь же еще этих сочных мандаринов.
«Lucida Sans Unicode», «Lucida Grande», sans-serif	Съешь же еще этих сочных мандаринов.
Tahoma, Geneva, sans-serif	Съешь же еще этих сочных мандаринов.
«Trebuchet MS», Helvetica, sans-serif	Съешь же еще этих сочных мандаринов.
Verdana, Geneva, sans-serif	Съешь же еще этих сочных мандаринов.

sans, sans serif и т.д.

Каскадные таблицы стилей предоставляют целый ряд свойств шрифтов, которые непосредственно влияют на отображение текста. Свойство CSS font family определяет, какое семейство шрифтов использовать.

Базовый список CSS шрифтов делится по 5 типам:

sans-serif — это шрифты, которые имеют небольшие засечки на окончаниях линий каждого символа;
serif;
monospace;
cursive;
fantasy;

cursive и fantasy никогда не используются.

Поскольку свойство CSS font family наследуется всеми дочерними элементами HTML, — можно применить шрифт ко всей веб-странице, задав его для элемента <body>.

body{ font-family: sans-serif;}

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

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

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

body{ font-family: Arial;}

Для веб-страницы будет использоваться CSS font family Arial, но при условии, что он установлен на компьютере пользователя. Иначе будет использоваться заданный по умолчанию для браузера шрифт типа serif (как правило, это Times).

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

Есть 9 надежных веб-шрифтов:

Arial;
Arial Black;
Comic Sans MS;
Courier New;
Georgia;
Impact;
Times New Roman;
Trebuchet MS;
Verdana.

Для свойства font-family также можно задать альтернативные значения, прописав список семейств шрифтов:

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

В этом примере мы указываем браузеру искать первое значение CSS font family Arial и использовать его. Если этот шрифт недоступен, программа будет использовать Verdana. И, наконец, если он не доступен, то будет использовать шрифт по умолчанию sans-serif.

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

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

Данная публикация представляет собой перевод статьи «Choosing a font» , подготовленной дружной командой проекта Интернет-технологии.ру

font | htmlbook.ru

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Значение по умолчанию	Зависит от использования
Наследуется	Да
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/fonts.html#propdef-font

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

Синтаксис

font: [font-style||font-variant||font-weight] font-size [/line-height] font-family | inherit

Значения

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

inherit: Наследует значение родителя.

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

caption: Шрифт для текста элементов форм вроде кнопок.
icon: Шрифт для текста под иконками.
menu: Шрифт применяемый в меню.
message-box: Шрифт для диалоговых окон.
small-caption: Шрифт для подписей к небольшим элементам управления.
status-bar: Шрифт для строки состояния окон.

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

p { font: 12pt/10pt sans-serif; }

Из типографики пошла запись указывать через слэш размер шрифта и межстрочное расстояние (интерлиньяж). Поэтому 12pt в данном случае означает размер основного текста в пунктах, а 10pt — интерлиньяж. В качестве семейства указывается рубленый шрифт (sans-serif).

p { font: bold italic 110% serif; }

Значение bold устанавливает жирное начертание текста, а italic — курсивное. В данном случае их порядок не важен, поэтому bold и italic можно поменять местами. Размер текста задается в процентах, а в качестве гарнитуры используется шрифт с засечками (serif).

p { font: normal small-caps 12px/14px fantasy; }

Значение small-caps принадлежит свойству font-variant и устанавливает текст в виде капители (заглавные буквы уменьшенного размера). Значение normal применяется сразу к двум свойствам: font-style и font-weight.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>font</title>
  <style>
   .layer1 {
    font: 12pt sans-serif;  
   } 
   h2 {
    font: 200% serif;
   }
  </style>
 </head>
 <body> 
  <div>
  <h2>Duis te feugifacilisi</h2>
  Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel 
  illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio 
  dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te 
  feugat nulla facilisi.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства font

Объектная модель

[window.]document.getElementById(«elementID»).style.font

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

15 лучших веб-безопасных шрифтов HTML и CSS в 2021 году

Home
Testing
- - Back
  - Agile Testing
  - BugZilla
  - Cucumber
  - Database Testing
  - Database Testing
  - Testing
  - Назад
  - JUnit
  - LoadRunner
  - Ручное тестирование
  - Мобильное тестирование
  - Mantis
  - Почтальон
  - QTP
  - Назад
  - Центр качества SAP
  - SoapUI
  - Управление тестированием
  - TestLink

SAP

- Назад
- ABAP
- APO
- Начинающий
- Basis
- BODS
- BI
- BPC
- CO
- Назад
- CRM
- Crystal Reports
- QM4000
- QM4
- Заработная плата
- Назад
- PI / PO
- PP
- SD
- SAPUI5
- Безопасность
- Менеджер решений
- Successfactors
- Учебники SAP

Обязательно учите!

Назад
Бухгалтерский учет
Алгоритмы
Android
Блокчейн
Бизнес-аналитик
Создание веб-сайта
Облачные вычисления
COBOL
000 Назад
0003 Компилятор

Основные стили текста и шрифтов — Изучение веб-разработки

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

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

Как вы уже испытали в своей работе с HTML и CSS, текст внутри элемента размещается внутри поля содержимого элемента. Он начинается в левом верхнем углу области содержимого (или в правом верхнем углу в случае содержимого на языке RTL) и течет к концу строки. Достигнув конца, он переходит к следующей строке и продолжается, затем к следующей строке, пока все содержимое не будет помещено в коробку. Текстовое содержимое эффективно ведет себя как последовательность встроенных элементов, размещаемых на строках, смежных друг с другом, и не создает разрывов строк до тех пор, пока не будет достигнут конец строки или если вы не принудительно разорвете строку вручную с помощью элемент.

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

Свойства CSS, используемые для стилизации текста, обычно делятся на две категории, которые мы рассмотрим отдельно в этой статье:

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

Примечание : помните, что текст внутри элемента затрагивается как один объект. Вы не можете выделять и стилизовать части текста, если вы не заключите их в соответствующий элемент (например, или ) или не используете псевдоэлемент для текста, например :: first-letter (выбирает первую букву текста элемента), :: first-line (выбирает первую строку текста элемента) или :: selection (выбирает текст, выделенный курсором в данный момент.)

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

    Кот Томми  

 Хорошо, я помню это, как будто это был обед назад ... 

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

Готовый пример можно найти на GitHub (см. Также исходный код).

Color

Свойство color устанавливает цвет содержимого переднего плана выбранных элементов (обычно это текст, но может также включать пару других вещей, таких как подчеркивание или наложение, помещенное в текст с помощью свойства text-decoration ).

color может принимать любую цветовую единицу CSS, например:

  п {
  красный цвет;
}

Это приведет к тому, что абзацы станут красными, а не стандартным черным по умолчанию в браузере, например:

    Кот Томми  

 Хорошо, я помню это, как будто это был обед назад ... 

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

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

Чтобы установить другой шрифт для текста, вы используете свойство font-family — это позволяет вам указать шрифт (или список шрифтов), который браузер будет применять к выбранным элементам.Браузер применит шрифт только в том случае, если он доступен на компьютере, с которого осуществляется доступ к веб-сайту; в противном случае будет использоваться шрифт браузера по умолчанию. Простой пример выглядит так:

  п {
  семейство шрифтов: arial;
}

Это заставит все абзацы на странице использовать шрифт arial, который можно найти на любом компьютере.

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

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

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

Список реальных веб-безопасных шрифтов будет меняться по мере развития операционных систем, но разумно считать следующие веб-шрифты безопасными, по крайней мере, на данный момент (многие из них были популяризированы благодаря Microsoft Core fonts for the Web инициативы в конец 90-х — начало 2000-х):

Имя	Общий тип	Банкноты
Arial	без засечек	Часто считается лучшей практикой также добавить Helvetica в качестве предпочтительной альтернативы Arial , поскольку, хотя их начертания шрифта почти идентичны, Helvetica имеет более красивую форму, даже если Arial более широко доступен .
Courier New	моноширинный	В некоторых операционных системах есть альтернативная (возможно, более старая) версия шрифта Courier New под названием Courier . Рекомендуется использовать оба варианта с Courier New в качестве предпочтительной альтернативы.
Грузия	с засечками
Times New Roman	с засечками	В некоторых операционных системах есть альтернативная (возможно, более старая) версия шрифта Times New Roman под названием Times .Рекомендуется использовать оба варианта с Times New Roman в качестве предпочтительной альтернативы.
Требушет MS	без засечек	Будьте осторожны с этим шрифтом — он не широко доступен в мобильных ОС.
Вердана	без засечек

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

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

Шрифты по умолчанию

CSS
определяет пять общих имен для шрифтов: serif , sans-serif , monospace , cursive и fantasy .Они очень общие, и точное начертание шрифта, используемое при использовании этих общих имен, зависит от каждого браузера и может отличаться для каждой операционной системы, в которой они работают. Он представляет собой наихудший сценарий , когда браузер будет делать все возможное, чтобы предоставить хотя бы шрифт, который выглядит подходящим. serif , sans-serif и monospace вполне предсказуемы и должны дать что-то разумное. С другой стороны, cursive и fantasy менее предсказуемы, и мы рекомендуем использовать их очень осторожно, тестируя в процессе.
Пять имен определены следующим образом:
Срок Определение Пример
с засечками Шрифты с засечками (завитки и другие мелкие детали, которые вы видите на концах штрихов в некоторых гарнитурах) Мой большой красный слоник
без засечек Шрифты без засечек. Мой большой красный слоник
моноширинный Шрифты, в которых все символы имеют одинаковую ширину, обычно используются в листингах кода. Мой большой красный слоник
курсив Шрифты, имитирующие почерк, с плавными соединенными штрихами. Мой большой красный слоник
фэнтези Шрифты, предназначенные для украшения. Мой большой красный слоник
Наборы шрифтов
Поскольку вы не можете гарантировать доступность шрифтов, которые хотите использовать на своих веб-страницах (даже веб-шрифт может по какой-то причине выйти из строя ), вы можете предоставить стек шрифтов , чтобы в браузере было несколько шрифтов, которые он мог Выбери из.Это включает значение font-family , состоящее из нескольких имен шрифтов, разделенных запятыми, например
п { семейство шрифтов: "Trebuchet MS", Verdana, sans-serif; }
В таком случае браузер запускается с начала списка и проверяет, доступен ли этот шрифт на машине. Если это так, он применяет этот шрифт к выбранным элементам. Если нет, он переходит к следующему шрифту и так далее.
Рекомендуется указать подходящее общее имя шрифта в конце стека, чтобы, если ни один из перечисленных шрифтов не доступен, браузер мог по крайней мере предоставить что-то приблизительно подходящее.Чтобы подчеркнуть этот момент, абзацам присваивается шрифт с засечками по умолчанию браузера, если другой вариант недоступен — обычно это Times New Roman — это не подходит для шрифта без засечек!
Примечание : Названия шрифтов, состоящие из нескольких слов, например Trebuchet MS , необходимо заключать в кавычки, например «Trebuchet MS» .
Пример семейства шрифтов
Давайте добавим к нашему предыдущему примеру, придав абзацам шрифт без засечек:
п { красный цвет; семейство шрифтов: Helvetica, Arial, sans-serif; }
Это дает нам следующий результат:
Кот Томми Хорошо, я помню это, как будто это был обед назад... Сказал Кот Томми, откинувшись назад, чтобы убрать посторонние предметы может проникнуть в его могучую глотку. Многие жирные крысы переулки встретил свою кончину, глядя в упор в пещеристую бочку эта офигенная машина рыщет. Поистине чудо природы этот городской хищник - кот Томми мог рассказать много историй. Но это был редкий случай, подобный этому, что он сделал.
Размер шрифта
В статье о значениях и единицах CSS нашего предыдущего модуля мы рассмотрели единицы длины и размера.Размер шрифта (установленный с помощью свойства font-size ) может принимать значения, измеряемые в большинстве этих единиц (и других, таких как проценты), однако наиболее распространенные единицы, которые вы будете использовать для изменения размера текста:
пикселей (пикселей): количество пикселей в высоту, на которое должен быть текст. Это абсолютная единица — она дает одно и то же окончательное вычисленное значение шрифта на странице практически в любой ситуации.
em s: 1 em равно размеру шрифта, установленному в родительском элементе текущего элемента, который мы стилизуем (точнее, ширине заглавной буквы M, содержащейся внутри родительского элемента.Это может быть сложно решить, если у вас много вложенных элементов с разными размерами шрифта, но это выполнимо, как вы увидите ниже. Зачем беспокоиться? Это вполне естественно, когда вы к этому привыкнете, и вы можете использовать em для изменения размера всего, а не только текста. У вас может быть весь веб-сайт размером em , что упрощает обслуживание.
rem s: они работают так же, как em , за исключением того, что 1 rem равен размеру шрифта, установленному в корневом элементе документа (т.е.е. ), а не родительский элемент. Это значительно упрощает математические вычисления для определения размеров шрифта, хотя, если вы хотите поддерживать действительно старые браузеры, у вас могут возникнуть проблемы — rem не поддерживается в Internet Explorer 8 и ниже.
Размер шрифта элемента наследуется от родительского элемента этого элемента. Все это начинается с корневого элемента всего документа — — размер шрифта из которых установлен на 16 пикселей по умолчанию для всех браузеров.Любой абзац (или другой элемент, размер которого не установлен в браузере) внутри корневого элемента будет иметь окончательный размер 16 пикселей . Другие элементы могут иметь другие размеры по умолчанию, например, элемент
имеет размер 2 em , установленный по умолчанию, поэтому он будет иметь окончательный размер 32 пикселей .
Все становится сложнее, когда вы начинаете изменять размер шрифта вложенных элементов. Например, если у вас на странице есть элемент
, и установите для него размер шрифта равным 1.5 em (который будет вычисляться как конечный размер 24 пикселей ), а затем хотел, чтобы абзацы внутри элементов
имели вычисленный размер шрифта 20 пикселей , какое значение em вы бы использовали ?
<статья> Мой абзац

Вам нужно будет установить значение em на 20/24 или 0,83333333 em . Математика может быть сложной, поэтому вам нужно быть осторожным с тем, как вы стилизуете вещи.Лучше всего использовать rem там, где это возможно, чтобы упростить задачу и избегать установки размера шрифта для контейнерных элементов, где это возможно.
Простой пример калибровки
При изменении размера текста обычно рекомендуется установить базовый font-size документа на 10 пикселей , так что тогда математические вычисления будут намного проще - требуется (r) em Значения - это размер шрифта в пикселях, деленный на 10, а не на 16. После этого вы можете легко изменить размер различных типов текста в документе по своему усмотрению.Рекомендуется перечислить все наборы правил font-size и в специально отведенной области таблицы стилей, чтобы их было легко найти.
Наш новый результат выглядит так:
Кот Томми Хорошо, я помню это, как будто это был обед назад ... Сказал Кот Томми, откинувшись назад, чтобы убрать посторонние предметы может проникнуть в его могучую глотку. Многие жирные крысы переулки встретил свою кончину, глядя в упор в пещеристую бочку эта офигенная машина рыщет.Поистине чудо природы этот городской хищник - кот Томми мог рассказать много историй. Но это был редкий случай, подобный этому, что он сделал.
html { размер шрифта: 10 пикселей; } h2 { font-size: 5rem; } п { размер шрифта: 1,5 бэр; красный цвет; семейство шрифтов: Helvetica, Arial, sans-serif; }
Стиль шрифта, вес шрифта, преобразование текста и оформление текста
CSS предоставляет четыре общих свойства для изменения визуального веса / выделения текста:
font-style : Используется для включения и выключения курсивного текста.Возможные значения следующие (вы редко будете использовать это, если только вы не захотите по какой-либо причине отключить курсивный стиль): обычный : устанавливает для текста обычный шрифт (отключает существующий курсив.) курсив : устанавливает в тексте курсивную версию шрифта , если таковая имеется; если он недоступен, вместо этого будет имитироваться курсив с наклонным. наклонный : Устанавливает текст для использования имитации версии курсивного шрифта, созданного путем наклона нормальной версии.
font-weight : Устанавливает полужирный шрифт текста. У этого есть много значений, доступных в случае, если у вас есть много вариантов шрифта (например, - светлый , - нормальный , - полужирный , - очень жирный , - черный и т. Д.), Но реально вы редко использую какие-либо из них, кроме нормальных и жирных : нормальный , полужирный : нормальный и полужирный толщина шрифта светлее , полужирнее : Устанавливает жирность текущего элемента на один шаг светлее или тяжелее, чем жирность его родительского элемента. 100 - 900 : числовые значения полужирности, которые при необходимости обеспечивают более детальный контроль, чем указанные выше ключевые слова.
text-transform : позволяет настроить шрифт для преобразования. Значения включают: нет : предотвращает любое преобразование. прописные буквы : преобразует весь текст в заглавные. нижний регистр : Преобразует весь текст в нижний регистр. capitalize : преобразовывает все слова так, чтобы первая буква была заглавной. full-width : Преобразует все глифы, которые должны быть написаны внутри квадрата фиксированной ширины, аналогично моноширинному шрифту, позволяя выравнивать, например, Латинские символы вместе с глифами азиатских языков (например, китайский, японский, корейский).
text-decoration : Устанавливает / отменяет художественное оформление текста на шрифтах (в основном вы будете использовать это, чтобы отключить подчеркивание по умолчанию для ссылок при их стилизации). Доступные значения: нет : отменяет все текстовые декорации, которые уже присутствуют. подчеркивание : Подчеркивает текст . overline : перевод текста поверх строки. через строку : текст зачеркивается. Следует отметить, что text-decoration может принимать несколько значений одновременно, если вы хотите добавить несколько украшений одновременно, например text-decoration: underline overline . Также обратите внимание, что text-decoration является сокращенным свойством для text-decoration-line , text-decoration-style и text-decoration-color .Вы можете использовать комбинации этих значений свойств для создания интересных эффектов, например text-decoration: line-through red wavy .
Давайте посмотрим на добавление пары этих свойств в наш пример:
Наш новый результат выглядит так:
Кот Томми Хорошо, я помню это, как будто это был обед назад ... Сказал Кот Томми, откинувшись назад, чтобы убрать посторонние предметы может проникнуть в его могучую глотку.Многие жирные крысы переулки встретил свою кончину, глядя в упор в пещеристую бочку эта офигенная машина рыщет. Поистине чудо природы этот городской хищник - кот Томми мог рассказать много историй. Но это был редкий случай, подобный этому, что он сделал.
html { размер шрифта: 10 пикселей; } h2 { font-size: 5rem; текст-преобразование: заглавные буквы; } h2 + p { font-weight: жирный; } п { размер шрифта: 1,5 бэр; красный цвет; семейство шрифтов: Helvetica, Arial, sans-serif; }
Тени для текста
Вы можете применить тени к тексту с помощью свойства text-shadow .Это может принимать до четырех значений, как показано в примере ниже:
тень текста: 4px 4px 5px красный;
Четыре объекта недвижимости следующие:
Горизонтальное смещение тени от исходного текста - это может занять большинство доступных единиц длины и размера CSS, но чаще всего вы будете использовать пикселей ; положительные значения перемещают тень вправо, а отрицательные значения - влево. Это значение должно быть включено.
Вертикальное смещение тени от исходного текста; ведет себя в основном так же, как и горизонтальное смещение, за исключением того, что перемещает тень вверх / вниз, а не влево / вправо.Это значение должно быть включено.
Радиус размытия - большее значение означает, что тень рассеивается более широко. Если это значение не указано, по умолчанию оно равно 0, что означает отсутствие размытия. Это может занять большинство доступных единиц длины и размера CSS.
Базовый цвет тени, который может принимать любую цветовую единицу CSS. Если не включен, по умолчанию используется значение currentColor , то есть цвет тени берется из свойства color элемента.
Множественные тени
Вы можете применить несколько теней к одному и тому же тексту, включив несколько значений тени, разделенных запятыми, например:
text-shadow: 1px 1px 1px красный, 2px 2px 1px красный;
Если бы мы применили это к элементу
в нашем примере Tommy the cat, мы получили бы это: Скрытый пример1 Кот Томми Хорошо, я помню это, как будто это был обед назад... Сказал Кот Томми, откинувшись назад, чтобы убрать посторонние предметы может проникнуть в его могучую глотку. Многие жирные крысы переулки встретил свою кончину, глядя в упор в пещеристую бочку эта офигенная машина рыщет. Поистине чудо природы этот городской хищник - кот Томми мог рассказать много историй. Но это был редкий случай, подобный этому, что он сделал. html { размер шрифта: 10 пикселей; } h2 { font-size: 5rem; текст-преобразование: заглавные буквы; text-shadow: 1px 1px 1px красный, 2px 2px 1px красный; } h2 + p { font-weight: жирный; } п { размер шрифта: 1.5рем; красный цвет; семейство шрифтов: Helvetica, Arial, sans-serif; } Разобравшись с основными свойствами шрифта, давайте теперь посмотрим на свойства, которые мы можем использовать для изменения макета текста. Выравнивание текста Свойство text-align используется для управления выравниванием текста внутри содержащего его поля содержимого. Доступны следующие значения, которые работают почти так же, как в обычном текстовом редакторе: слева : выравнивание текста по левому краю. справа : выравнивание текста по правому краю. по центру : центрирует текст. justify : Делает текст растянутым, изменяя промежутки между словами, чтобы все строки текста были одинаковой ширины. Вам нужно использовать это осторожно - это может выглядеть ужасно, особенно когда применяется к абзацу с большим количеством длинных слов. Если вы собираетесь использовать это, вы также должны подумать об использовании вместе с ним чего-то еще, например, дефисов , чтобы разбить некоторые из более длинных слов по строкам. Если мы применили text-align: center; в в нашем примере, мы получим это: Кот Томми Хорошо, я помню это, как будто это был обед назад ... Сказал Кот Томми, откинувшись назад, чтобы убрать посторонние предметы может проникнуть в его могучую глотку. Многие жирные крысы переулки встретил свою кончину, глядя в упор в пещеристую бочку эта офигенная машина рыщет.Поистине чудо природы этот городской хищник - кот Томми мог рассказать много историй. Но это был редкий случай, подобный этому, что он сделал. html { размер шрифта: 10 пикселей; } h2 { font-size: 5rem; текст-преобразование: заглавные буквы; text-shadow: 1px 1px 1px красный, 2px 2px 1px красный; выравнивание текста: центр; } h2 + p { font-weight: жирный; } п { размер шрифта: 1,5 бэр; красный цвет; семейство шрифтов: Helvetica, Arial, sans-serif; } Высота строки Свойство line-height устанавливает высоту каждой строки текста - это может принимать большинство единиц длины и размера, но также может принимать безразмерное значение, которое действует как множитель и обычно считается лучшим вариантом - font-size умножается, чтобы получить высоту строки .Основной текст обычно выглядит лучше и его легче читать, если строки разделены; рекомендуемая высота строки составляет около 1,5 - 2 (двойной интервал). Итак, чтобы установить наши строки текста в 1,6 раза больше высоты шрифта, вы должны использовать это: высота строки: 1,6; Применение этого к элементам в нашем примере даст нам следующий результат: Скрытый пример2 Кот Томми Хорошо, я помню это, как будто это был обед назад... Сказал Кот Томми, откинувшись назад, чтобы убрать посторонние предметы может проникнуть в его могучую глотку. Многие жирные крысы переулки встретил свою кончину, глядя в упор в пещеристую бочку эта офигенная машина рыщет. Поистине чудо природы этот городской хищник - кот Томми мог рассказать много историй. Но это был редкий случай, подобный этому, что он сделал. html { размер шрифта: 10 пикселей; } h2 { font-size: 5rem; текст-преобразование: заглавные буквы; text-shadow: 1px 1px 1px красный, 2px 2px 1px красный; выравнивание текста: центр; } h2 + p { font-weight: жирный; } п { размер шрифта: 1.5рем; красный цвет; семейство шрифтов: Helvetica, Arial, sans-serif; высота строки: 1,6; } Межбуквенный интервал и интервал между словами Свойства межбуквенный интервал и межсловный интервал позволяют задать интервал между буквами и словами в тексте. Вы не будете использовать их очень часто, но можете найти им применение для придания определенного вида или улучшения разборчивости особенно плотного шрифта. Они могут принимать большинство единиц длины и размера. Итак, в качестве примера мы могли бы применить некоторый интервал между словами и буквами к первой строке каждого элемента в нашем примере: p :: first-line { межбуквенный интервал: 4 пикселя; межсловный интервал: 4 пикселя; } Давайте добавим немного в наш пример, например: Кот Томми Хорошо, я помню это, как будто это был обед назад... Сказал Кот Томми, откинувшись назад, чтобы убрать посторонние предметы может проникнуть в его могучую глотку. Многие жирные крысы переулки встретил свою кончину, глядя в упор в пещеристую бочку эта офигенная машина рыщет. Поистине чудо природы этот городской хищник - кот Томми мог рассказать много историй. Но это был редкий случай, подобный этому, что он сделал. html { размер шрифта: 10 пикселей; } h2 { font-size: 5rem; текст-преобразование: заглавные буквы; text-shadow: 1px 1px 1px красный, 2px 2px 1px красный; выравнивание текста: центр; межбуквенный интервал: 2 пикселя; } h2 + p { font-weight: жирный; } p :: first-line { межбуквенный интервал: 4 пикселя; межсловный интервал: 4 пикселя; } п { размер шрифта: 1.5рем; красный цвет; семейство шрифтов: Helvetica, Arial, sans-serif; высота строки: 1,6; межбуквенный интервал: 1px; } Другие свойства, на которые стоит обратить внимание Вышеупомянутые свойства дают вам представление о том, как начать стилизацию текста на веб-странице, но есть гораздо больше свойств, которые вы можете использовать. Мы просто хотели затронуть здесь самые важные из них. Когда вы привыкнете к использованию вышеперечисленного, вам также следует изучить следующее: Стили шрифта: Стили макета текста: веб-шрифтов - Изучите веб-разработку В первой статье модуля мы исследовали основные функции CSS, доступные для стилизации шрифтов и текста.В этой статье мы пойдем дальше, подробно исследуя веб-шрифты - они позволяют загружать пользовательские шрифты вместе с вашей веб-страницей, чтобы обеспечить более разнообразный пользовательский стиль текста.
Как мы рассмотрели в разделе Основные стили текста и шрифтов, шрифтами, примененными к вашему HTML, можно управлять с помощью свойства font-family . Это берет одно или несколько названий семейств шрифтов, и браузер перемещается по списку, пока не найдет шрифт, доступный в системе, в которой он работает:
п { семейство шрифтов: Helvetica, "Trebuchet MS", Verdana, sans-serif; }
Эта система работает хорошо, но традиционно выбор шрифтов веб-разработчиками был ограничен.Есть только несколько шрифтов, которые можно гарантировать, что они будут доступны во всех распространенных системах — это так называемые веб-безопасные шрифты. Вы можете использовать стек шрифтов, чтобы указать предпочтительные шрифты, за которыми следуют веб-альтернативы, за которыми следует системный шрифт по умолчанию, но это увеличивает накладные расходы с точки зрения тестирования, чтобы убедиться, что ваши проекты выглядят нормально с каждым шрифтом и т. Д.
Но есть альтернатива, которая работает очень хорошо, вплоть до IE версии 6. Веб-шрифты — это функция CSS, которая позволяет вам указывать файлы шрифтов, которые будут загружаться вместе с вашим веб-сайтом по мере его доступа, что означает, что любой браузер, поддерживающий веб-шрифты может иметь в наличии именно те шрифты, которые вы укажете.Удивительный! Требуемый синтаксис выглядит примерно так:
Прежде всего, у вас есть блок @ font-face в начале CSS, который указывает файл (ы) шрифта для загрузки:
@ font-face { семейство шрифтов: "myFont"; src: url ("myFont.woff"); }
Ниже этого вы можете затем использовать имя семейства шрифтов, указанное внутри @ font-face, чтобы применить свой собственный шрифт ко всему, что вам нравится, как обычно:
html { семейство шрифтов: "myFont", "Bitstream Vera Serif", serif; }
Синтаксис действительно становится немного сложнее этого; мы более подробно рассмотрим ниже.
При работе с веб-шрифтами необходимо помнить о двух важных вещах:
Браузеры поддерживают разные форматы шрифтов, поэтому для полноценной кросс-браузерной поддержки вам понадобится несколько форматов шрифтов. Например, большинство современных браузеров поддерживают WOFF / WOFF2 (Web Open Font Format версии 1 и 2), наиболее эффективный формат, но более старые версии IE поддерживают только шрифты EOT (Embedded Open Type), и вам может потребоваться включить SVG версия шрифта для поддержки старых версий браузеров iPhone и Android.Ниже мы покажем вам, как сгенерировать требуемый код.
Шрифты обычно не бесплатны. Вы должны заплатить за них и / или соблюдать другие условия лицензии, такие как указание создателя шрифта в коде (или на вашем сайте). Вы не должны красть шрифты и использовать их, не отдавая должного.
Примечание : Веб-шрифты как технология поддерживаются в Internet Explorer с версии 4!
Вы можете использовать редактор шрифтов Firefox, чтобы исследовать шрифты, используемые на вашей странице, и управлять ими, независимо от того, являются ли они веб-шрифтами или нет.Это видео дает хорошее прохождение:

Имея это в виду, давайте создадим базовый пример веб-шрифта, исходя из первых принципов. Это сложно продемонстрировать на встроенном живом примере, поэтому вместо этого мы хотели бы, чтобы вы выполнили шаги, подробно описанные в следующих разделах, чтобы получить представление о процессе.
Вы должны использовать файлы web-font-start.html и web-font-start.css в качестве отправной точки для добавления кода (см. Живой пример). Сделайте копию этих файлов в новом каталоге на вашем компьютере.В файле web-font-start.css вы найдете минимальный CSS для работы с базовой компоновкой и набором текста примера.
Поиск шрифтов
В этом примере мы будем использовать два веб-шрифта: один для заголовков и один для основного текста. Для начала нам нужно найти файлы шрифтов, которые содержат шрифты. Шрифты создаются фабриками шрифтов и хранятся в файлах разных форматов. Обычно существует три типа сайтов, на которых можно получить шрифты:
Распространитель бесплатных шрифтов: это сайт, который делает бесплатные шрифты доступными для загрузки (все еще могут существовать некоторые условия лицензии, например, указание автора шрифта).Примеры включают Font Squirrel, dafont и Everything Fonts.
Платный распространитель шрифтов: это сайт, который предоставляет шрифты за дополнительную плату, например fonts.com или myfonts.com. Вы также можете купить шрифты непосредственно у производителей шрифтов, например Linotype, Monotype или Exljbris.
Онлайн-сервис шрифтов: это сайт, который хранит и обслуживает шрифты для вас, что упрощает весь процесс. Дополнительные сведения см. В разделе Использование онлайн-службы шрифтов.
Давайте найдем шрифты! Перейдите в Font Squirrel и выберите два шрифта — красивый интересный шрифт для заголовков (может быть, хороший дисплей или шрифт с засечками) и немного менее яркий и более читаемый шрифт для абзацев.Когда вы найдете каждый шрифт, нажмите кнопку загрузки и сохраните файл в том же каталоге, что и файлы HTML и CSS, которые вы сохранили ранее. Не имеет значения, являются ли они TTF (шрифты True Type) или OTF (шрифты открытого типа).
В каждом случае распакуйте пакет шрифтов (веб-шрифты обычно распространяются в виде файлов ZIP, содержащих файл (ы) шрифта и информацию о лицензировании). Вы можете найти в пакете несколько файлов шрифтов — некоторые шрифты распространяются как семейство с различными доступными вариантами, например, тонким, средним, полужирным, курсивом, тонким курсивом и т. Д.В этом примере мы просто хотим, чтобы вы заботились о единственном файле шрифта для каждого варианта.
Примечание : В разделе «Найти шрифты» в правом столбце вы можете щелкнуть различные теги и классификации, чтобы отфильтровать отображаемые варианты.
Создание необходимого кода
Теперь вам нужно сгенерировать требуемый код (и форматы шрифтов). Для каждого шрифта выполните следующие действия:
Убедитесь, что вы выполнили все лицензионные требования, если собираетесь использовать это в коммерческом и / или веб-проекте.
Перейдите к генератору веб-шрифтов Fontsquirrel.
Загрузите два файла шрифтов с помощью кнопки Загрузить шрифты .
Установите флажок «Да, шрифты, которые я загружаю, по закону могут быть встроены в Интернет».
Нажмите Загрузите комплект .
После того, как генератор завершит обработку, вы должны получить ZIP-файл для загрузки — сохраните его в том же каталоге, что и ваш HTML и CSS.
Реализация кода в вашей демонстрации
На этом этапе распакуйте только что сгенерированный набор веб-шрифтов.Внутри распакованного каталога вы увидите три полезных элемента:
Несколько версий каждого шрифта: (например, .ttf , .woff , .woff2 и т. Д.; Точные предоставленные шрифты будут обновляться с течением времени по мере изменения требований к поддержке браузером). Как упоминалось выше, для поддержки кроссбраузерности требуется несколько шрифтов — это способ Fontsquirrel убедиться, что у вас есть все, что вам нужно.
Демо-файл HTML для каждого шрифта — загрузите его в свой браузер, чтобы увидеть, как шрифт будет выглядеть в различных контекстах использования.
Файл stylesheet.css , содержащий сгенерированный код @ font-face, который вам понадобится.
Чтобы использовать эти шрифты в своей демонстрации, выполните следующие действия:
Переименуйте распакованный каталог во что-нибудь легкое и простое, например, fonts .
Откройте файл stylesheet.css и скопируйте оба блока @ font-face , содержащиеся внутри, в файл web-font-start.css — вам нужно поместить их на самый верх, перед любым из ваших CSS, поскольку шрифты необходимо импортировать, прежде чем вы сможете использовать их на своем сайте.
Каждая из функций url () указывает на файл шрифта, который мы хотим импортировать в наш CSS — нам нужно убедиться, что пути к файлам верны, поэтому добавьте шрифта / в начало каждого пути ( при необходимости отрегулируйте).
Теперь вы можете использовать эти шрифты в своих стеках шрифтов, как любой веб-безопасный или системный шрифт по умолчанию. Например:
семейство шрифтов: 'zantrokeregular', serif;
У вас должна получиться демонстрационная страница с реализованными на них красивыми шрифтами.Поскольку создаются разные шрифты разного размера, вам может потребоваться отрегулировать размер, интервал и т. Д., Чтобы разобраться во внешнем виде.
Онлайн-службы шрифтов обычно хранят и предоставляют шрифты для вас, поэтому вам не нужно беспокоиться о написании кода @ font-face и, как правило, просто нужно вставить одну или две простые строки кода на свой сайт, чтобы все было Работа. Примеры включают Adobe Fonts и Cloud.typography. Большинство из этих сервисов основано на подписке, за исключением Google Fonts, полезного бесплатного сервиса, особенно для быстрого тестирования и написания демонстраций.
Большинство из этих сервисов просты в использовании, поэтому мы не будем их подробно описывать. Давайте быстро взглянем на шрифты Google, чтобы вы могли понять. Опять же, используйте копии web-font-start.html и web-font-start.css в качестве отправной точки.
Зайдите в Google Fonts.
Используйте фильтры слева, чтобы отобразить типы шрифтов, которые вы хотите выбрать, и выберите пару шрифтов, которые вам нравятся.
Чтобы выбрать семейство шрифтов, нажмите рядом с ним кнопку ⊕.
Когда вы выбрали семейства шрифтов, нажмите панель [Number] Families Selected внизу страницы.
На появившемся экране вам сначала нужно скопировать показанную строку HTML-кода и вставить ее в заголовок вашего HTML-файла. Поместите его над существующим элементом , чтобы шрифт был импортирован, прежде чем вы попытаетесь использовать его в своем CSS.
Затем вам необходимо скопировать декларации CSS, перечисленные в вашем CSS, как необходимо, чтобы применить пользовательские шрифты к вашему HTML.
Давайте исследуем синтаксис @ font-face , сгенерированный для вас fontsquirrel. Так выглядит один из блоков:
@ font-face { семейство шрифтов: 'ciclefina'; src: url ('шрифты / cicle_fina-webfont.eot'); src: url ('fonts / cicle_fina-webfont.eot? #iefix') формат ('embedded-opentype'), url ('fonts / cicle_fina-webfont.woff2') формат ('woff2'), url ('fonts / cicle_fina-webfont.woff') формат ('woff'), url ('шрифты / cicle_fina-webfont.ttf ') формат (' истинный тип '), url ('fonts / cicle_fina-webfont.svg # ciclefina') формат ('svg'); font-weight: нормальный; стиль шрифта: нормальный; }
Это называется «пуленепробиваемый синтаксис @ font-face» после сообщения Пола Айриша с самого начала, когда @ font-face начал набирать популярность (Bulletproof @ font-face Syntax). Давайте пройдемся по нему, чтобы увидеть, что он делает:
font-family : В этой строке указывается имя, которое вы хотите использовать для обозначения шрифта. Вы можете использовать это как угодно, если вы последовательно используете это в своем CSS.
src : эти строки определяют пути к файлам шрифтов, которые будут импортированы в ваш CSS (часть url ), и формат каждого файла шрифта (часть формата ). Последняя часть в каждом случае является необязательной, но ее полезно объявлять, поскольку она позволяет браузерам быстрее находить шрифт, который они могут использовать. Можно перечислить несколько объявлений, разделенных запятыми - браузер будет искать по ним и использовать первое, которое он сможет найти, что он понимает - поэтому лучше использовать более новые, лучшие форматы, такие как WOFF2, раньше и старые, не очень хорошие форматы как позже TTF.Единственным исключением из этого правила являются шрифты EOT - они размещаются первыми, чтобы исправить пару ошибок в более старых версиях IE, при этом он будет пытаться использовать первое, что найдет, даже если он фактически не может использовать шрифт.
font-weight / font-style : Эти строки определяют, какой вес имеет шрифт и является ли он курсивом. Если вы импортируете несколько весов одного и того же шрифта, вы можете указать их вес / стиль, а затем использовать разные значения font-weight / font-style , чтобы выбирать между ними, вместо того, чтобы вызывать все разные члены семейства шрифтов разные имена.Совет @ font-face: определите font-weight и font-style, чтобы ваш CSS оставался простым. Роджер Йоханссон показывает, что делать, более подробно.
Примечание : Вы также можете указать конкретные значения font-variant и font-stretch для ваших веб-шрифтов. В более новых браузерах вы также можете указать значение unicode-range , которое представляет собой определенный диапазон символов, который вы хотите использовать вне веб-шрифта - в поддерживающих браузерах будут загружаться только указанные символы, что позволяет избежать ненужных загрузок.Создание пользовательских наборов шрифтов с помощью Unicode-Range Дрю Маклеллан предлагает несколько полезных идей о том, как это использовать.
В браузерах доступна более новая технология шрифтов, называемая переменными шрифтами - это шрифты, которые позволяют включать множество различных вариантов гарнитуры в один файл, вместо того, чтобы иметь отдельный файл шрифта для каждой ширины, толщины или стиля. Они несколько продвинуты для нашего курса для начинающих, но если вы хотите потянуться и изучить их, прочтите наше руководство по вариативным шрифтам.
Вы дошли до конца этой статьи и уже прошли проверку навыков в разделах «Активное обучение», но можете ли вы вспомнить наиболее важную информацию на будущее? Вы можете найти экзамен, чтобы убедиться, что вы сохранили эту информацию, в конце модуля - см. Ввод домашней страницы общественной школы.
Теперь, когда вы ознакомились с нашими статьями об основах стилизации текста, пора проверить свое понимание с помощью нашего экзамена по модулю Набор текста домашней страницы общеобразовательной школы.
Как изменить тип и цвет шрифта на веб-странице
Обновлено: 02.06.2020 компанией Computer Hope
На этой странице содержатся инструкции по изменению шрифта и его цвета на веб-странице. С появлением HTML5 правильным способом настройки шрифтов веб-страниц является использование каскадных таблиц стилей. Старый метод использования встроенного атрибута стиля или тега шрифта устарел и больше не должен использоваться.
Запись Хотя устаревшие методы могут по-прежнему корректно отображаться в современных интернет-браузерах, это больше не гарантируется.Чтобы создать веб-страницы, которые правильно отображаются для максимального количества пользователей, используйте методы CSS, описанные на этой странице. Использование CSS для одного приложения Если вы планируете изменять начертание шрифта и его цвет только один раз на веб-странице, настройте его атрибуты в теге элемента. Используя атрибут стиля , вы можете указать начертание и цвет шрифта с помощью font-family , color и размера шрифта с font-size , как показано в примере ниже. Пример кода Этот текст имеет шрифт Courier, синий цвет и 20 пикселей. Результат Этот текст имеет шрифт Courier, синий цвет и размер 20 пикселей. Использование CSS для одной или нескольких страниц Пользовательский шрифт для одной страницы В верхней части вашей веб-страницы вы можете вставить код между вкладками , чтобы изменить внешний вид вашего текста в различных элементах. Следующее синее поле содержит пример кода, который после вызова изменит ваш шрифт на Courier и покрасит его в красный цвет.Как видите, мы определили имя класса как «custom». После определения этот стиль можно применить к большинству элементов на странице, добавив к ним класс custom. В следующем поле показаны две строки кода и их соответствующие результаты. Пример Все это предложение - красный и Курьер Только слово test красное и Courier. Результат Вся эта фраза красная и курьерская. Только слово тест красное и Курьер. Пользовательский шрифт для многих страниц Импорт внешнего файла CSS может быть очень полезным, поскольку он позволяет пользователям изменять правила для нескольких страниц одновременно. В следующем разделе показан пример создания базового файла CSS, который изменяет шрифт и его цвет для большинства элементов. Этот файл можно загрузить более чем на одну веб-страницу, даже на целый сайт. Используя любой базовый текстовый редактор, сохраните следующий текст как файл .css, чтобы подготовить его к импорту. @charset «utf-8»; .courier { семейство шрифтов: Courier; цвет: # 005CB9; } После того, как предыдущий текст помещен в файл .css (мы назвали наш basic.css ), вы можете ссылаться на него с любой другой страницы, используя строку, подобную приведенному ниже примеру. Наконечник Пользователи могут изменять атрибуты элементов на странице, изменяя код в импортированном.css файл. Использование тега шрифта Тег HTML , хотя и объявлен устаревшим, по-прежнему может использоваться и может быть необходим для использования с некоторыми онлайн-службами. При использовании тега FONT вы должны включить атрибут лица, который описывает используемый шрифт. В приведенном ниже примере мы используем шрифт Courier и шестнадцатеричный код цвета # 005CB9 , который является темно-синим. Пример кода Пример специального шрифта. Результат Пример специального шрифта. HTML Fonts HTML имеет замечательный тег шрифта, который помогает настраивать цвета, формы и стили шрифтов веб-страниц. В этой главе вы узнаете о первичном теге и его важности. Тег шрифта HTML устарел и не поддерживается в HTML5. Вместо этого используется CSS. Тег шрифта HTML Текст с высокой удобочитаемостью и отличным стилем привлекает внимание всего веб-сайта и украшает его содержимое.Правильное использование стиля и цвета шрифта может сделать ваш документ более удобным и читабельным. Стиль шрифта, а также возможность его поддержки цвета зависят от веб-браузера, который пользователь будет использовать для просмотра веб-страниц. Сформируйте точку зрения HTML-кодера; это делается с помощью тега FONT, который записывается как: Синтаксис: Это образец текста. Он включает три атрибута для добавления различных стилей и увеличения или уменьшения размера по нашему выбору и может играть с цветом текста, который будет обернут на вашей веб-странице. Эту настройку текстов на веб-страницах можно выполнить в любой момент кодирования HTML. Для этого вам нужно использовать тег . Настройка размера шрифта в HTML Размер текста в веб-разработке с использованием HTML может быть изменен соответствующим образом с помощью атрибута size тега font. Размер варьируется от 1 до 7 от самого низкого до самого высокого. Пример: Пример размера шрифта Максимальный размер шрифта - 7 Размер шрифта 6 Здесь размер шрифта 5 Здесь размер шрифта 4 Здесь размер шрифта 3 Здесь размер шрифта 2 Здесь наименьший размер шрифта - 1 Кроме того, вы можете настроить размер шрифта относительно исходного размера шрифта.Это называется относительным размером шрифта. Пример: Шрифт CSS (размер, семейство, стиль, вариант, вес). . html CSS font ():,,,. Шрифт CSS шрифт: [стиль шрифта || вариант шрифта || вес шрифта] размер шрифта [/ высота строки] семейство шрифтов | наследовать; : стиль шрифта -: нормальный - () курсив - косой - (,) наследства - вариант шрифта -: нормальный - () капсюлей - наследства - font-weight - ().(100, 200, .., 900): нормальный - (400) полужирный - (700) смелее - зажигалка - : начертание шрифта. : » семейство шрифтов -. . ,: Ариэль Вердана Times New Roman Калибри Грузия Удар размер шрифта / высота строки -.(пикс.). шрифт "": подпись - () значок - меню - окно сообщений - с мелкими подписями - статус-бар - font-style, font-variant, font-weight, font-size, line-height, font-family (). HTML 1.15 пикселей, Ариэль, Курсив <стиль> .primer1 { шрифт: курсив 15px / 30px Arial; } 1. Курсив 15px / 30px Arial. 30 1. курсив 15px / 30px Arial 30 2. 16px, Calibri, (полужирный) <стиль> .primer2 { размер шрифта: 16 пикселей; семейство шрифтов: Calibri; font-weight: жирный; стиль шрифта: наклонный; } 2. размер шрифта: 16 пикселей; семейство шрифтов: Calibri; вес шрифта: полужирный; стиль шрифта: наклонный; 2. Размер шрифта: 16 пикселей; семейство шрифтов: Calibri; font-weight: жирный; стиль шрифта: наклонный; 3.Шрифт: caption .: "font: caption" <стиль> .primer3 { шрифт: caption; } 3. font: caption; шрифт JavaScript: [окно.] Document.getElementById ("elementID"). Style.font = "VALUE" : • преобразовать • HTML • @ font-face • трансформация происхождения • граница • html • html • html • (@) • абсолютное положение ← CSS .

Шрифты для html и css: Красивые шрифты от Google Web Fonts

CSS-шрифты

Базовые свойства CSS-шрифтов

1. Семейство шрифтов: свойство font-family

2.<img src='/800/600/https/cf2.ppt-online.org/files2/slide/j/jAIZwE3HyadsMOkiJvQLTUCn24tczNBfW9m56e/slide-2.jpg' /> Насыщенность шрифта: свойство font-weight

3. Ширина шрифта: свойство font-stretch

4. Начертание шрифта: свойство font-style

5. Размер шрифта: свойство font-size

6. Относительный размер шрифта: свойство font-size-adjust

7. Сокращенная запись свойств шрифта: свойство font

8. Управление синтезом шрифтов: свойство font-synthesis

Как правильно подобрать шрифт для сайта

1. Сочетайте шрифты с засечками со шрифтами без засечек (sans serif и serif)

2. Избегайте шрифтов одного класса

3. Присвойте шрифтам разные роли

4. Контрастная насыщенность шрифтов

5. Создайте на странице различную тональность текста

6. Не смешивайте настроения шрифтов

7. Сочетайте яркое с нейтральным

8. Избегайте несоизмеримых сочетаний

9. Будьте проще – не используйте более двух шрифтов

10. Используйте различные размеры шрифта

В заключение

CSS: шрифти

Cімейства шрифтів

Стилі шрифтів

Навігація по сайту

Учебник CSS 3. Статья «Работа со шрифтами в CSS»

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

sans, sans serif и т.д.

font | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

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

Объектная модель

Браузеры

15 лучших веб-безопасных шрифтов HTML и CSS в 2021 году

Основные стили текста и шрифтов — Изучение веб-разработки

Кот Томми

Color

Кот Томми

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

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

Шрифты по умолчанию

Наборы шрифтов

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

Кот Томми

Размер шрифта

Простой пример калибровки

Кот Томми

Стиль шрифта, вес шрифта, преобразование текста и оформление текста

Кот Томми

Тени для текста

Множественные тени

Скрытый пример1

Кот Томми

Выравнивание текста

Кот Томми

Высота строки

Скрытый пример2

Кот Томми

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

Кот Томми

Другие свойства, на которые стоит обратить внимание

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

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

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

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

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

Использование CSS для одного приложения

Пример кода

Результат

Использование CSS для одной или нескольких страниц

Пользовательский шрифт для одной страницы

Пример

Результат

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

2. Насыщенность шрифта: свойство font-weight

`Простой пример калибровки`

`Стиль шрифта, вес шрифта, преобразование текста и оформление текста`

`Тени для текста`

`Множественные тени`

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

`Шрифт CSS (размер, семейство, стиль, вариант, вес). . html`

`HTML`

`1.15 пикселей, Ариэль, Курсив`

`2. 16px, Calibri, (полужирный)`

`3.Шрифт: caption`