Основные шрифты — Как создать сайт
Безопасные шрифты на примере CSS
При создании сайтов, одним из основных элементов является используемый шрифт. Частенько вебмастера любят применять на сайте экзотические шрифты. Это конечно может смотреться круто, но нужно, чтобы данные шрифты были также установлены и у посетителя сайта, обычно на компьютерах у всех имеются лишь стандартные шрифты.
Поэтому, в данной статье мы рассмотрим основные шрифты, которые имеются практически на каждом компьютере. Также приведём примеры, как нужно размещать имена шрифтов, чтобы текст показался в любом случае, даже если данный шрифт отсутствует на компьютере пользователя.
Шрифты в языке CSS, назначаются элементам с помощью свойства font-family.
Список безопасных шрифтов (21 штука) и их примеры:
font-family: Arial, Helvetica, sans-serif; font-family: 'Arial Black', Gadget, sans-serif; font-family: 'Bookman Old Style', serif; font-family: 'Comic Sans MS', cursive; font-family: Courier, monospace; font-family: 'Courier New', Courier, monospace; font-family: Garamond, serif; font-family: Georgia, serif; font-family: Impact, Charcoal, sans-serif; font-family: 'Lucida Console', Monaco, monospace; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-family: 'MS Sans Serif', Geneva, sans-serif; font-family: 'MS Serif', 'New York', sans-serif; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-family: Symbol, 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-family: Webdings, sans-serif; font-family: Wingdings, 'Zapf Dingbats', sans-serif;
Обратите внимание, что сначала идёт распространённый шрифт (например Arial), если его на компьютере посетителя нет, то идёт более распространённый и похожий на него (например Helvetica), и в конце если оба эти шрифта отсутствуют, подключается serif, sans-serif, monospace или cursive (данные способы начертания шрифта есть всегда).
Arial
Имя шрифта: font-family: Arial, Helvetica, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Arial Black
Имя шрифта: font-family: ‘Arial Black’, Gadget, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Bookman Old Style
Имя шрифта: font-family: ‘Bookman Old Style’, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Comic Sans MS
Имя шрифта: font-family: ‘Comic Sans MS’, cursive;
Цифры: 0 1 2 3 4 5 6 7 8 9
Courier
Имя шрифта: font-family: Courier, monospace;
Цифры: 0 1 2 3 4 5 6 7 8 9
Courier New
Имя шрифта: font-family: ‘Courier New’, Courier, monospace;
Цифры: 0 1 2 3 4 5 6 7 8 9
Garamond
Имя шрифта: font-family: Garamond, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Georgia
Имя шрифта: font-family: Georgia, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Impact
Имя шрифта: font-family: Impact, Charcoal, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Lucida Console
Имя шрифта: font-family: ‘Lucida Console’, Monaco, monospace;
Цифры: 0 1 2 3 4 5 6 7 8 9
Lucida Sans Unicode
Имя шрифта: font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
MS Sans Serif
Имя шрифта: font-family: ‘MS Sans Serif’, Geneva, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
MS Serif
Имя шрифта: font-family: ‘MS Serif’, ‘New York’, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Palatino Linotype
Имя шрифта: font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Symbol
Имя шрифта: font-family: Symbol, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Tahoma
Имя шрифта: font-family: Tahoma, Geneva, sans-serif;
Times New Roman
Имя шрифта: font-family: ‘Times New Roman’, Times, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Trebuchet MS
Имя шрифта: font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Verdana
Имя шрифта: font-family: Verdana, Geneva, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Webdings
Имя шрифта: font-family: Webdings, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Wingdings
Имя шрифта: font-family: Wingdings, ‘Zapf Dingbats’, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9
Дата публикации поста: 5 февраля 2016
Дата обновления поста: 24 октября 2014
Навигация по записям
Font-family, font-size, color и другие свойства css для задания параметров шрифта : WEBCodius
Здравствуйте, уважаемые читатели блога webcodius.ru. В сегодняшней статье речь пойдет о свойствах каскадных таблиц стилей, которые отвечают за параметры шрифта элементов web-страниц. Рассмотрим способы их использования и посмотрим как они работают. Если вы впервые слышите о понятии стилевое оформление страницы и ничего не знаете о CSS, то советую вам начать со статьи «что такое css».
Font-family — задаем имя шрифта в CSS
Начнем с атрибута стиля font-family с помощью которого можно задать гарнитуру и тип шрифта, которым будет выведен текст html-элемента (например текст заголовка или абзаца p). Синтаксис применения атрибута выглядит так:
font-family: <список имен шрифтов разделенных запятыми>
Список имен шрифтов задается в виде их названий (например Arial, Verdana или Times New Roman). Если имя шрифта содержит пробелы, то его необходимо взять в кавычки. Можно указать несколько наименований шрифтов, разделив их запятыми. В этом случае браузер сначала будет искать первый из указанных шрифтов, в случае неудачного поиска — второй, третий и так далее:
p { font-family: Arial, Verdana, ‘Times New Roman’, san-serif; }
В данном примере браузер сначала будет искать на компьютере пользователя шрифт Arial и если найдет, то отобразит все элементы p этим же шрифтом. Если же Arial на компьютере пользователя не найдется, тогда браузер будет искать Verdana, затем, в случае неудачи — Times New Roman, и так далее. Последним в списке имен шрифтов в данном примере идет не имя конкретного шрифта, а имя целого семейства шрифтов, представляющего целые наборы аналогичных шрифтов.
Таким образом можно задавать целые семейства шрифтов. Таких семейств всего пять:
- serif — шрифты с засечками;
- sans-serif -шрифты без засечек;
- cursive — шрифты, имитирующие рукописный текст;
- fantasy — декоративные шрифты;
- monospace — моноширинные шрифты.
Кроме имен шрифтов, свойству font-family можно задать особое значение inherit, которое говорит браузеру, что текст данного элемента нужно отображать таким же шрифтом, как и текст родительского элемента.
Font-size — задаем размер шрифта с помощью CSS
font-size: <размер>|xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|inherit
Давайте теперь рассмотрим подробнее способы применения данного свойства.
Размер шрифта можно задавать в абсолютных и относительных величинах. Для этого используются единицы измерения, поддерживаемые CSS. Чтобы задать размер шрифта жестко, используются следующие единицы измерения:
- px — пиксели;
- pt — пункты;
- in — дюймы;
- cm — сантиметры;
- mm — миллиметры;
- pc — пики.
Обозначение единицы измерения указывают после самого значения. Например:
p { font-size: 10px; }
strong { font-size: 12pt; }
При использовании этих стилей, текст во всех элементах p на странице будет размером 10 пикселей, а элементов strong 12 пунктов.
Для задания относительных размеров шрифта используются следующие обозначения:
- em — размер буквы «m» текущего шрифта;
- ex — размер буквы «x» текущего шрифта;
- % — проценты от размера шрифта родительского элемента.
Например:
h2 { font-size: 3em; }
em { font-size: 150%; }
В этом примере заголовок h2 будет нарисован шрифтом в три раза большего размера, чем тот, который использовался бы по умолчанию. А элементы em в полтора раза большего размера.
Кроме числовых значений, свойству font-size можно задавать одно из семи символьных значений: xx-small, x-small, small, medium, large, x-large или xx-large, — которые задают определенные размеры шрифта от самого маленького до самого большого:
Ну, и последний способ это использование значений «larger» и «smaller», которые позволяют увеличивать и уменьшать размер шрифта относительно унаследованного. Например, если для родительского элемента определен шрифт размера small, то значение larger установит для текущего элемента размер шрифта medium.
Свойство color — задаем цвет текста
Атрибут стиля color задает цвет текста. Синтаксис:
color: цвет
Цвет можно задать с помощью RGB-кода, который записывается в формате:
#<доля красного цвета><доля зеленого цвета><доля синего цвета>
Все доли записываются в формате шестнадцатеричных чисел от 00 до FF. Например, чтобы все заголовки h3 на странице выводились красным цветом, необходимо написать такой код CSS:
h3 { color: #ff0000; }
Также возможно задавать цвет с помощью имен. Красный цвет будет red, черный — black, белый — white. Например:
h3 { color: red; }
Свойства font-weight, font-style, text-decoration и другие
С помощью свойства стилей font-weight задают «жирность» шрифта. Синтаксис:
font-weight: normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900
В качестве значения свойства может использоваться одно из семи числовых значений от 100 до 900, либо одно из именованных normal, bold, bolder, lighter. Значение normal соответствует 400, а bold — 7000. Но на практике большинство браузеров не поддерживают атрибут font-weight в полной мере. Поэтому все значения, которые меньше 400 будут соответствовать normal, а все, что больше bold. Причем значения bolder и lighter не работают.
Пример использования:
em { font-weight: bold; }
Свойство CSS font-style задает начертание шрифта. Для него доступны три значения: normal, italic и oblique. Но на практике используют только первые два, где «normal» устанавливает нормальное начертание шрифта, а значение «italic» заставляет браузер выводить текст курсивным начертанием.
С помощью свойства text-decoration можно задавать различные украшательства тексту, такие как подчеркивание текста или зачеркивание:
text-decoration: none|underline|overline|line-through|blink
Для этого атрибута доступны пять значений:
- none — отменяет все эффекты, в том числе отменяет подчеркивание у ссылок, которое задано по умолчанию;
- underline — устанавливает подчеркнутые текст;
- overline — «надчеркивает» текст, то есть проводит линию над текстом;
- line-through — зачеркивает текст;
- blink — устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3.
По умолчанию, для большинства элементов текст выводится без эффектов. Но некоторые html элементы отображают текст с подчеркиванием, в частности гиперссылки (тег a).
Поэтому, кроме ссылок, на веб-странице подчеркиванием лучше ничего не выделять. Потому что пользователи подсознательно решат, что раз подчеркнуто — значит по этому можно кликнуть для перехода. И выделяя подчеркиванием обычный текст, вы вводите пользователя в заблуждение.
Нюансом свойства text-decoration является то, что для него можно указать сразу несколько значений:
text-decoration:underline overline line-through;
Результат будет такой:
перечеркнутый подчеркнутый и надчеркнутый текст!
Свойство стиля text-transform позволяет задавать регистр символов текста:
text-transform: capitalize|uppercase|lowercase|none
Свойство может иметь одно из четырех значений:
- capitalize — преобразовывает к верхнему регистру первую букву каждого слова;
- uppercase — текст в верхнем регистре;
- lowercase — текст в нижнем регистре;
- none — не меняет регистр символов.
Для увеличения и уменьшения расстояния между строками текста используется атрибут line-height. В качестве значения можно задавать как абсолютную так и относительную величину расстояния, указав соответствующую единицу измерения (px, pt, em и др.). В случае отсутствия единицы измерения указанное значение воспринимается браузером как множитель. Например, значение 1.5 устанавливает полуторный междустрочный интервал:
p { line-height: 1.5 }
Для управления расстоянием между символами текста существует свойство letter-spacing. Оно позволяет задавать дополнительное расстояние между буквами, которое будет прибавляться к изначальному. В качестве значений принимаются любые единицы длины, принятые в CSS — пиксели (px), пункты (pt) и др. Допустимо использовать отрицательные значения. В этом случае расстояние между символами уменьшится:
em { letter-spacing: 5px; }
Аналогичный атрибут word-spacing задает дополнительное расстояние между словами текста:
h2 { word-spacing: 5px }
Ну и напоследок необходимо рассмотреть свойство стиля font, позволяющее задавать сразу несколько параметров для шрифта. Синтаксис:
font: [font-style || [font-variant||font-weight] font-size [/line-height] font-family
Обязательными параметрами являются только размер шрифта и его имя, остальные параметры могут отсутствовать.
Например, чтобы задать для текста абзацев шрифт «Times New Roman» размером 10 пунктов, достаточно написать следующее правило CSS:
p { font: 10pt «Times New Roman» }
А если мы захотим выводить текст заголовков первого уровня рубленым шрифтом размером 15 пикселей и курсивным начертанием, то подойдет такое правило:
p { font: italic 12px sans-serif }
На этом рассказывать о свойствах CSS отвечающих за отображение текста на html-страницах я закончу. Чтобы узнать больше о каскадных таблицах стилей не забудьте подписаться на обновления блога и читайте статьи из раздела «Справочник CSS». До новых встреч!
Безопасные шрифты. Verdana, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS. Верстальщику о шрифтах.
Начиная верстать макет, необходимо в частности указать в CSS используемые на странице шрифты. Зачастую различными шрифтами дизайнер набирает не только основной текст страницы, но и разнообразные заголовки, логотипы, вензеля.
Хороший дизайнер, как и хороший верстальщик, знает, что браузер может использовать для отображения страницы только те шрифты, которые установлены на компьютере у пользователя. То есть шрифты можно условно разделить на две категории:
- Шрифты, которые без проблем отобразятся у подавляющего большинства пользователей.
- Шрифты, которые у достаточно большой группы пользователей отсутствуют.
Если дизайнер использовал шрифты второй категории для создания, наример, логотипа или крупных статичных заголовков, можно не колеблясь использовать прием замены текста картинкой. Недостаток применения этого приема — негибкость. В случае изменений в тексте придется переделывать картинку и менять CSS (например, если размеры новой картинки не совпадут со старой).
Можно сказать, что опасность применения приема напрямую зависит от вероятности смены текста. Поэтому делать, например, общий текст страницы нестандартными шрифтами нельзя! Грамотный дизайнер так никогда не поступит. А если дизайнер попался зеленый, хороший верстальщик просто обязан исправить его ошибку — в верстке подменить данный шрифт максимально похожим стандартным.
Но как же отличить шрифты первой группы от второй? Ясно что на набор шрифтов, установленный непосредственно на твоем компьютере опираться нельзя! Давайте разбираться.
Стандартные шрифты
Стандартные шрифты — это набор шрифтов, устанавливаемый вместе с операционной системой. Поскольку операционные системы бывают разные, то и набор шрифтов у них разный. Перечень стандартных шрифтов разных версий Windows можно посмотреть, например, в статье Стандартные шрифты Windows, а перечень стандартных шрифтов Mac OS на странице Шрифты, поставляемые с Mac OS. Что касается Unix/Linux операционных систем то единый набор шрифтов у них отсутствует. Многие пользователи Linux используют набор шрифтов DejaVu, в частности на Ubuntu они установлены по умолчанию. Согласно статистике http://www.codestyle.org у многих Unix/Linux пользователей также установлены наборы шрифтов URW, Free и другие. Согласно этой же статистике, больше 60% пользователей Unix/Linux имеют на своем компьютере шрифты набора Core fonts for the Web, который до 2002 года был официально доступен для бесплатного скачивания на сайте Microsoft.
Для того, чтобы страничка могла отображаться так, как задумал дизайнер, в любой операционной системе, существует возможность в CSS свойстве font-family задавать несколько шрифтов, перечисленных через запятую.
Это свойство специфицирует приоритетный список имен семейств шрифтов и/или названий родовых семейств. Согласно спецификации CSS2 есть два типа имен семейств шрифтов:
- Имя семейства шрифтов по выбору. Например «Times new Roman», «Arial» и другие. Имена семейств шрифтов, содержащие пробелы, должны заключаться в кавычки. Если кавычки отсутствуют, любые символы пробела до и после имени шрифта игнорируются, а любая последовательность пробелов внутри имени шрифта конвертируется в одиночный пробел.
- Родовое (общее) семейство. В спецификации определены следующие родовые семейства:
- serif — шрифты с засечками на концах;
- sans-serif — шрифты без засечек;
- cursive — шрифты курсивного начертания;
- fantasy — декоративные шрифты;
- monospace — моноширинный шрифт(с буквами одинаковой ширины).
Имена родовых семейств являются ключевыми словами и не обязательно должны заключаться в кавычки.
Таким образом для дизайна берется стандартный шрифт из OS Windows, подбирается к нему похожий для Mac OS и Unix/Linux, задается общее семейство шрифтов и готово.
Но не все так просто. Покопаем детальнее.
В поисках Web-безопасных шрифтов
В интернете исторически сложилось такое понятие как «безопасные» Web-шрифты. Безопасным шрифтом можно назвать такой шрифт, который является стандартным для всех операционных систем. Поскольку о таком положении дел остается только мечтать, то абсолютно безопасных шрифтов не существует!
Отдельные шрифты можно назвать безопасными с некоторыми оговорками.
Основой для определения «безопасных» шрифтов послужили шрифты наиболее распространенной операционной системы Windows, которые кроме того используются в других ОС. Примером такого использования служит уже упоминавшийся пакет шрифтов Core fonts for the Web, который, согласно статистике, скачало множество пользователей Unix/Linux.
В это пакет входят следующие шрифты: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Все они поддерживают кириллицу, что немаловажно для рунета.
В набор шрифтов входящих в стандартную поставку Mac OS X (эта ОС имеет наибольшее распространение среди пользователей Mac OS) входят все шрифты набора Core fonts for the Web.
Таким образом на основе шрифтов Windows, использующихся в других ОС сформировался следующий список так называемых «безопасных» Web-шрифтов:
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
Шрифт Webdings содержит набор пиктограмм, поэтому не может использоваться для контента. Andale Mono не получает широкого применения, поскольку плохо годится для повседневного чтения текста с экрана и есть не у всех пользователей Windows.
Все эти шрифты есть у каждого пользователя Windows, Mac OS X и у подавляющего большинства пользователей Unix/Linux (т.е. у тех, которые установили у себя пакет Core fonts for the Web).
А как же быть с остальными? Ведь хочется, чтобы замысел дизайнера увидело как можно большее число пользователей!
Шрифты поддерживающие кириллицу
Специфической особенностью рунета является проблема с кодировками страниц и поддержкой кириллицы в шрифтах. Чтобы не возникало проблем с разнообразными кодировками символов, умные люди придумали Unicode, который позволяет сочетать в одном шрифте символы нескольких языков. Таким образом для русскоязычных страниц нужно использовать только Unicode шрифты поддерживающие кириллицу.
Ниже приведена таблица соответствий шрифтов.
| Windows | Mac OS | Unix/Linux | Родовое семейство |
|---|---|---|---|
| Arial Black | Helvetica CY | Nimbus Sans L | Sans-serif |
| Arial | Helvetica CY | Nimbus Sans L | Sans-serif |
| Comic Sans MS | Monaco CY | * (см. ниже) | cursive |
| Courier New | * (см. ниже) | Nimbus Mono L | Monospace |
| Georgia | * (см. ниже) | Century Schoolbook L | Serif |
| Impact | Charcoal CY | * (см. ниже) | Sans-serif |
| Times New Roman | Times CY | Nimbus Roman No9 L | Serif |
| Trebuchet MS | Helvetica CY | * (см. ниже) | Sans-serif |
| Verdana | Geneva CY | DejaVu Sans | Sans-serif |
* в колонке напротив шрифта означает, что родных кириллических эквивалентов Windows шрифта у операционной системы не имеется. Но в то же время есть большая вероятность, что в операционной системе установлен непосредственно сам этот шрифт.
Например, если основным текстом макета является Arial, находим в табличке этот шрифт и в CSS пишем соответствующую ему строчку:
body { font-family: Arial, «Helvetica CY», «Nimbus Sans L», sans-serif; }
body { font-family: Arial, «Helvetica CY», «Nimbus Sans L», sans-serif; } |
Эта запись означает, что если у пользователя есть шрифт Arial (а он есть у всех пользователей Windows и всех пользователи Mac OS X), то страница отобразися этим шрифтом. Если же у пользователя нет этого шрифта, то страничка русскоязычного пользователя Mac OS 9 точно отобразится стандартным системным шрифтом Helvetica CY, а у пользователя Unix/Linux отобразися шрифтом Nimbus Sans L который установлен у 90% пользователей Unix/Linux. Если же пользователь Unix/Linux принадлежит в тем 10%, у которых нет этого шрифта, то страница отобразится тем шрифтом с засечками, который установлен для просмотра Web-страниц по умолчанию.
Кроме того, что в таблице учитываются шрифты Unix/Linux, там еще после обычного Helvetica идет какой-то странный значок CY. Давайте разбираться, что же это такое!
До выхода Mac OS X эта линейка имела следующее значение: для пользователей Windows отображаем страницу Arial, для пользователей Mac OS 9 — стандартным шрифтом Helvetica, а остальные видят страницу с системным шрифтом без засечек, настроенным по умолчанию в браузере. Но опять же немаловажный нюанс! У стандартного Mac OS 9 шрифта Helvetica нет кириллицы! Для русскоязычной страницы это означало следующее: для пользователей Windows отображаем страницу Arial, для пользователей Mac OS 9 — стандартным шрифтом Helvetica, который выводит нечитаемую информацию, а остальные видят страницу с системным шрифтом без засечек, настроенным по умолчанию в браузере.
Для правильного отображения этого набора у пользователей Mac OS 9 вместо некириллизированной Helvetica, имеет смысл указывать такой же стандартный для Mac OS 9 шрифт Helvetica CY, содержащий кириллицу.
Прочтение линеек после выхода Mac OS X изменилось. Теперь для Windows/Mac OS X указывается один общий стандартный шрифт. А если мы хотим, чтобы замысел дизайнера смогли увидеть пользователи Mac OS 9, для них нужно в линейке шрифтов прописать шрифт содержащий кириллицу.
Таким образом хотя и не существует безопасных шрифтов, существуют безопасные линейки шрифтов. Их еще называют шрифтовыми CSS стеками. В эти линейки помимо стандартных шрифтов Windows/Mac OS X можно включать также эквивалентные шрифты из стандартного набора Mac OS 9 (которая не содержит по умолчанию «безопасных» шрифтов) и распространенных шрифтов Unix/Linux.
Любой верстальщик рано или поздно сталкивается с моментом, когда дизайнер использует в макете шрифт, не входящий в перечень «безопасных»;. Но это еще не повод бить тревогу! Например, дизайнеры очень часто используют на макетах шрифт Tahoma, который не входит в этот перечень. Правильно построенная линейка шрифтов открывает возможность использовать не только Tahoma, но и другие шрифты. Все большее количество дизайнеров пользуются этой возможностью и грамотный верстальщик должен об этом знать.
Ниже приведена дополнительная таблица шрифтов, которые не входят в перечень «безопасных», но могут использоваться на макетах.
| Windows | Mac OS | Родовое семейство |
|---|---|---|
| Lucida Console | Monaco | Monospace |
| Lucida Sans Unicode | Lucida Grande | Sans-serif |
| Tahoma | Geneva CY | Sans-serif |
А если без кириллицы?
Для англоязычных текстов вышеприведенные таблицы имеют несколько другой вид.
| Windows | Mac OS | Unix/Linux | Родовое семейство |
|---|---|---|---|
| Arial Black | Gadget | Nimbus Sans L | Sans-serif |
| Arial | Helvetica | Nimbus Sans L | Sans-serif |
| Comic Sans MS | Monaco | TSCu_Comic | cursive |
| Courier New | Courier | Nimbus Mono L | Monospace |
| Georgia | * (см. ниже) | Century Schoolbook L | Serif |
| Impact | Charcoal | Rekha | Sans-serif |
| Times New Roman | Times | Nimbus Roman No9 L | Serif |
| Trebuchet MS | Helvetica | Garuda | Sans-serif |
| Verdana | Geneva | DejaVu Sans | Sans-serif |
Для шрифтов Arial, Courier New и Times New Roman при составлении линеек лучше указывать сначала шрифт для Unix/Linux, а затем для Mac OS. Это связанно с некоторой кривостью набора Linux шрифтов X11 core fonts set.
Шрифты, которые не входят в перечень «безопасных», но могут использоваться на макетах, лучше определять шрифтовыми CSS стеками на основе этой таблицы.
| Windows | Mac OS | Unix/Linux | Родовое семейство |
|---|---|---|---|
| Lucida Console | Monaco | — | Monospace |
| Lucida Sans Unicode | Lucida Grande | Garuda | Sans-serif |
| Palatino Linotype | Palatino | Garuda** | Sans-serif |
| Tahoma | Geneva | Kalimati | Sans-serif |
Прочерк в графе Unix/Linux обозначает, что пользователи этих ОС скорее всего увидят на странице шрифт, установленный для отображения страниц по умолчанию.
** В данной линейке шрифт Garuda имеет смысл ставить перед Palatino (см. пояснение выше).
Выводы:
- Абсолютно безопасных шрифтов не существует. Условно безопасными можно назвать следующие шрифты:
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
- Безопасные CSS стеки, учитывающие поддержку кирилицы в шрифтах, можно посмотреть в статье Безопасные шрифтовые CSS стеки для рунета.
- Если на странице поддержка кириллицы не важна, используем CSS стеки из статьи Безопасные шрифтовые CSS стеки для англоязычных текстов.
Информация была взята с ресурса http://www.xiper.net/
CSS: Изменение шрифта
Некоторые сайты привлекают пользователей не анимацией, не картинками или фотографиями, не видео-роликами, а исключительно своим текстовым содержимым. Текст — это неотъемлемое содержимое многих популярных сайтов. В предыдущих уроках мы рассмотрели CSS свойства, которые позволяют изменить цвет текста, добавить к нему тень, выровнять его и добавить к нему подчеркивание, надчеркивание или вовсе его зачеркнуть. В этом уроке будет рассмотрено какие семейства шрифтов бывают и как изменить шрифт текста, установленный по умолчанию.
Разница между семействами шрифтов Sans-serif и Serif
PuzzleWeb.ru — шрифт sans-serif
PuzzleWeb.ru — шрифт serif
Семейства шрифтов в CSS
В CSS шрифты разделены на семейства, каждое семейство состоит из набора шрифтов, обладающих общими характеристиками. Существует всего пять семейств шрифтов:
- sans-serif — шрифты без засечек, считается что они лучше читаются на экране компьютера, чем шрифты семейства serif.
- serif — семейство шрифтов с засечками. У многих людей они ассоциируются с газетными статьями. Засечки — декоративные штрихи и черточки по краям букв.
- monospace — семейство, состоящее из шрифтов, символы которых имеют одинаковую фиксированную ширину. Такие шрифты используются в основном для отображения примеров кода программы.
- cursive — шрифты, имитирующие рукописный текст.
- fantasy — художественные и декоративные шрифты. Они не очень широко распространены, доступны не на всех компьютерах и редко используются в веб-дизайне.
Свойство font-family дает возможность изменить шрифт, заданный по умолчанию. Обычно оно содержит список взаимозаменяемых шрифтов, разделенных запятыми, принадлежащих одному семейству. Если имя шрифта состоит более чем из одного слова, то его нужно указывать в кавычках. В конце списка обычно указывается название семейства:
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
}
Рассмотрим, как браузер обрабатывает список шрифтов, заданный в нашем свойстве font-family:
- Сначала он проверяет, установлен ли шрифт Verdana на компьютере, и, если да, использует его в качестве шрифта для текста внутри элемента (в нашем случае внутри элемента <body>)
- Если Verdana не установлен, то ищет шрифт Helvetica. В случае успешного поиска использует его внутри <body>.
- Если и Helvetica не установлен, то ищет шрифт Arial. Если он имеется на компьютере, то применяет его внутри <body>.
- И наконец, если ни один из указанных шрифтов не найден, применяется первый, найденный браузером на компьютере шрифт из семейства sans-serif. Таким образом браузер сможет самостоятельно определить подходящий шрифт из семейства.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
p.exserif { font-family: "Times New Roman", Times, serif; }
p.exsansserif { font-family: Arial, Helvetica, sans-serif; }
</style>
</head>
<body>
<h2>CSS свойство font-family</h2>
<p>Абзац использующий шрифт Times New Roman.</p>
<p>Абзац использующий шрифт Arial.</p>
</body>
</html>Попробовать »Примечание: при выборе только одного определенного шрифта важно понимать то, что браузер отобразит его только в том случае, если данный шрифт установлен на компьютере пользователя. Если шрифт не будет найден, то текст будет отображен шрифтом «Times New Roman», который задан по умолчанию во всех браузерах.
С этой темой смотрят:
font-family css | задать шрифт css
Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали, как изменить внешний вид первой буквы с помощью CSS. В данной статье я бы хотел рассказать, как задать шрифт в CSS. По умолчанию, при открытии вашей тестовой страницы, вы можете увидеть стандартный шрифт «Times New Roman». Если вам он не нравится, то вы его можете заменить. Делается это с помощью свойства font-family. Сразу хочу отметить, что браузер ищет шрифты в операционной системе пользователя, и если вы на своём сайте используете какой-нибудь экзотический шрифт, то скорее всего ваш сайт будет некорректно отображаться на большинстве компьютеров пользователей. Как же узнать наверняка, какой шрифт поддерживается большинством операционных систем? На данном сайте вы сможете найти список шрифтов, которые обязательно есть, как в операционной системе Windows, так и в Mac OS. Что удобно, здесь есть ещё начертание шрифтов, т.е. вы сразу можете посмотреть, как выглядит тот или иной шрифт. Поэтому можете смело брать любой из этих шрифтов и не бояться, что ваш сайт где-то криво отобразится. Давайте создадим простую html-страницу с двумя абзацами и изменим их шрифт:
<html> <head> <meta charset="utf-8"/> <link href="style.css" rel="stylesheet" type="text/css"/> </head> <body> <p>Первый абзац данного текста</p> <p>Второй абзац данного текста</p> </body> </html>
В файле стилей style.css запишем следующие свойства для абзаца (тег p):
p {
font-family: Arial;
}
Обновив страницу, вы увидите, что шрифт изменился. Шрифты можно указывать через запятую, давайте запишем такую конструкцию:
p {
font-family: Arial, "Palatino Linotype";
}
В данном случае браузер, если не найдет в системе пользователя шрифт «Arial», будет искать шрифт «Palatino Linotype». Также хочу обратить ваше внимание: если название шрифта состоит из нескольких слов, то его нужно указывать в кавычках.
На сайте, о котором я писал выше, рядом с каждом шрифтом есть названия, такие как sans-serif, serif, monospace. Это так называемые семейства шрифтов. Каждый шрифт относится к какому-то семейству. Давайте запишем такую конструкцию:
p {
font-family: Arial, "Palatino Linotype", sans-serif;
}
В данном случае, если браузер не найдет в системе пользователя этих двух шрифтов, то попробует отобразить страницу любым шрифтом из семейства sans-serif.
Домашнее задание: создайте тестовую html-страницу и отобразите текст на ней шрифтом «Comic Sans MS». Учтите момент, что если такого шрифта нет, то использовать семейство шрифтов cursive.
В данной статье вы узнали, как задать шрифты в CSS.
На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.
Следующая статья >
шрифты — расширенные возможности свойства font-variant
Современные технологии шрифтов поддерживают множество расширенных типографских и языковых функций. Используя их, один шрифт может предоставлять глифы для широкого спектра лигатур, контекстных и стилистических альтернатив, табличных и старых символов, маленьких прописных, автоматических дробей, штрихов и альтернатив, специфичных для данного языка.
Чтобы позволить авторам контролировать эти возможности шрифта, свойство font-variant было расширено для CSS3. Теперь оно функционирует как сокращение для набора свойств, которые обеспечивают контроль над стилистическими функциями шрифта.
Рис. 1. Один символ, множество вариаций глифаРасширенные возможности свойств шрифтов
1. Кернинг: свойство font-kerning
Поддержка браузерами
IE: —
Edge: —
Firefox: 34
Chrome: 33, 29 -webkit-
Safari: 9.1, 7 -webkit-
Opera: 20, 16 -webkit-
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 71
Samsung Internet: 4
Кернинг — это контекстная настройка межглифевого интервала. Свойство font-kerning позволяет избирательно изменять интервал между символами в зависимости от их формы. Для шрифтов, которые не содержат данных кернинга, это свойство не будет иметь видимого эффекта.
Свойство наследуется.
| font-kerning | |
|---|---|
| Значения: | |
| auto | Указывает, что кернинг применяется по усмотрению пользовательского агента на основе ряда факторов: размера текста, скриптов или других факторов, влияющих на скорость обработки текста. Значение по умолчанию. |
| normal | Указывает, что кернинг применяется. |
| none | Указывает, что кернинг не применяется. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-kerning: auto;
font-kerning: normal;
font-kerning: none;
font-kerning: inherit;
font-kerning: initial;
Рис. 2. Соседние буквы без кернинга и с кернингом2. Лигатуры: свойство font-variant-ligatures
Поддержка браузерами
IE: 10
Edge: 12
Firefox: 34, 15 -moz-
Chrome: 48, 21 -webkit-
Safari: 9.1
Opera: 35, 15 -webkit-
iOS Safari: 9.3
UC Browser for Android: 11.8 -webkit-
Chrome for Android: 71
Samsung Internet: 5, 4 -webkit-
Лигатуры и контекстные формы — это способы объединения глифов в один знак-глиф для создания более гармоничных форм. Свойство font-variant-ligatures определяет, какие лигатуры и контекстные формы используются в текстовом содержимом элементов.
Свойство наследуется.
| font-variant-ligatures | |
|---|---|
| Значения: | |
| normal | Указывает, что общие функции по умолчанию включены. Для шрифтов OpenType основные лигатуры и контекстные формы включены по умолчанию, а дискреционные и исторические лигатуры — нет. Значение по умолчанию. |
| none | Указывает, что все типы лигатур и контекстных форм, охватываемых этим свойством, явно отключены. В ситуациях, когда лигатуры не считаются необходимыми, это может повысить скорость рендеринга текста. |
| common-ligatures | Включает отображение общих лигатур (функции OpenType: liga, clig). Для шрифтов OpenType общие лигатуры включены по умолчанию. |
| no-common-ligatures | Отключить отображение общих лигатур (функции OpenType: liga, clig). |
| discretionary-ligatures | Включает отображение дискреционных лигатур (функция OpenType: dlig). Какие лигатуры являются дискреционными или необязательными, определяется конструктором типов, поэтому авторам нужно будет обратиться к документации данного шрифта, чтобы понять, какие лигатуры считаются дискреционными. |
| no-discretionary-ligatures | Отключает отображение дискреционных лигатур (функция OpenType: dlig). |
| historical-ligatures | Включает отображение исторических лигатур (функция OpenType: hlig). |
| no-historical-ligatures | Отключает отображение исторических лигатур (функция OpenType: hlig). |
| contextual | Включает отображение контекстных альтернатив (функция OpenType: calt). Хотя эта функция не является строго лигатурой, как и лигатуры, она обычно используется для согласования форм глифов с окружающим контекстом. Для шрифтов OpenType эта функция включена по умолчанию. |
| no-contextual | Отключает отображение контекстных альтернатив (функция OpenType: calt). |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-variant-ligatures: normal;
font-variant-ligatures: none;
font-variant-ligatures: common-ligatures;
font-variant-ligatures: no-common-ligatures;
font-variant-ligatures: discretionary-ligatures;
font-variant-ligatures: no-discretionary-ligatures;
font-variant-ligatures: historical-ligatures;
font-variant-ligatures: no-historical-ligatures;
font-variant-ligatures: contextual;
font-variant-ligatures: no-contextual;
font-variant-ligatures: inherit;
font-variant-ligatures: initial;
Рис. 3. Варианты лигатур3. Подстрочные и надстрочные формы: свойство font-variant-position
Поддержка браузерами
IE: —
Edge: —
Firefox: 34
Chrome: —
Safari: —
Opera: —
iOS Safari: —
UC Browser for Android: —
Chrome for Android: —
Samsung Internet: —
Свойство font-variant-position используется для включения типографских и надстрочных глифов. Это альтернативные глифы, разработанные в том же блоке, что и глифы по умолчанию, и предназначенные для размещения на той же базовой линии, что и глифы по умолчанию, без изменения размера или изменения положения базовой линии. Они разработаны таким образом, чтобы соответствовать окружающему тексту и быть более читаемыми, не влияя на высоту строки.
Свойство наследуется.
Рис. 4. Подстрочные глифы (вверху) против типичных синтезированных индексов (внизу)| font-variant-position | |
|---|---|
| Значения: | |
| normal | Означает отсутствие включенных функций. Значение по умолчанию. |
| sub | Включает отображение вариантов нижнего индекса (функция OpenType: subs). |
| super | Включает отображение надстрочных вариантов (функция OpenType: sups). |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-variant-position: normal;
font-variant-position: sub;
font-variant-position: super;
font-variant-position: inherit;
font-variant-position: initial;
Рис. 5. Верхний индекс альтернативного глифа (слева), синтезированный верхний индекс глифов (в середине) и неправильная смесь двух символов (справа)4. Преобразование в заглавные буквы: свойство font-variant-caps
Поддержка браузерами
IE: —
Edge: —
Firefox: 34
Chrome: 52
Safari: —
Opera: 39
iOS Safari: —
UC Browser for Android: ?
Chrome for Android: 52
Samsung Internet: 6
Свойство font-option-caps контролирует использование альтернативных глифов для заглавных букв.
Свойство наследуется.
| font-variant-caps | |
|---|---|
| Значения: | |
| normal | Означает отсутствие функций преобразования. Значение по умолчанию. |
| small-caps | Включает отображение маленьких заглавных букв (функция OpenType: smcp). Глифы маленьких заглавных букв обычно используют форму заглавных букв, но уменьшены до размера строчных букв. |
| all-small-caps | Позволяет отображать заглавные буквы как заглавными, так и строчными буквами (функции OpenType: c2sc, smcp). При использовании обычных маленьких заглавных букв любой заглавный символ отображается в полном верхнем регистре, а строчные — меньше. Однако при использовании этого ключевого слова эти заглавные буквы отображаются с меньшим размером. |
| petite-caps | Включает отображение миниатюрных заглавных букв (функция OpenType: pcap) Если шрифт не поддерживает миниатюрные заглавные буквы, свойство ведет себя так, как будто вместо него было задано small-caps. |
| all-petite-caps | Позволяет отображать маленькие заглавные буквы как в верхнем, так и в нижнем регистре (функции OpenType: c2pc, pcap). В противном случае ведет себя так, как будто вместо него было задано all-small-caps. |
| unicase | Включает отображение сочетания маленьких заглавных букв для прописных букв с обычными строчными (функция OpenType: unic). |
| titling-caps | Предназначен для заголовков и названий в тексте (функция OpenType: titl). Включает отображение специальных заглавных букв для заголовков, с менее жирным начертанием, чем у обычных заголовков. Если шрифт не поддерживает эту функцию, ключевое слово не имеет видимых действий. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-variant-caps: normal;
font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
font-variant-caps: petite-caps;
font-variant-caps: all-petite-caps;
font-variant-caps: unicase;
font-variant-caps: titling-caps;
font-variant-caps: inherit;
font-variant-caps: initial;Доступность этих глифов зависит от того, определена ли данная функция в списке возможностей шрифта. Для обратной совместимости с CSS 2.1, если указаны small-caps или all-small-caps, но глифы small-caps недоступны для данного шрифта, браузеры должны имитировать шрифт small-caps, например, взяв обычный шрифт и заменив глифы для строчных букв масштабированными версиями глифов для заглавных букв по аналогии с text-transform: uppercase (заменить глифы как для заглавных, так и для строчных букв в случае all-small-caps).
Если для шрифта, который не поддерживает эти функции, указано petite-caps или all-petite-caps, свойство ведет себя так, как если бы small-caps или all-small-caps были указаны соответственно.
Если для шрифта, который не поддерживает эту функцию, указано unicase, свойство ведет себя так, как будто small-caps применлся только к заглавным буквам в нижнем регистре.
Рис. 6. text-transform: uppercase и font-variant-caps: small-caps5. Форматирование цифр: свойство font-variant-numeric
Поддержка браузерами
IE: —
Edge: —
Firefox: 34
Chrome: 52
Safari: 9.1
Opera: 39
iOS Safari: 9.3
UC Browser for Android: 11.8
Chrome for Android: 71
Samsung Internet: 6.2
Свойство font-variant-numeric контролирует использование альтернативных глифов для чисел, дробей и порядковых маркеров.
Свойство наследуется.
| font-variant-numeric | |
|---|---|
| Значения: | |
| normal | Функции преобразования не применяются. Значение по умолчанию. |
| lining-nums | Выравнивает все цифры по базовой линии текста (функция OpenType: lnum). |
| oldstyle-nums | Отображает некоторые знаки (3, 4, 7, 9) таким образом, чтобы они уходили нижним краем под базовую линию текста (функция OpenType: onum). |
| proportional-nums | Включает отображение пропорциональных чисел (функция OpenType: pnum). |
| tabular-nums | Включает отображение табличных чисел — одинаковой ширины, которые легко выравниваются, как в таблицах (функция OpenType: tnum). |
| diagonal-fractions | Включает символы дробей, в которых числитель и знаменатель уменьшены и разделены косой чертой (функция OpenType: frac). |
| stacked-fractions | Включает символы дробей, где числитель и знаменатель уменьшены, поставлены друг над другом и разделены горизонтальной чертой (функция OpenType: afrc). |
| ordinal | Включает отображение буквенных форм, используемых с порядковыми номерами — специальные глифы для порядковых числительных, например, 1st, 2nd, 3rd, 4th в английском (функция OpenType: ordn). |
| slashed-zero | Включает отображений нулей перечеркнутыми косой линией (функция OpenType: zero). |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-variant-numeric: normal;
font-variant-numeric: lining-nums;
font-variant-numeric: oldstyle-nums;
font-variant-numeric: proportional-nums;
font-variant-numeric: tabular-nums;
font-variant-numeric: diagonal-fractions;
font-variant-numeric: stacked-fractions;
font-variant-numeric: ordinal;
font-variant-numeric: slashed-zero;
font-variant-numeric: oldstyle-nums stacked-fractions;
font-variant-numeric: inherit;
font-variant-numeric: initial;
Рис. 7. Примеры значений свойства font-variant-numeric6. Визуализация восточноазиатского текста: свойство font-variant-east-asian
Поддержка браузерами
IE: —
Edge: —
Firefox: 34
Chrome: 63
Safari: —
Opera: 50
iOS Safari: —
UC Browser for Android: ?
Chrome for Android: 63
Samsung Internet: —
Свойство font-variant-east-asian позволяет контролировать замену и размер глифов в восточноазиатском тексте.
Свойство наследуется.
| font-variant-east-asian | |
|---|---|
| Значения: | |
| normal | Функции преобразования не применяются. Значение по умолчанию. |
| jis78 | Включает рендеринг форм JIS78 (функция OpenType: jp78). |
| jis83 | Включает рендеринг форм JIS83 (функция OpenType: jp83). |
| jis90 | Включает рендеринг форм JIS90 (функция OpenType: jp90). |
| jis04 | Включает рендеринг форм JIS2004 (функция OpenType: jp04). |
| simplified | Включает рендеринг упрощенных форм (функция OpenType: smpl). |
| traditional | Включает рендеринг традиционных форм (функция OpenType: trad). |
| full-width | Включает рендеринг символов одинаковой ширины, квадратной формы (функция OpenType: fwid). |
| proportional-width | Включает рендеринг символов разной ширины (функция OpenType: pwid). |
| ruby | Включает отображение глифов вариантов ruby (функция OpenType: ruby). |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-variant-east-asian: normal;
font-variant-east-asian: jis78;
font-variant-east-asian: jis83;
font-variant-east-asian: jis90;
font-variant-east-asian: jis04;
font-variant-east-asian: simplified;
font-variant-east-asian: traditional;
font-variant-east-asian: full-width;
font-variant-east-asian: proportional-width;
font-variant-east-asian: ruby;
font-variant-east-asian: ruby full-width jis83;
font-variant-east-asian: inherit;
font-variant-east-asian: initial;
Рис. 8. Пример вывода текста с font-variant-east-asian: jis787. Общее сокращение для рендеринга шрифтов: свойство font-variant
| font-variant | |
|---|---|
| Значения: | |
| normal | Сбрасывает все подсвойства вариантов шрифтов к их начальному значению. Значение по умолчанию. |
| none | Устанавливает для font-variant-ligatures значение none и сбрасывает все остальные свойства шрифта на значение по умолчанию. |
| значения отдельных свойств вариантов шрифта | Определяет ключевые слова и функции, относящиеся к конкретному свойству. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Свойство font-variant является сокращением для всех подсвойств вариантов шрифта. Не сбрасывает значения font-feature-settings.
Синтаксис
font-variant: normal;
font-variant: none;
font-variant: small-caps;
font-variant: common-ligatures small-caps;
font-variant: inherit;
font-variant: initial;8. Низкоуровневое управление настройками шрифтов: свойство font-feature-settings
Поддержка браузерами
IE: 10
Edge: 12
Firefox: 34, 15 -moz-
Chrome: 48, 21 -webkit-
Safari: 9.1
Opera: 35, 15 -webkit-
iOS Safari: 9.3
UC Browser for Android: 11.8 -webkit-
Chrome for Android: 71
Samsung Internet: 5, 4 -webkit-
Свойство font-feature-settings обеспечивает низкоуровневый контроль над функциями шрифтов OpenType. Оно предназначено для предоставления доступа к функциям шрифтов, которые не используются широко, но необходимы для конкретного случая использования. Авторы обычно должны использовать font-variant и связанные с ним подсвойства, когда это возможно, и использовать это свойство только в особых случаях, когда его использование является единственным способом доступа к определенной редко используемой функции шрифта.
Свойство наследуется.
| font-feature-settings | |
|---|---|
| Значения: | |
| normal | Значение означает, что из-за этого свойства не происходит никаких изменений в выборе или позиционировании глифа. Значение по умолчанию. |
| строка и/или целое число/on/off | Строка представляет собой тег OpenType. Целое число, если присутствует, указывает индекс, используемый для выбора символа. Значение должно быть 0 или больше. Значение 0 указывает, что функция отключена. Для логических объектов значение 1 включает функцию. Для объектов, не являющихся логическими, значение 1 или больше включает объект и указывает индекс выбора объекта. Значение on является синонимом 1, а off является синонимом 0. Если значение опущено, принимается значение 1. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-feature-settings: normal;
font-feature-settings: "smcp", "swsh" 2;
font-feature-settings: "dlig" 1;
font-feature-settings: "smcp" on;
font-feature-settings: "c2sc";
font-feature-settings: "liga" off;
font-feature-settings: "tnum", "hist";
font-feature-settings: "tnum" "hist";
font-feature-settings: "PKRN";
font-feature-settings: inherit;
font-feature-settings: initial;По материалам CSS Fonts Module Level 3
Шрифты в CSS // Вебшкола онлайн
Свойство CSS font определяет тип шрифта, толщину его линий, размер и стиль.
Разница между шрифтами Serif и Sans-Serif
На рисунке представлены буквы из двух семейств шрифтов: Serif и Sans-Serif. Разницу между ними можно увидеть невооруженным глазом, у шрифта семейства Serif на концах штрихов имеются маленькие засечки. Слово Serif переводится как «засечка», а слово Sans — как «без». Поэтому шрифт sans-serif переводится как «без засечек». При печати лучше использовать шрифты Serif, так как они облегчают чтение. Для компьютерных мониторов лучше использовать шрифты Sans-serif.
Семейства шрифтов CSS
В CSS существует два типа названий семейств шрифтов:
- общие семейства — группа семейств шрифтов, имеющих похожий вид («Serif» или «Monospace»)
- семейство шрифта — конкретный шрифт («Times New Roman» или «Arial»)
| Общее семейство | Семейство шрифтов | Описание |
|---|---|---|
| Serif | Times New Roman Georgia |
Шрифты Serif имеют засечки на концах штрихов символов |
| Sans-serif | Arial Verdana |
«Sans» означает «без» — эти шрифты не имеют засечек |
| Monospace | Courier New Lucida Console |
Символы имеют одинаковую ширину |
Семейство шрифта
Семейство шрифта указывается в свойстве font-family.
Свойство font-family должно содержать несколько названий шрифтов на всякий случай. Если браузер (а точнее ОС) не поддерживает первый шрифт в списке (этот шрифт не установлен в ОС), он попытается использовать следующий шрифт из списка шрифтов.
Начинайте список шрифтов с желаемого, заканчивайте его названием общего семейства, если указанных вами шрифтов не будет в ОС, браузер выберет доступный шрифт из общего семейства.
Заметка: если название семейства шрифта состоит из нескольких слов, оно должно быть помещено в кавычки, например, font-family: «Times New Roman».
Названия шрифтов перечисляются через запятую:
Чтобы увидеть часто используемые комбинации шрифтов, ознакомтесь со списком безопасных веб-шрифтов.
Стиль шрифта
Свойство font-style обычно используется для оформления текста в виде курсива.
Свойство имеет три значения:
- normal — обычный текст
- italic — курсив
- oblique — наклонный текст (похож на курсив, плохо поддерживается в браузерах, поэтому обычно отображается курсивом)
Пример
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
Посмотреть
Размер шрифта
Свойство font-size задает размер шрифта.
Возможность управлять размером шрифта очень важна в веб-дизайне. Однако, не стоит изменять размер параграфа, чтобы сделать его похожим на заголовок, и изменять заголовок, чтобы сделать его похожим на параграф.
Используйте правильные теги, например, h2-h6 для заголовков и тег p для параграфов.
Значение свойства font-size можно указать в относительных и абсолютных величинах.
Абсолютные величины:
- Задает абсолютный размер шрифта
- Не дает пользователю возможности изменять размер шрифта
- Абсолютные размеры используются тогда, когда точно известно разрешение устройств, на которых будет отображаться сайт
Относительные величины:
- Размеры шрифта зависят от соседних/родительских элементов
- Дают пользователю возможность изменять размер шрифта в браузере
Если не указать размер шрифта, будет подставлено значение по умолчанию, которое равно (для параграфов) 16px (16px=1em).
Размер шрифта в пикселях
Размер шрифта в пикселях дает вам полный контроль над размером шрифта:
Этот код позволяет изменять размер текста во всех браузерах, кроме Internet Explorer.
Размер текста можно изменить с помощью инструмента масштабирования (при этом меняется размер всей страницы, а не только текста).
Размер шрифта в em
Многие веб-мастера используют em вместо пикселей, чтобы избежать проблем с масштабированием в Internet Explorer.
Размеры в em рекомендуются W3C.
1em равен размеру шрифта по умолчанию. Размер шрифта по умолчанию равен 16 пикселям. Таким образом, 1em равен 16 пикселям.
Размер шрифта в em можно перевести из пикселей по формуле: пиксели/16=em
Пример
h2 {font-size:2.5em;} /* 40px/16=2.5em */
h3 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
Посмотреть
В этом примере, размер текста в em равен размеру текста в пикселях. Однако, этот способ позволяет масштабировать текст во всех браузерах.
К сожалению, в браузере IE можно заметить следующую проблему: при увеличении/уменьшении размера шрифта, он увеличивается/уменьшается больше, чем ожидалось, то есть непропорционально.
Комбинация % и em
Кросс-браузерным решением масштабирования текста является задание размера шрифта по умолчанию для тега body в %:
Пример
body {font-size:100%;}
h2 {font-size:2.5em;}
h3 {font-size:1.875em;}
p {font-size:0.875em;}
Посмотреть
Мы получили кросс-браузерный код. Он не только одинаково отображается во всех браузерах, но и позволяет масштабировать текст.
Примеры
«Жирность» шрифта
Настройка толщины линий шрифта.
Свойство font — краткая запись
Использование краткой записи для определения всех свойств шрифта.
Все свойства шрифта — справка CSS
Число в столбце «CSS» указывает на то, в какой версии CSS появилось соответствующее свойство (CSS1 или CSS2).
| Свойство | Описание | Значения | CSS |
|---|---|---|---|
| font |
Все свойства шрифта одной записью | font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar inherit |
1 |
| font-family |
Семейство шрифта | название- семейства общее-семейство inherit |
1 |
| font-size |
Размер шрифта | xx-small x-small small medium large x-large xx-large smaller larger размер % inherit |
1 |
| font-style |
Стиль шрифта | normal italic oblique inherit |
1 |
| font-variant |
Трансформация букв шрифта в уменьшенные заглавные буквы | normal small-caps inherit |
1 |
| font-weight |
Ширина линий шрифта («Жирность») | normal bold bolder lighter 100 200 300 400 500 600 700 800 900 inherit |
1 |
Понравилась запись? Сказать «Спасибо» очень просто, поделитесь записью в социальных сетях!