Css какое свойство определяет степень жирности шрифта: Свойство font-weight, насыщенность шрифта — Оформление текста — HTML Academy – Способы задания шрифтов в CSS

Работаем с насыщенностью шрифтов в CSS

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

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

CSS-значение Описание
100 Тонкий
200 Сверхлегкий
300 Легкий
400 Нормальное начертание (базовый)
500 Средний
600 Полужирное начертание
700 Жирный шрифт
800 Сверхжирное начертание
900 Плотное начертание
normal Эквивалент значения 400 в CSS
CSS font bold Эквивалент значения 700 в CSS
Bolder На один уровень плотности больше, чем у родительского элемента
Lighter На один уровень плотности меньше, чем у родительского элемента
  • Вы будете сталкиваться с различными описаниями этих уровней, так как на данный момент не существует единых и универсальных названий и значений для них;
  • Если нужно добиться более точных настроек насыщенности шрифтов, то я не рекомендую использовать относительные значения плотности (то есть lighter или bolder), а вместо них использовать числовые значения;
  • В типографике каждый уровень насыщенности представляет собой отдельный шрифт, разработанный печатником. Из наиболее распространенных шрифтов для веб-страниц, лишь некоторые позволяют изменять уровни насыщенности (зачастую они представлены лишь в значениях 400 и 700, а во многих случаях только 400).

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

Уровень плотности шрифта Алгоритм выбора
100-300 Если указанная насыщенность находится в этом диапазоне, то при отсутствии нужного уровня производится подбор подходящего варианта в порядке возрастания значения.
400 Сначала проверяется значение 500. Если оно отсутствует, то подбор продолжается по вариантам ниже 400 в порядке убывания (то есть, 300-100), а затем по значениям выше 500 в порядке возрастания (то есть, 600-900).
500 Сначала проверяется значение 400. Если оно отсутствует, то подбор продолжается по вариантам ниже 400 в порядке убывания (то есть, 300-100), а затем по значениям выше 500 в порядке возрастания (то есть, 600-900).
600-900 Проверяются уровни насыщенности выше указанного значения, а затем перебираются значения ниже указанного в убывающем порядке.

Фальшивое жирное начертание:

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

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

/* запрещаем браузеру синтезировать полужирный стиль шрифта */
font-synthesis: none;

Прежде чем использовать о font-synthesis в своих проектах, проверьте браузерную совместимость.

Я думаю, что стоит сразу же ответить на вопросы, которые могут возникнуть:

Почему свойство font-weight принимает лишь девять числовых значений?

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

Почему бы не использовать строчные значения (CSS font weight bold)для указания насыщенности в CSS?

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

Почему числовые значения насыщенности в CSS начинаются с 100, а не с 1?

Шрифтовая шкала 100-900 продиктована форматом шрифта TrueType, в котором 400 – это регулярный стиль (то есть, базовый). Такая же шкала используется в CSS и в формате OpenType.

Данная публикация представляет собой перевод статьи «How To Fine-Tune Your Font Weights In CSS?» , подготовленной дружной командой проекта Интернет-технологии.ру

Изменение свойств текста

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

font-family

Свойство font-family позволяет установить шрифт, которым будет отображаться текст веб-страницы, например, Times New Roman, Arial или Verdana.

Определяемые шрифты должны быть установлены на компьютере пользователя, поэтому совершенно не разумно использовать редкие и мало известные шрифты. Существуют несколько отборных "безопасных" шрифтов (наиболее часто используются шрифты arial, verdana, times new roman), но вы можете определять более одного шрифта, разделяя их запятыми. Это делается для того, чтобы в том случае, когда у пользователя не установлен первый шрифт из определенных в свойстве, то браузер будет искать следующий по списку шрифт, затем следующий, и так до тех пор, пока не будет найден установленный у пользователя шрифт, либо будет достигнут конец списка. Такая возможность очень полезна, так как иногда на разных компьютерах может устанавливаться разный набор шрифтов. Таким образом, например, декларация "

font-family: arial, helvetica" может использоваться для определения соответствующего шрифта на PC (на котором традиционно устанавливается шрифт arial, но нет шрифта helvetica) и на Apple Mac (на котором традиционно нет шрифта arial, и в этом случае будет использован шрифт helvetica).

Внимание: Если имя шрифта состоит из нескольких слов, то его следует заключать в кавычки, например, font-family: "Times New Roman".

font-size

Свойство font-size задает размер шрифта. Будьте с этим свойством осторожны: не стоит использовать в качестве заголовков параграфы, отображаемые шрифтом большого размера; для этого есть специальные теги <h2>, <h3>, <h4>, <h5>, <h5>, <h6>, которые имеют массу достоинств, даже если в действительности шрифт параграфа будет больше шрифта заголовка (что не должны делать разумные люди).

font-weight

Свойство font-weight определяет толщину или жирность шрифта. На практике обычно используют два его состояния: font-weight: bold и font-weight: normal. Хотя в теории оно также может принимать значения bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 и 1000. Однако, посмотрев на то, как большинство браузеров отказываются понимать эти значения, вы поймете, что гораздо безопаснее иметь дело всего лишь со значениями bold и normal.

font-style

Свойство font-style определяет, будет ли текст отображаться курсивом или нет. Оно может быль либо font-style: italic, либо font-style: normal.

text-decoration

Свойство text-decoration определяет подчеркнутость текста. Оно может быть:

  • text-decoration: overline – помещает горизонтальную линию над текстом.
  • text-decoration: line-through – помещает горизонтальную линию через текст, создавая эффект перечеркивания.
  • text-decoration: underline - помещает горизонтальную линию под текст, создавая эффект подчеркивания. Не стоит использовать, так как обычно пользователи предполагают, что подчеркнутый текст – ссылка.

Как правило, данное свойство используется для оформления ссылок, в частности чтобы убрать подчеркивание при помощи значения text-decoration: none.

text-transform

Свойство text-transform позволяет изменить регистр букв текста.

  • text-transform: capitalize – переводит первые буквы всех слов в верхний регистр.
  • text-transform: uppercase – переводит все буквы в верхний регистр.
  • text-transform: lowercase - переводит все буквы в нижний регистр.
  • text-transform: none – попробуйте сами это значение.

body {
   font-family: arial, helvetica, sans-serif;
   font-size: 0.8em;
}

h2 {
   font-size: 2em;
}

h3 {
   font-size: 1.5em;
}

a {
   text-decoration: none;
}

strong {
   font-style: italic;
   text-transform: uppercase;
}

Разбивка текста

Свойство letter-spacing и свойство word-spacing определяют расстояние между буквами и словами соответственно. Их значением может быть число в любых единицах измерения, либо ключевое слово normal.

Свойство line-height определяет высоту строки элемента, не влияя на размер шрифта. Значением может быть число (которое будет множителем размера шрифта. Например, "2" означает, что высота строки в два раза больше размера шрифта.), либо проценты, либо слово normal.

Свойство text-align выравнивает текст внутри элемента. Принимает значения left (выравнивание по левому краю), right (выравнивание по правому краю), center (выравнивание по центру) или justify (равномерное выравнивание по ширине).

Свойство text-indent создает отступ на заданную величину первой строки параграфа. Подобное форматирование традиционно для полиграфии и редко в цифровых средствах информации.


p {
   letter-spacing: 0.5em;
   word-spacing: 2em;
   line-height: 1.5;
   text-align: center;
}

CSS :: Шрифты

Шрифты в CSS

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

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Шрифты</title>

	<style>
	
		.f_1{
		font-family: arial, tahoma, sans-serif;
		}
		
		.f_2{
		font-family: gabriola;
		}
		
		.f_3{
		font-family: "high tower text", sans-serif;
		}
		
		.f_4{
		font-family: "monotype corsiva", serif;
		}
		
		.f_5{
		font-family: verdana, arial;
		}
		
	</style>
	
</head>
<body>

	<p>
		Ко мне применяется шрифт Arial.
	</p>
	
	<p>
		Ко мне применяется шрифт Gabriola.
	</p>
	
	<p>
		Ко мне применяется шрифт семейства sans-serif.
	</p>
	
	<p>
		Ко мне применяется шрифт Monotype Corsiva.
	</p>
	
	<p>
		Ко мне применяется шрифт Verdana.
	</p>
	
</body>
</html>

Пример №1. Использование различных видов шрифта

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

Установка шрифта и css-свойство font-family

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

В любой операционной системе по умолчанию доступны следующие стандартные семейства шрифтов:

  • serif – шрифты с засечками;
  • sans-serif – шрифты без засечек (рубленые шрифты);
  • cursive – курсивные шрифты (часто напоминают рукописный текст);
  • fantasy – декоративные (художественные) шрифты;
  • monospace – моноширинные шрифты (все буквы одинаковой ширины).

Если указанные в качестве значения свойства font-family шрифты не будут найдены браузером на компьютере пользователя, а название семейства шрифтов будет отсутствовать, то браузер использует шрифт, установленный по умолчанию. Обычно это шрифт Times New Roman.

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

CSS позволяет также задать ряд других характеристик шрифта: размер, начертание, насыщенность. Так размер задается наследуемым свойством font-size, которое в качестве значений принимает все доступные в CSS единицы измерения, проценты, которые считаются относительно размера шрифта родительского элемента, и ряд специальных значений: xx-small, x-small, small, medium (по умолчанию), large, x-large, xx-large, smaller, larger, где последние два значения определяют, соответственно, размер меньший или больший, чем у родительского элемента (см. пример №2).

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Установка размера шрифта</title>
	
	<style>

	
		.size_1{
		font-size: smaller;
		}
	
		.size_2{
		font-size: medium;
		}
		
		.size_3{
		font-size: larger;
		}
		
		.size_4{
		font-size: 150%;
		}
		
		.size_5{
		font-size: 1.5em;
		}
		
	</style>
	
</head>
<body>

	<p>
		font-size: smaller;
	</p>
	
	<p>
		font-size: medium; 
	</p>
	
	<p>
		font-size: larger;
	</p>
	
	<p>
		font-size: 150%;
	</p>
	
	<p>
		font-size: 1.5em;
	</p>
	
</body>
</html>

Пример №2. Определение размера шрифта

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

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

Насыщенность (жирность) шрифта устанавливается при помощи наследуемого свойства font-weight, принимающего ряд значений, определяющих степень жирности: normal (по умолчанию), bold, bolder, lighter и числа от 100 до 900 с шагом 100, где bolder и lighter определяют, соответственно, жирность меньшую или большую, чем у родительского элемента (см. пример №3).

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Установка насыщенности шрифта</title>

	<style>
	
		p{
		width: 400px;
		margin: 2em;
		}
	
		.weight_1{font-weight: normal;}
		.weight_2{font-weight: bold;}
		.weight_3{font-weight: bolder;}
		.weight_4{font-weight: lighter;}
		.weight_5{font-weight: 600;}
		
	</style>
	
</head>
<body>

	<p>
		normal соответствует значению 400,
		значения 100, 200, 300 не будут работать.
	</p>
	
	<p>
		bold соответствует значению 600. 
	</p>
	
	<p>
		У родительского элемента, т.е. у тела документа,
		по умолчанию браузер использует жирность normal,
		поэтому значение bolder повышает ее до bold.
	</p>
	
	<p>
		 lighter не сработает, т.к. браузеры на данный 
		 момент поддерживают только значения 400 и 600.
	</p>
	
	<p>
		600 соответствует bold.
	</p>
	
</body>
</html>

Пример №3. Установка насыщенности шрифта

На данный момент значения 100 – 500 свойства font-weight соответствуют нормальному начертанию шрифта, а 600 – 900, соответственно, жирному начертанию. В дальнейшем возможно станут доступны и остальные числовые значения.

Стиль шрифта и css-свойство font-style

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

  • normal – шрифт отображается стандартным способом; значение используется браузером по умолчанию;
  • italic – шрифт отображается курсивом;
  • oblique – шрифт отображается наклонным.

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

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

Капитель и css-свойство font-variant

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

Сокращенное css-свойство font

Итак, чтобы изменять различные характеристики шрифта можно воспользоваться одним из доступных свойств: font-family, font-size, font-weight, font-style, font-variant. Однако в CSS имеется возможность задать через пробел несколько характеристик шрифта одновременно в одном сокращенном наследуемом свойстве font. При этом размер шрифта и его семейство должны указываться обязательно. Также имеет значение порядок указания значений свойств: первыми, если они конечно будут указываться, должны записываться значения свойств font-style, font-variant или font-weight в любом порядке, затем необходимо указывать значение свойства font-size, а также при необходимости через слэш '/' значение свойства line-height, в конце указывается значение свойства font-family (см. пример №4). В случае отсутствия значения какого-нибудь свойства браузер использует значение по умолчанию.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Сокращенное свойство font</title>

	<style>
	
		.font_1{
		font: 1.2em/25px serif;
		}
		
		.font_2{
		font: bold italic 0.9em "courier new", serif;
		}
		
		.font_3{
		font: normal small-caps 1em/1.2em verdana;
		}
		
	</style>
	
</head>
<body>

	<p>
		font_1{font: 1.2em/25px serif;}.<br>
		Здесь указаны размер, высота строки и семейство.
	</p>
	
	<p>
		font_2{font: bold italic 0.9em "courier new", serif;}.<br>
		Здесь &ndash; насыщенность, начертание, размер, шрифт + семейство.
	</p>
	
	<p>
		font_3{font: normal small-caps 1em/1.2em verdana;}<br>
		Значение normal будет применено сразу к насыщенности<br>
		и начертанию, т.к. оно присутствует у обоих свойств.
	</p>
	
</body>
</html>

Пример №4. Одновременная установка нескольких характеристик шрифта

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

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

Быстрый переход к другим страницам

НОУ ИНТУИТ | Лекция | Шрифты в CSS

Аннотация: Приводятся примеры работы со шрифтами, общие способы и методы применения шрифтов, их характеристики и атрибуты.

Ключевые слова: css, шрифт, семейство шрифта, CSS1, браузер, Internet, font-variant, 'font-size-adjust', 'font-stretch', narrow, condenser, SEMI, oblique, cursive, 'fantasy', monospace

Параметры шрифтов в CSS определяют шрифт текста.

Примеры:

  1. Этот пример показывает, как задать шрифт текста.
    <html>
    <head>
    <style type="text/css">
    h2 {font-family: courier}
    h3.font {font-family: sans-serif}
    pre {font-family: times}
    </style>
    </head>
    
    <body>
    <pre>применяется шрифт "times"</pre>
    <h2>заголовок h2</h2>
    <h3>заголовок h3</h3>
    </body>
    
    </html>
  2. Этот пример показывает, как задать размер шрифта.
    <html>
    <head>
    </head>
    
    <body>
    <ol>
    <li>first</li>
    <li>second</li>
    </ol>
    <p>текст параграфа</p>
    <ul>
    <li>first</li>
    <li>second</li>
    </ul>
    </body>
    
    </html>
  3. Этот пример показывает, как задать стиль шрифта.
    <html>
    <head>
    <style type="text/css">
    ol {font-style: normal}
    ul {font-style: oblique}
    p {font-style: italic}
    </style>
    </head>
    
    <body>
    <p>Текст параграфа. Текст параграфа. Текст параграфа.</p>
    <ol>
    <li>первый пункт</li>
    <li>второй пункт</li>
    <li>третий пункт</li>
    </ol>
    <ul>
    <li>первый пункт</li>
    <li>второй пункт</li>
    <li>третий пункт</li>
    </ul>
    </body>
    
    </html>
  4. Этот пример показывает, как задать вариант шрифта.
    <html>
    <head>
    </head>
    
    <body>
    <h2>Заголовок h2</h2>
    <h3>Заголовок h3</h3>
    </body>
    
    </html>
  5. Этот пример показывает, как задать степень жирности шрифта.
    <html>
    <head>
    <style type="text/css">
    h2.first {font-weight: 800}
    h3.second {font-weight: bold}
    h4.third {font-weight: 900}
    </style>
    </head>
    
    <body>
    <h2>заголовок h2</h2>
    <h3>заголовок h3</h3>
    <h4>заголовок h4</h4>
    </body>
    
    </html>
  6. Этот пример показывает, как использовать сокращенную запись для задания всех свойств шрифта в одном объявлении.
    <html>
    <head>
    <style type="text/css">
    p
    {
    font: oblique small-caps bold -5px serif
    }
    </style>
    </head>
    
    <body>
    <p>параграф параграф параграф параграф параграф параграф</p>
    </body>
    
    </html>

Отправить ответ

avatar
  Подписаться  
Уведомление о