Font-style

CSS Учебник

CSS СТАРТCSS ВведениеCSS СинтаксисCSS СелекторыCSS Как подключитьCSS ЦветаCSS background-colorCSS borderCSS marginCSS paddingCSS height/widthCSS Блочная модельCSS КонтурCSS ТекстCSS ШрифтыCSS ИконкиCSS СсылкиCSS СпискиCSS ТаблицыCSS displayCSS max-widthCSS positionCSS overflowCSS float/clearCSS inline-blockCSS ВыравниваниеCSS КомбинаторыCSS Псевдо-классыCSS Псевдо-элементыCSS opacity/transparencyCSS Панель навигацииCSS Выпадающие спискиCSS Галерея изображенийCSS Спрайты изображенийCSS Селекторы атрибутовCSS ФормыCSS СчётчикиCSS Макет веб-сайтаCSS ЕдиницыCSS Специфичности

Установить размер шрифта С Em

Чтобы разрешить пользователям изменять размер текста (в меню браузера), многие разработчики используют EM вместо пикселов.

Размер блока EM рекомендуется W3C.

1em равен текущему размеру шрифта. размер шрифта по умолчанию в браузерах 16px. Таким образом, по умолчанию размер 1em является 16px.

Размер может быть рассчитано из пикселей в EM , используя эту формулу:пикселей/ 16 =EM

пример

h1 {    font-size: 2.5em; /* 40px/16=2.5em */}h2 {    font-size: 1.875em; /* 30px/16=1.875em */
}p {    font-size: 0.875em; /* 14px/16=0.875em */}

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

К сожалению, все еще существует проблема с более старыми версиями IE. Текст становится больше, чем он должен, когда сделано больше, и меньше, чем должен, когда становится меньше.

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

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

Формат woff самый легкий, потому что он сжатый. Весит он всего лишь 28.1 kb и это главный плюс данного формата. Остальные шрифты весят почти вдвое больше, eot весит 44kb, а ttf 43.9kb.
Но, к сожалению его, не понимают браузеры Opera, Safari и Android. Поэтому нужно подключить и универсальный формат ttf которого по сравнению с woff понимают все браузеры. Его поддерживает даже браузеры из ОС Android, начиная с версии 2.2.

@font-face{
    font-family: OpenSansBold; /* Название шрифта. */
    src: url("../fonts/OpenSans/OpenSansBold/OpenSansBold.woff") format("woff"),
    url("../fonts/OpenSans/OpenSansBold/OpenSansBold.ttf") format("truetype");
}

Указание формата. Строчка format(«тип формата шрифта»)

Для чего нужно написать декларацию format после каждого подключенного формата шрифта ?

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

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

Шрифты для браузеров на ОС IOS

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

Отображение страницы сайта после подключения шрифта Open Sans.

Для наглядности, внутри тега body я добавил заголовок h1 с названием шрифта и параграф с текстом. Заголовок h1 выровнял по центру страницы, задав ему в css файл свойство text-align со значением center.

h1{
    text-align: center;
}

Все готово. Открываем страницу в браузере и смотрим на результат.

Вид страницы до подключения шрифта:

Вид страницы после подключения шрифта:

Проверка шрифта онлайн, сразу на страницу сайта

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

И так, заходим на этот сайт, вводим название нашего любимого шрифта, например Open Sans и переходим на детальную страницу данного шрифта.

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

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

Смотрим на предварительный результат:

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

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

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Поделиться с друзьями:

Подписаться на новые статьи:

Поддержите пожалуйста мой проект!

Добавляйтесь ко мне в друзья в:

• — ВКонтакте

• — Facebook
• — Одноклассниках

Добавляйтесь в мои группы:

• — Группа в ВКонтакте
• — Группа в Facebook
• — Группа в Одноклассниках

Подпишитесь на мои каналы:

• — Мой канал на Youtube
• — Мой канал на Google+

Автор статьи: Мунтян Сергей

Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!!

Дата добавления: 2016-02-26 18:33:50

Описание

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

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

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

• значения свойств font-size и font-family являются обязательными к указанию
• размер высоты строки (line-height) должен указываться сразу после размера шрифта, через косую черту (слэш) — «»
• если будут устанавливаться значения свойств font-style, font-variant и font-weight, то они должны быть определены перед font-size
• font-family определяется последним, после всех остальных свойств (значение inherit недопустимо к применению)

Значение по умолчанию:	не определено
Применяется:	ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line
Анимируется:	да, смотрите каждое свойство, входящее в состав краткого метода, отдельно
Наследуется:	да
Версия:	CSS1
Синтаксис JavaScript:	object.style.font=»italic small-caps bold 12px arial,sans-serif»

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

В 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	Съешь же еще этих сочных мандаринов.

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

Семейство шрифта (font-family)	Пример
Georgia, serif	Съешь же еще этих сочных мандаринов.
«Palatino Linotype», «Book Antiqua», Palatino, serif	Съешь же еще этих сочных мандаринов.
«Times New Roman», Times, serif	Съешь же еще этих сочных мандаринов.

monospace (моноширинные)

Семейство шрифта (font-family)	Пример
«Courier New», Courier, monospace	Съешь же еще этих сочных мандаринов.
«Lucida Console», Monaco, monospace	Съешь же еще этих сочных мандаринов.

Онлайн-курсы

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

Семество шрифта устанавливается с помощью свойства font-family.

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

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

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

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

Using Bold Text

You must add another rule containing descriptors for bold text:

Example

@font-face
{
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
 
font-weight: bold;
}

The file «sansation_bold.woff» is another font file, that contains the bold characters for the Sansation font.

Browsers will use this whenever a piece of text with the font-family «myFirstFont» should render as bold.

This way you can have many rules for the same font.

CSS Font Descriptors

The following table lists all the font descriptors that can be defined inside the rule:

Descriptor	Values	Description
font-family	name	Required. Defines a name for the font
src	URL	Required. Defines the URL of the font file
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Optional. Defines how the font should be stretched. Default is «normal»
font-style	normal italic oblique	Optional. Defines how the font should be styled. Default is «normal»
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Optional. Defines the boldness of the font. Default is «normal»
unicode-range	unicode-range	Optional. Defines the range of UNICODE characters the font supports. Default is «U+0-10FFFF»

❮ Previous
Next ❯

This is Segoe UI

Norway has a total area of 385,252 square kilometres and a population of 5,438,657 (December 2020).
Norway is bordered by Sweeden, Finland and Russia to the north-east,
and the Skagerrak to the south, with Denmark on the other side.

Norway has a total area of 385,252 square kilometres and a population of 5,438,657 (December 2020).
Norway is bordered by Sweeden, Finland and Russia to the north-east,
and the Skagerrak to the south, with Denmark on the other side.

Example

body, h1, h2, h3, h4, h5, h6 {
  font-family: «Segoe UI», Arial, sans-serif
}

Font Family	Safe Fallback
Times New Roman	Times, serif
Georgia	serif
Palatino Linotype	Georgia, serif
Book Antiqua	Georgia, serif

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS object-fitCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Свойства font-weight, line-height и font-style

«Font-weight» в Css позволяет задавать нормальное (normal) или жирное (bold) начертание шрифта для того элемента, которому это свойство адресовано. Но на самом деле у него могут быть и другие значения. Их всего четыре буквенных плюс цифровая шкала:

1. Для «font weight» можно использовать значения: normal, bold, bolder (чуть более жирный) или lighter (чуть более тонкий). Причем, реально работают во всех браузерах только значения normal (в него же будет переключать и lighter) и bold (bolder также даст просто жирное начертание).

2. Либо цифровые значения от 100 до 900 с шагом в 100 (от сверхтонкого до сверхжирного). Т.е. по этой шкале шрифт мог использовать много начертаний разной степени жирности. Изначально значение normal соответствовало 400, а значение bold — 700.

   Но на практике пока ни один браузер для «Font-weight» этого не поддерживает в полной мере. А жаль, иногда хочется использовать чуть более жирный или чуть более тонкий фонт, чем тот, что нам могут дать значения «normal» и «bold». Увы и ах, сейчас все цифры менее 400 дадут вам в итоге нормальный, а все что больше — жирный.

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

С помощью «Line-height» можно добавить или уменьшить пространство над и под строкой с текстом, изменяя таким образом всю высоту линии с текстом:

Например, для Arial высота линии равна примерно 120%, т.е. размер по вертикали всей строки (литеры плюс свободное пространство над и под ней) будет на 120% больше высоты шрифта. А для Times New Roman значение этого свойства по умолчанию будет уже примерно 125%.

Для увеличения и уменьшения расстояния между строками текста можно использовать относительные значения для «Line-height» в виде процентов или «Em». Например, для сильного разрежения строк (увеличения высоты линии) можно написать:

line-height:300%;
или
line-height:3em;

А если написать так:

line-height:30%;
или
line-height:0.3em;

то высота линии станет меньше, чем высота шрифта (font-size), и строки текста попросту наедут друг на друга.

В качестве значений для «Line-height» можно также использовать и любые абсолютные значения, которые принято использовать для шрифтов в таблицах каскадных стилей — пикселы (px), дюймы (in), пункты (pt). Либо можно использовать безразмерный множитель (любое число больше нуля). Например, для задания полуторного интервала между строками можно написать так:

line-height: 1.5;

Следующее Css свойство — это «font-style», с его помощью можно задать наклонный шрифт (курсив). Для него по спецификации предусмотрено три варианта значений: normal, italic и oblique. Но на практике используются только первые два. Причем, значение «normal» является значением по умолчанию.

Когда вы задаете для какого-либо элемента Html кода значение font-style:italic, то браузер будет искать нужную гарнитуру, помеченную как «italic» (т.е. курсивное начертание). Если сами вы зайдете через панель управления на своем компьютере в «шрифты» , то увидите там, что многие из них имеют вариант с «italic» или «курсив» в названии.

Но есть шрифты (например, всем известный Tahoma), у которых разработчиками не было предусмотрено наклонного начертания. Что же сделает в этом случае браузер (если вы в font-style прописали italic)? А он будет сам пытаться наклонить буквы этого шрифта, раз об этом заблаговременно не позаботились его разработчики. Выглядеть это будет, конечно же, хуже.

Ну, а значение oblique для font-style будет вынуждать браузер всегда наклонять шрифт своими средствами, даже если для него имеется курсивное начертание. Выглядеть это будет зачастую просто ужасно, поэтому значение «oblique» практически не используется.

Ну и последнее из рассмотренных сегодня свойств таблиц каскадных стилей — font-variant, которое очень редко используется при верстке с учетом Html и CSS.

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

Соответственно, у этого свойства имеется всего два значения: normal (по умолчанию) и small-caps (начертание строчных будет таким же, как и у заглавных букв). Для русского языка это свойство используется крайне редко.

Видео Голосовой переводчик на основе Android

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

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

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

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

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

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

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

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

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

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

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

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

• Отступ текста в CSS
• Выравнивание текста в CSS
• Цвет и тень текста в CSS
• CSS стиль и размер шрифта
• Стандартные (безопасные) шрифты

Syntax

@font-face
{
  font-properties
}

Font descriptor	Values	Description
font-family	name	Required. Defines the name of the font.
src	URL	Required. Defines the URL(s) where the font should be downloaded from
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Optional. Defines how the font should be stretched. Default value is «normal»
font-style	normal italic oblique	Optional. Defines how the font should be styled. Default value is «normal»
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Optional. Defines the boldness of the font. Default value is «normal»
unicode-range	unicode-range	Optional. Defines the range of unicode characters the font supports. Default value is «U+0-10FFFF»

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

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

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

Платные шрифты делятся на те, которые:

• можно использовать в Веб
• нельзя использовать в Веб

Чтобы не заморачиваться решением запутанного вопроса лицензии на шрифты, можно воспользоваться веб-службами Google Fonts или TypeKit, на которых собраны все шрифты, которые можно использовать в Веб. Шрифты на этих серверах либо бесплатные (Google Fonts), либо платные (TypeKit).

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

• The League of Movable Type (https://www.theleagueofmoveabletype.com/)
• FontSquirrel (http://www.fontsquirrel.com/)
• Google Fonts (https://www.google.com/fonts)
• The Open Font Library (http://openfontlibrary.org/ru)
• Fontex.org (http://fontex.org/)
• Exljbris Font Foundry (http://www.exljbris.com/)

Большинство веб-сервисов, которое предоставляет шрифты для Веб, “отдают” их в формате OTF или TTF. Поэтому нужно конвертировать этот шрифт в четыре формата, описанных выше, для того, чтобы максимальное число посетителей сайта смогло увидеть на своих устройствах содержимое данного сайта. Для конвертирования не нужно искать специальное программное обеспечение. Можно воспользоваться бесплатным генератором @font-face Generator, находящемся на сервере FontSquirrel (http://www.fontsquirrel.com/).

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

Генератор Generator — не единственный в Веб сервис подобного рода. Существуют подобные ему генераторы, которые, в тому же, обладают “неразборчивостью” по отношению к лицензии конвертируемого шрифта.

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

• EOT — формат только для Internet Explorer 8 и ниже
• WOFF — самый современный и маленький по размеру шрифт, который понимают большинство современных браузеров
• TTF — сравнительно большой по размеру шрифт и достаточно устаревший
• SVG — самый большой по размеру и объему шрифт, поэтому его необходимо размещать в самой последней строке. К тому же, этот формат шрифта используется только в браузерах ОС Android или в браузере Safari 4 (то есть, iPhone)

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

Правильное применение подключенного web-шрифта League Gothic. Здесь указывается на первом месте имя подключенного шрифта, а затем — резервные шрифты, которые заведомо установлены в системе пользователя (имя шрифта, гарантировано имеющегося в системе и семейство шрифтов).

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

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

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

• The Big List of Flat Icons & Icon Fonts
• HTML for Icon Font Usage
• Icon Fonts are Awesome
• Шрифтовые иконки и сервис IcoMoon

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Как делать скриншоты с iPhone, iPad, Apple Watch, Apple TV и Mac

Установка загруженных шрифтов

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

Ознакомиться со списком стандартных шрифтов можно — cssfontstack.com

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

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

@font-face {
font-family: ‘MyAwesomeFont’; /* Придумайте название для шрифта */
src: url(‘fonts/MyAwesomeFont.eot’); /* IE9 */
src: url(‘fonts/MyAwesomeFont.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘fonts/MyAwesomeFont.woff2’) format(‘woff2’), /* Самые современные браузеры */
url(‘fonts/MyAwesomeFont.woff’) format(‘woff’), /* Современные браузеры */
url(‘fonts/MyAwesomeFont.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘fonts/MyAwesomeFont.svg#svgFontName’) format(‘svg’); /* iOS */
}

1 2 3 4 5 6 7 8 9

@font-face { font-family’MyAwesomeFont’;/* Придумайте название для шрифта */ srcurl(‘fonts/MyAwesomeFont.eot’);/* IE9  */ srcurl(‘fonts/MyAwesomeFont.eot?#iefix’)format(’embedded-opentype’),/* IE6-IE8 */ url(‘fonts/MyAwesomeFont.woff2’)format(‘woff2’),/* Самые современные браузеры */ url(‘fonts/MyAwesomeFont.woff’)format(‘woff’),/* Современные браузеры */ url(‘fonts/MyAwesomeFont.ttf’)format(‘truetype’),/* Safari, Android, iOS */ url(‘fonts/MyAwesomeFont.svg#svgFontName’)format(‘svg’);/* iOS */ }

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

p {
font-family: ‘MyAwesomeFont’, sans-serif;
}

1 2 3

p { font-family’MyAwesomeFont’,sans-serif; }

Больше примеров

Все свойства шрифта в одном объявлении
Этот пример демонстрирует, как использовать сокращенное свойство для установки всех свойств шрифта в одном объявлении.

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

Свойство	Описание
font	Устанавливает все свойства шрифта в одном объявлении
font-family	Определяет семейство шрифтов для текста
font-size	Определяет размер шрифта текста
font-style	Определяет стиль шрифта для текста
font-variant	Определяет, должен ли текст отображаться шрифтом с маленькой буквы
font-weight	Определяет вес шрифта

❮ Prev
Next ❯

Пожалуйста, включите JavaScript для просмотра комментариев, предоставленных Disqus.