Css font-weight property

Свойства 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 (начертание строчных будет таким же, как и у заглавных букв). Для русского языка это свойство используется крайне редко.

Как сделать жирный шрифт на HTML и CSS

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

Жирный текст на HTML

Для выделения определенного текста жирным используются специальные HTML теги — <b> и <strong>. Например следующий код:

<p>Обычный текст.</p>
<p><b>Жирный текст</b>.</p> 
<p><strong>Жирный текст strong</strong>.</p>

<p>Обычный текст.</p>
<p><b>Жирный текст</b>.</p>
<p><strong>Жирный текст strong</strong>.</p>

На выходе дает такую картинку:

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

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

В принципе, для поисковиков рекомендуют использовать именно .

Вы также можете встретить прописанный в HTML жирный шрифт с помощью стилей:

<p>Пример жирного текста.</p>
<p>Пример текста с <span>жирным</span> словом.</p>

<p>Пример жирного текста.</p>
<p>Пример текста с <span>жирным</span> словом.</p>

На сайте это отображается так:

Не смотря на то, что код жирного текста для HTML работает корректно, так делать не следует. Все стили оформления должны быть вынесены в CSS файл. Поэтому в примере выше вы должны были для тегов <p> и <span> указать соответствующий класс, а затем прописать его оформление в таблице стилей. Такие вот правила оформления кода. Поэтому для жирного шрифта в HTML используйте тег <strong>.

Жирный текст на CSS

Дабы сделать в CSS жирный шрифт используется свойство font-weight. С его помощью указывается «насыщенность» фрагмента текста. Значения могут быть от 100 до 900, но наиболее часто используемые это:

• bold (жирный) — 700 по умолчанию;
• normal (обычный) — 400 по умолчанию.

Есть также варианты значений bolder и lighter, которые меняют шрифт в зависимости от родителя на более или менее жирный соответственно.

Чтобы задать жирный текст в CSS нужно тому или иному элементу задать какой-то стиль, например:

<p>Обычный текст с <span>жирным выделением</span> по центру.</p>

<p>Обычный текст с <span>жирным выделением</span> по центру.</p>

Далее в CSS стилях вы определяете для него жирность вместе с другими свойствами по типу подчеркивания текста и т.п.:

. my-bold-font {
    color: black;
    font-weight: 700; 
 }

. my-bold-font {
color: black;
font-weight: 700;
}

Либо можно написать:

. my-bold-font {
    color: black;
    font-weight: bold;
 }

. my-bold-font {
color: black;
font-weight: bold;
}

Разницы нет никакой. Кстати, если говорить о HTML теге <strong>, то для него по умолчанию прописан такой стиль:

strong {
    font-weight: bold;
}

strong {
font-weight: bold;
}

Тут хотелось отметить один небольшой нюанс, который мне рассказали на курсах верстки — если вы создаете для какого-то элемента новый класс, то желательно использовать более-менее «понятное название». Например, в примере выше стиль class=»my-bold-font» выглядит логичнее чем class=»new-font», т.к. можно отчасти понять его назначение. Это плюс для тех, кто будет смотреть и использовать вашу верстку в дальнейшем.

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

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

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

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

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

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

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

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

Пример с изменением размера:

Результат:

Текстовая строка размером 13 пикселей.

Текстовая строка размером 16 пикселей.

Описание

Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900
с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет
значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое
установлено по умолчанию) эквивалентно 400, стандартный полужирный текст —
значению 700.

Значения

Насыщенность шрифта задаётся с помощью ключевых слов: bold
— полужирное начертание, normal
— нормальное начертание. Также допустимо использовать условные единицы от 100 до 900. Значения bolder
и lighter
изменяют жирность относительно насыщенности родителя, соответственно, в большую и меньшую сторону.

HTML5
CSS2.1
IE
Cr
Op
Sa
Fx

font-weight

Duis te feugifacilisi

Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet
dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud
exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.

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

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

Браузеры

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

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

Шрифт может иметь следующие стили:

• normal
  — обычный (по умолчанию)
• italic
  — курсив
• oblique
  — наклонный

Стиль шрифта

это курсив

а это наклонный текст

И чем спрашивается, они отличаются?

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

Property Values

Возможности начертания в html

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

Для начала разберемся с жирным начертанием текстовых элементов.

Чтобы увеличить толщину букв, существуют такие парные теги как <b> и <strong>. В современных браузерах использование этих инструментов отображается одинаково, так как они форматируют текст в жирный. Однако их предназначение различно. Поэтому их нельзя назвать эквивалентными и использовать только какой-то один из них.

Теперь рассмотрим такие теги, как <i> и <em>.

Они форматируют стандартный шрифт в курсивный. Думаю, вы зададите логически возникающий вопрос: «А эти элементы тоже разняться между собой по принципу тегов <b> и <strong>?». Вопрос правильный. И вы правы!

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

Не обманитесь, отсутствием жирного или курсива

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

К примеру возьмём шрифт Lora, предоставляемый Google Web Fonts. Если вы последуете дефолтным рекомендациям по внедрению шрифта, то вы получите только одно начертание, что даст вам следующие результаты в браузере Chrome для текста, заключенного в и

Рис. 3: Lora в ложном жирном и ложном курсивном начертании

На первый взгляд это выглядит не так плохо как слово «Yikes!», использованное выше, но вы можете заметить что жирный текст не такой уж и жирный, а курсив выглядит совсем не как закругленные элегантные глифы на странице с примерами начертаний Lora. Ваш текст может включать стилизацию жирным или курсивом, явную или неявную, но в случае отсутствия подобных начертаний в дело вступит браузер. А вот что вы хотели бы получить на самом деле:

Рис. 4: Настоящее жирное и курсивное начертание шрифта Lora

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

Рис. 5: Шрифтовой веб-интерфейс с дефолтными настройками

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

Рис. 6: Шрифтовой веб-интерфейс со страшной красной шкалой

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

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

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

Перевод статьи Say No to Faux Bold автора Alan Stearns

Свойства 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 задает дополнительное расстояние между словами текста:

h1 { word-spacing: 5px }

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

font: font-size font-family

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

Например, чтобы задать для текста абзацев шрифт «Times New Roman» размером 10 пунктов, достаточно написать следующее правило CSS:

p { font: 10pt «Times New Roman» }

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

p { font: italic 12px sans-serif }

Полезности

• HTML шорты: посторонние шрифты. Про подключение шрифтов и методы оптимизации.
• Статья о font-display. В ней кроме прочего приведена наглядная схема того, как работают все значения свойства.
• Исчерпывающее руководство по стратегиям загрузки веб-шрифтов. Подробный разбор плюсов и минусов методов подключения и оптимизации шрифтов.
• Оптимизация шрифтов. В статье разобраны разные методы: использование сабсетов шрифтов в зависимости от языка, HTTP-кеширование, Font Loading API и так далее.
• Доклад Вадима Макеева про шрифты.
• Subsetting Fonts with Glyphhanger. Статья о том, как использовать инструмент для создания сабсетов.

Font — сборные правила в языке стилей CSS

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

В большинстве случае порядок значений свойств в сборных правилах не важен, но вот в Font это не так. Здесь важен порядок следования значений и он должен быть именно таким, как показано на приведенном чуть выше скриншоте (кстати, скриншот сделан в snagit).

Т.е. писать нужно будет примерно так:

font: italic small-caps bold 12px/12px verdana;

А знаете почему обязательно указывать в этом сборном правиле значения для «font-family» и «font-size»? Да потому, что они не имеют как таковых значений по умолчанию (ибо они берутся из настроек браузера пользователя, как мы узнали чуть выше по тексту). Поэтому, если вы не хотите переопределять гарнитуру или размер шрифта, то сборное правило Font использовать не стоит (лучше использовать отдельные).

Т.о. его в основном используют для тегов Html или Body, а для внутренних элементов, у которых гарнитура и размер фонта должны будут наследоваться, чаще всего используют отдельные Css свойства (font-weight, size, style).

Если для внутренних элементов использовать это составное правило, то придется обязательно прописывать гарнитуру и размер. А если вы потом захотите их поменять? Что, будете лазить по всем составным сборным правилам Font в коде? Это неудобно. Поэтому оно и используется в основном только для внешних контейнеров. Но это так, размышления на тему.

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

font:bold 4em/3em arial, "comic sans ms", sans-serif;

Т.е. здесь задается жирное начертание, указывается размер, высота линии и гарнитура. Ну, или еще проще:

font: 10px arial, sans-serif;

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Использую для заработка