Css тонкий шрифт: Как сделать самый тонкий шрифт

Содержание

Как сделать самый тонкий шрифт



У меня есть шрифт в photoshop:

и когда я ставлю font-weight: 100 , результат тоже bold .

Font-size:72px, font-family:"Montseratt"

Когда я меняю шрифт font-weight с 300 на 400 , также меняются и изменения (для шрифта font-weight: 100, 200, 300 то же самое). Я предполагаю, что это означает, что свойство работает, но как я могу сделать шрифт тоньше, чем значение, которое может установить это свойство

html css fonts photoshop
Поделиться Источник Maks     07 мая 2018 в 06:11

2 ответа


  • Какой самый узкий шрифт в iOS

    Я пытаюсь найти самый узкий шрифт, который я могу использовать в iOS. Пространство экрана ограничено, и я хочу что-то, что я могу использовать в размере 11 пунктов, все еще сохраняя 8 символов на линии. Доступен ли шрифт Apple Watch для iPhone?

  • Как сделать/отображения шрифтов-шрифт удивительный «thin»?

    SSCCE JSFiddle здесь. Я использую этот и этот шрифт от font-awesome на своей веб-странице. Но знаки меньше-чем и больше-чем кажутся действительно толстыми. Я дал им размер 90px, потому что именно такого размера я хочу, чтобы они были, но не настолько толстыми. font-weight , похоже, вообще не…



3

ты можешь это сделать.

вы делаете опечатку это font-family: 'Montserrat', sans-serif; не font-family:"Montseratt"

body {
 font-family: 'Montserrat', sans-serif;
 font-size: 50px;
}

.thin {
  font-weight: 100;
}

.normal {
  font-weight: 400;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,400" rel="stylesheet">

<p>THIN<p>
<p>NORMAL</p>

Поделиться patelarpan     07 мая 2018 в 06:53



0

p.normal {
    font-weight: normal;
}
p.thick {
font-weight: bold;
}
p.thicker {
 font-weight: 900;
}

это может помочь вам

Поделиться Kumar Praveen     07 мая 2018 в 06:15


Похожие вопросы:


Как указать веб-безопасный пользовательский шрифт по умолчанию, если шрифт google недоступен

Ради дизайна я люблю использовать очень большие шрифты в заголовках (около 70-85 пикселей) Чтобы это не переполняло страницу, мне нужен очень тонкий шрифт. Я нашел Poiret One в Google fonts, и он…


самый тонкий способ создания удаленной ветви

Я ищу самый дешевый и тонкий способ создать новую ветку на удаленном от мастера устройстве. Мой вариант использования прост — с помощью автоматизации мне нужно создать новую ветку на удаленном…


Самый тонкий шрифт в Java году

хотелось бы знать, какой шрифт самый тонкий в Java. У меня ограниченное пространство для отображения символов, поэтому я хотел бы взять самый тонкий шрифт. Я имею в виду заданный размер шрифта,…


Какой самый узкий шрифт в iOS

Я пытаюсь найти самый узкий шрифт, который я могу использовать в iOS. Пространство экрана ограничено, и я хочу что-то, что я могу использовать в размере 11 пунктов, все еще сохраняя 8 символов на…


Как сделать/отображения шрифтов-шрифт удивительный «thin»?

SSCCE JSFiddle здесь. Я использую этот и этот шрифт от font-awesome на своей веб-странице. Но знаки меньше-чем и больше-чем кажутся действительно толстыми. Я дал им размер 90px, потому что именно…


Какой шрифт находится в поле поиска?

Пожалуйста, быстро ознакомьтесь с этим сайтом: http://go.frenchlabs.net / Я хочу получить шрифт, который используется в поле поиска. Как ты думаешь, что это? Мне нравится, как это очень тонкий…


Как называется тонкий системный шрифт в iOS 7?

Как называется тонкий системный шрифт в iOS 7? Есть ли способ использовать его, как UIFont systemFontOfSize: ?


Как сделать жирный шрифт тонким, используя CSS, Javascript или jQuery?

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


Как использовать тонкий шрифт roboto в qml

Я пытаюсь использовать тонкий робот шрифта в QML в Linux.I должны установить смелые,тонкие и легкие шрифты на ubuntu. Другие программы, такие как openoffice, показывают мне только roboto. Как я могу…


Как установить шрифт текста как системный тонкий в Swift?

Я хочу установить текст метки как системный тонкий. Прочитал в StackOverflow и нашел такой ответ: labelDescriptionView.font = UIFont(name: System-Thin, size: 15.0) но это не сработало. Как я могу…

font-weight — CSS | MDN

CSS свойство font-weight устанавливает начертание шрифта. Некоторые шрифты доступны только в нормальном или полужирном начертании.

font-weight: normal;
font-weight: bold;


font-weight: lighter;
font-weight: bolder;

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;


font-weight: inherit;
font-weight: initial;
font-weight: unset;

Значения

normal
Нормальное начертание. То же, что и 400.
bold
Полужирное начертание. То же, что и 700.
lighter
Изменяет начертание относительно насыщенности родительского элемента (сверхтонкое начертание).
bolder
Изменяет начертание относительно насыщенности родителя элемента (сверхжирное начертание).
100, 200, 300, 400, 500, 600, 700, 800, 900
Цифровые значения насыщенности шрифтов, которые позволяют задавать больше, чем нормальное и полужирное начертание.

Недоступность заданного значения

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

  • Если задано значение выше 500, будет использовано первое доступное более жирное начертание (если такого не окажется, то первое доступное более светлое).
  • Если задано значение менее 400, будет использовано первое доступное более светлое начертание (если такого не окажется, то первое доступное более жирное).
  • Если задано значение 400, будет применено 500. Если 500 недоступно, то будет использован алгоритм для подбора значений менее 400.
  • Если задано значение 500, будет применено 400. Если 400 недоступно, то будет использован алгоритм для подбора значений менее 400.

Это означает, что для шрифтов, которые предоставляют только normal и bold начертания, 100-500 normal, и 600-900 bold.

Значение относительных весов

Когда используется жирнее или светлее, следующая таблица используется для вычисления абсолютного веса элемента:

наследуемое значение
жирнее
светлее
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700

Определение веса имени

Значения от 100 до 900, примерно, соответствуют следующим распространённым именам насыщенности:

ЗначениеОбщее название
100Тонкий (Волосяной) Thin (Hairline)
200Дополнительный светлый (Сверхсветлый) Extra Light (Ultra Light)
300Светлый Light
400Нормальный Normal
500Средний Medium
600Полужирный Semi Bold (Demi Bold)
700Жирный Bold
800Дополнительный жирный (Сверхжирный) Extra Bold (Ultra Bold)
900Чёрный (Густой) Black (Heavy)

Интерполяция

Значения font-weight интерполируются  с помощью дискретных шагов (кратные 100). Интерполяция происходит в действительном пространстве чисел и превращается в целое число путём округления до ближайшего числа, кратного 100, со значениями посредине между кратными 100 округлёнными в сторону положительной бесконечности.

Формальный синтаксис

HTML

<p>
  Alice was beginning to get very tired of sitting by her sister on the
  bank, and of having nothing to do: once or twice she had peeped into the
  book her sister was reading, but it had no pictures or conversations in
  it, 'and what is the use of a book,' thought Alice 'without pictures or
  conversations?'
</p>

<div>I'm heavy<br/>
  <span>I'm lighter</span>
</div>

CSS


p {
  font-weight: bold;
}


div {
 font-weight: 600;
}


span {
  font-weight: lighter;
}

Result

BCD tables only load in the browser

CSS-шрифты

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

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

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

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

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

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

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

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

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

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

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

Синтаксис

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

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

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

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

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

Синтаксис

font-weight: normal;
font-weight: bold;
font-weight: lighter;
font-weight: bolder;
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
font-weight: inherit;
font-weight: initial;
Рис. 1. Свойство font-weight

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

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

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

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

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

Синтаксис

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

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

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

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

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

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

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

Синтаксис

font-style: normal;
font-style: italic;
font-style: oblique;
font-style: inherit;
font-style: initial;
Рис. 3. Свойство font-style

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

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

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

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

Синтаксис

font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: smaller;
font-size: larger;
font-size: 14px;
font-size: 0.8em;
font-size: 80%;
font-size: inherit;
font-size: initial;
Значения absolute-size
xx-smallx-smallsmallmediumlargex-largexx-large
Коэффициент масштабирования
3/53/48/916/53/22/13/1
HTML заголовки
h6h5h5h4h3h2
HTML размер шрифта
1234567

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

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

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

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

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

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

Синтаксис:

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

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

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

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

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

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

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

Синтаксис

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

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

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

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

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

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

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

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

Синтаксис

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

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

Учебник CSS для начинающих. Свойства шрифта.

Глава 3

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

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

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

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

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Стиль шрифта</title>
</head>
<body>
<p>это курсив</p>
<p>а это наклонный текст</p>
<p>И чем спрашивается, они отличаются?</p>
</body>
</html>

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

Весьма интересное свойство шрифта font-variant позволяет делать строчные буквы заглавными и уменьшенными.

Значения:

  • normal — нормальный (по умолчанию)
  • small-caps — все буквы заглавные и уменьшенные

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Все буквы заглавные</title>
</head>
<body>
<p>Купи слона!!</p>
</body>
</html>

Свойство CSS font-size — определяет размер шрифта.

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

значения абсолютного размера шрифта:

  • xx-small — очень очень маленький
  • x-small — очень маленький
  • small — маленький
  • medium — средний
  • large — большой
  • x-large — очень большой
  • xx-large — очень очень большой

значения относительного размера шрифта:

  • larger — больше чем размер шрифта родительского элемента
  • smaller — меньше чем размер шрифта родительского элемента

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Размер шрифта</title>
</head>
<body>
<div>
<p>Размер шрифта родительского элемента (блока DIV) равен 18 пикселям</p>
<p>Этот шрифт будет крупнее относительно элемента родителя</p>
<p>А этот шрифт будет мельче относительно элемента родителя</p>
</div>
<p>В блоке ниже размер штифта элемента родителя огромен (60 пунктов), однако дочерние параграфы расположенные в нём имеют собственное абсолютное значение шрифта и к размеру шрифта элемента родителя никак не привязаны.</p>
<div>
<p>xx-small — очень очень маленький</p>
<p>x-small — очень маленький </p>
<p>small — маленький </p>
<p>medium — средний</p>
<p>large — большой</p>
<p>x-large — очень большой</p>
<p>xx-large — очень очень большой</p>
</div>
</body>
</html>

Свойство font-weight — определяет жирность шрифта. Насыщенность шрифта может быть задана относительно шрифта элемента родителя с помощью следующих значений:

  • normal — обычный шрифт
  • bold — полужирный шрифт
  • bolder — жирный шрифт
  • lighter — тонкий шрифт

А также выражается в условном числовом значении от 100 до 900 с шагом 100 (100, 200, 300… 900) где значение 100 тонкий шрифт, а 900 — сверх жирный.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Жирность шрифта</title>
</head>
<body>
<div>
<p>жирный шрифт</p>
<p>тонкий шрифт</p>
<p>жирность шрифта равна 600</p>
</div>
</body>
</html>

Атрибут CSS font-family — указывает одно, два или три имени шрифта из библиотеки шрифтов.

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

Так например запись в стилевом описании P {font-family: Times New Roman, Arial, Verdana;} — будет указывать браузеру пользователя, что данный параграф следует писать с помощью шрифта Times New Roman, а если его по каким то мифическим причинам не окажется в его библиотеке шрифтов то следует использовать шрифт Arial, и уж если и его нет, тогда писать шрифтом Verdana.

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

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

  • serif — шрифты с засечками
  • sans-serif — рубленые шрифты
  • cursive — курсивные шрифты
  • fantasy — декоративные шрифты
  • monospace — моношириные шрифты

Например, если в файле CSS написать P {font-family: Times New Roman, sans-serif;} то это будет значить что если вдруг не окажится шрифта с именем Times New Roman, то следует использовать любой (или определённый в настройках браузера) доступный шрифт из семейства sans-serif — рубленых шрифтов.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Семейство шрифта</title>
<style type=»text/css»>
h4 {font-family: Times New Roman, Verdana, sans-serif;}
p {font-family: Monotype Corsiva, Verdana;}
span {font-family: Comic Sans MS;}
</style>
</head>
<body>
<h4>Купи слона</h4>
<p>У нас Вы можете по <span>выгодным ценам</span> приобрести лучших слонов!!</p>
</body>
</html>

Вы наверняка обратили внимание на тот факт, что все свойства CSS предназначенные для работы со шрифтом начинаются с английского слова font (собственно шрифт).. font-family, font-size и т.д..

Так вот это неспроста.. дело в том, что все эти свойства являются «дочерними» базового атрибута CSS font в довершении главы о нем собственно и пойдёт речь.

Речь будет недолгой.. )) Итак font — (шрифт), являясь базовым атрибутом, может определять одновременно сразу несколько параметров шрифта принимая те или иные значения от следующих атрибутов:

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

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

Предположим нам необходимо написать стилевое описание шрифта для тега <span> и по нашей задумке шрифт для данного тега должен быть: курсивом, жирным, иметь размер 20 пикселей и использовать шрифт Arial

Все это можно осуществить, написав следующие:

span{
font-style: italic;
font-weight: bolder;
font-size: 20px;
font-family: Arial
}

А можно обойтись всего одной строчкой используя базовый атрибут font.

Вот так:

span{font: italic bold 20px Arial}

Мы просто перечислили нужные нам параметры «марки» font. Согласитесь, по-моему, так писать гораздо проще, к тому же код становится более компактным и лёгким для чтения как браузером, так и человеком.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Параметры шрифта</title>
<style type=»text/css»>
span{font: italic bold 20px Arial}
</style>
</head>
<body>
<span>Этот текст написан курсивом, он жирный, имеет размер 20 пикселей и использует шрифт Arial</span>
</body>
</html>
  • Используйте базовый атрибут font если необходимо применить к шрифту элемента более одного свойства.

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

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

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



Работаем с насыщенностью шрифтов в 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?» , подготовленная редакцией проекта.

Fonts CSS HTML шрифты, цвет и размер текста



Свойства шрифта CSS определяют семейство шрифтов, смелость, размер и стиль текста.


Разница между засечками и шрифтами без засечек


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

В CSS существует два типа имен семейств шрифтов:

  • родовое семейство — группа семейств шрифтов с похожим видом (например, «засечка» или «однодисковая»)
  • семейство шрифтов — конкретная семья шрифтов (например, «Times New Roman» или «Arial»)
Generic familyFont familyОписание
SerifTimes New Roman
Georgia
Шрифты с засечками имеют небольшие линии на концах на некоторых символах
Sans-serifArial
Verdana
«Sans» означает без-эти шрифты не имеют линий на концах символов
MonospaceCourier New
Lucida Console
Все одноместные символы имеют одинаковую ширину

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


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

Семейство шрифтов текста задается с помощью свойства font-family.

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

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

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

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

Пример

p {
    font-family: «Times New Roman», Times, serif;
}

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



Стиль шрифта

Свойство font-style в основном используется для указания текста курсивом.

Это свойство имеет три значения:

  • normal — Текст отображается нормально
  • italic — Текст показан курсивом
  • oblique — Текст «опираясь» (косой очень похож на курсив, но менее поддерживается)

Пример

p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}


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

Свойство font-size задает размер текста.

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

Всегда используйте правильные HTML-теги, например < h2 >-< H6 > для заголовков и < p > для абзацев.

Значение размера шрифта может быть абсолютным или относительным размером.

Абсолютный размер:

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

Относительный размер:

  • Устанавливает размер относительно окружающих элементов
  • Позволяет пользователю изменять размер текста в обозревателях

Примечание: Если размер шрифта не указан, по умолчанию для обычного текста, как и для абзацев, используется 16px (16px = 1em).


Задать размер шрифта с пикселями

Установка размера текста с пикселями дает полный контроль над размером текста:

Пример

h2 {
    font-size: 40px;
}

h3 {
    font-size: 30px;
}

p {
    font-size: 14px;
}

Совет: При использовании пикселов можно по-прежнему использовать инструмент «Масштаб» для изменения размера всей страницы.


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

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

Единица измерения размера em рекомендуется консорциумом W3C.

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

Размер можно вычислить от пикселов к 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 совпадает с предыдущим примером в пикселях. Однако, с размером EM, можно настроить размер текста во всех браузерах.

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


Используйте комбинацию процентов и EM

Решение, которое работает во всех браузерах, заключается в том, чтобы задать размер шрифта по умолчанию в процентах для элемента <BODY>:

Пример

body {
    font-size: 100%;
}

h2 {
    font-size: 2.5em;
}

h3 {
    font-size: 1.875em;
}

p {
    font-size: 0.875em;
}

Наш код теперь отлично работает! Он показывает тот же размер текста во всех браузерах, и позволяет всем браузерам, чтобы увеличить или изменить размер текста!


Вес шрифта

Свойство font-weight задает вес шрифта:

Пример

p.normal {
    font-weight: normal;
}

p.thick {
    font-weight: bold;
}


Отзывчивый размер шрифта

Размер текста может быть установлен с помощью vw единицы, что означает «ширина видового экрана».

Таким образом размер текста будет следовать размеру окна браузера:

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

Пример

<h2>Hello World</h2>

Видовой экран — это размер окна обозревателя. 1ВВ = 1% ширины видового экрана. Если видовой экран шириной 50 см, 1ВВ составляет 0.5 cm.


Шрифт вариант

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

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

Пример

p.normal {
    font-variant: normal;
}

p.small {
    font-variant: small-caps;
}


Другие примеры

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


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

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

Правила Font (Weight, Family, Size, Style) и Line Height для оформления шрифтов в CSS

Обновлено 27 мая 2021
  1. Font-family — задаем тип и гарнитуру шрифта в CSS
  2. Font-size — задаем в CSS размер для шрифта
  3. Свойства font-weight, line-height и font-style
  4. Сборные правила Font в языке стилей CSS

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня будет очередная статья, вносящая свой вклад в составление справочника по Css.

Речь в ней пойдет уже не о селекторах, а о свойствах таблиц каскадных стилей, а именно о свойствах, которые используются для оформления шрифтов в Html коде: font-family (weight, size, style, variant) и line-height. Постараюсь при этом максимально наглядно показать их работу, рассказать о синтаксисе и способах использования.

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

Font-family — задаем тип и гарнитуру шрифта в CSS

Нужно будет предварительно сказать, что все свойства, используемые для оформления шрифтов (Font и Line Height) в Html коде, наследуются:

Итак, с помощью font-family можно задать гарнитуру и тип шрифта, который вам требуется применить к какому-то конкретному тегу (например, к абзаца P или же заголовков). Понятно, что элемент, к которому требуется применить это свойство, вы будете задавать в Css коде с помощью селекторов (о них мы с вами уже подробно поговорили и в начале публикации приведена соответствующая ссылка).

Позволю себе напомнить вам синтаксис написания CSS правил:

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

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

В приведенном примере браузер сначала поищет на компьютере пользователя установленный Arial, и если его найдет, то данный Html элемент им и будет в результате отрисован. А если Arial на компьютере пользователя найден не будет? Тогда браузер поищет Geneva, а в случае неудачи — Helvetica, ибо он идет следующим по убыванию приоритета в font-family. Понятно?

Ну, а если пользователь окажется настолько экзальтированным, что ничего из перечисленного в этом свойстве на его компе найдено не будет, то данный элемент будет отрисован тем шрифтом, который у этого пользователя выбран по умолчанию для семейства sans-serif (без засечек или, по другому, рубленные). Существуют еще семейства Serif (с засечками) и monospace (моноширинные), которые вы также можете использовать в Font-family для указания типа.

Да чего я объясняю?! Ведь это все в точности повторяет задание шрифтов в теге Font через атрибут Face, который сейчас считается не рекомендуемым (не валидным) и которому на смену как раз и пришло CSS свойство Font.

Тамже вы можете более подробно почитать про то, как пользователь может назначить умолчательные фонты различных типов:

Еще, кстати, написано, что существует проблема использования на сайте абсолютно любых фонтов, ибо они должны быть обязательно установлены на компьютерах пользователей. Считается, что с большой долей вероятности на компьютере пользователя будут установлены только около десятка (Arial, Verdana, Times New Roman, Tahoma, Georgia, Trebuchet MS, Courier New, Comic Sans MS), а значит именно их вы можете без опаски использовать в правилах с Font-family.

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

Но вернемся к синтаксису нашего CSS свойства. Я уже упомянул, что здесь есть одна маленькая особенность. Если в названии гарнитуры (которую вы хотите использовать на сайте) имеются пробельные символы, то это название обязательно нужно будет заключить в двойные кавычки.

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

Font-size — задаем в CSS размер для шрифта

Следующее свойство Font-size служит для задания размера шрифта для какого-либо элемента в Html коде. У него есть свои особенности. Размер можно задавать как в абсолютных, так и в относительных единицах:

  1. Можно задать размер жестко, используя для этого пиксели:
    font-size:10px;
  2. Можно использовать относительные единицы em и ex. Подробнее о них вы можете прочитать по ссылке, но если говорить кратко, то «em» — это высота шрифта, заданная для данного элемента по умолчанию или унаследованная, а «ex» — это высота латинской буквы «x» в нужной вам гарнитуре.

    Но размер «Ex» для разных браузеров может отличаться по отношению к «Em», поэтому в CSS свойствах font-size гораздо чаще используют относительные единицы размера шрифта в виде «Em». Например, если для заголовка задать:

    font-size:2em;

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

  3. Также относительные размеры в font size можно задавать и с помощью процентов, которые будут считаться от размера гарнитуры, который данный элемент получил по наследству. «Em», кстати, делает тоже самое. Один «Em» и 100% — это одно и то же:

    font-size:200%;

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

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

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

    Все шрифтовые правила наследуются. Т.е., если вы написали в каком-то элементе правило Font-size, то этот размер будет передаваться во все вложенные в него теги (наследоваться). Это можно перебить уже прописанным для вложенного элемента правилом «Font-size» и т.д.

  4. Можно еще в качестве значений для этого свойства использовать одно из семи обозначений: xx-small, x-small, small, medium, large, x-large или xx-large. Что это такое?

    А это полный аналог того, как мы задавали размеры в чистом Html с помощью тега Font и атрибута Size. Но только там мы использовали числа от 1 до 7, а здесь используются названия, но суть осталась прежней, и размеры, заданные таким образом и через возможности чистого html, будут коррелироваться между собой:

  5. Ну и последний способ задания относительных размеров заключается в использовании «larger» и «smaller», которые позволяют увеличивать и уменьшать размер шрифта относительно унаследованного (примерно на 17 процентов, но зависит от конкретного браузера). Этот способ тоже имеет аналог в чистом Html, т.к. ранее для этого использовались теги Small и Big.

Свойства 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 дадут вам в итоге нормальный, а все что больше — жирный.

Кстати, в одной из последних статей мы рассматривали такое понятие, как Css стили принятые по умолчанию, для оформления элементов в Html коде, если в файле таблиц каскадных стилей для этих элементов ничего не задано. Так вот там, например, для заголовков h2-H6 и тегов логического и физического выделения жирным (strong и B) определен стиль font weight со значением bolder:

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

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

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

Расстояние от текста (его размер задается через «font-size») откладывается симметрично (вверх и вниз одновременно). По умолчанию Css свойство «line height» для всех Html элементов с текстом будет иметь значение Normal (посмотреть это можно для любого свойства в спецификации в столбце «Initial value»), которое зависит от типа используемого шрифта и вычисляется браузером автоматически.

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

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

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

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

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

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

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

А знаете почему обязательно указывать в этом сборном правиле значения для «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;

Это минимально возможная форма написания, в которой присутствуют только обязательные свойства «font-family» и «font-size». Все остальные будут использоваться браузером со значениями принятыми по умолчанию (normal). Описанный выше синтаксис сборного правила Font взят из спецификации:

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

font-weight | CSS-уловки

Свойство font-weight устанавливает вес или толщину шрифта и зависит либо от доступных начертаний шрифта в семействе шрифтов, либо от веса, определенного браузером.

  пролет {
    font-weight: жирный;
}  

Свойство font-weight принимает либо значение ключевого слова, либо предварительно определенное числовое значение. Доступные ключевые слова:

  • нормальный
  • полужирный
  • полужирный
  • Зажигалка

Доступные числовые значения:

  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

Значение ключевого слова normal сопоставляется с числовым значением 400 , а значение жирным шрифтом сопоставляется с 700 .

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

Если шрифт имеет жирную («700») или обычную («400») версию как часть семейства шрифтов, браузер будет использовать это. Если они недоступны, браузер будет имитировать собственную полужирную или обычную версию шрифта. Он не будет имитировать другие недоступные веса. Шрифты часто используют такие имена, как «Обычный» и «Легкий» для обозначения любых альтернативных весов шрифта.

Следующая демонстрация демонстрирует использование альтернативных значений веса:

  Оцените эту ручку! 

В приведенной выше демонстрации используется бесплатный шрифт Open Sans, встроенный с помощью Google Web Fonts API. Шрифт загружается со всеми доступными весами шрифтов, и поэтому, используя свойство font-weight , различные доступные веса отображаются, как описано в тексте каждого абзаца. Недоступные веса просто отображают логически ближайший вес.

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

Использование ключевых слов «жирнее» и «светлее»

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

Дочерние элементы не наследуют значения ключевых слов «смелее» и «легче», а вместо этого унаследуют вычисленный вес.

Сопутствующие объекты

Другие ресурсы

Поддержка браузера

Хром Safari Firefox Opera IE Android iOS
Завод Работы Работы Работы Работы Работы Работы

Толщина шрифта устарела в HTML5, но вот новый CSS »

Устарело, атрибуты HTML

Раскрытие: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице.Узнать больше
Атрибут
HTML-тег
Что делает шрифт устаревшим в HTML5, а вот новый CSS ?
Используется для обозначения веса (полужирности) текста. Устарело. Вместо этого используйте CSS.
Элемент Font и его атрибуты устарели Этот атрибут устарел и не должен использоваться. Поддержка этого атрибута браузером ограничена, и его использование может привести к неожиданным результатам. Вместо этого используйте CSS.Узнайте больше, прочитав наше руководство по шрифтам и веб-типографике.

Свойство CSS font-weight указывает, насколько жирным должны быть символы. font-weight может быть присвоено кратное 100 от 100 до 900 (900 — самый жирный). Так, например, это правило (добавленное в HTML-документ в теге STYLE или во внешней таблице стилей) гласит, что элементы

должны иметь вес 900:

  h3 {font-weight: 900; }  

, что означает, что элемент

отображается следующим образом:

Weighty Matters

Вы также можете использовать слова «нормальный» (то же, что и 400), «жирный» (то же, что и 700), «Смелее» (относительное утверждение, означающее сделать текст более жирным, чем окружающий элемент) или «светлее» (сделать текст светлее окружающего элемента).Поскольку немногие шрифты имеют девять оттенков жирности, в большинстве шрифтов от 100 до 500 одинаковы, от 600 до 800 одинаковы, а 900 — самый жирный. Одним из ответвлений этого является то, что, хотя «нормальным» является 400, во многих случаях 100 на самом деле не легче. Если вы не используете гарнитуру со многими доступными значениями толщины шрифта, нет практического способа представить текст с более низким, чем обычно, весом. Чтобы узнать больше об этой теме, см. Наше руководство по шрифтам и веб-типографике.

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

Введение в вес шрифта HTML / CSS

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

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

Если вы хотите попробовать это самостоятельно, скопируйте код и вставьте его в текстовый редактор, например Блокнот или Блокнот ++. Мы сделаем жирность шрифта «жирным».

Как сделать текст полужирным в CSS


< html >
< head >

< style type = text / css>

/ * Styles * /

p {
color: red
font-weight: жирный;
шрифт: 18px Arial, Helvetica, без засечек;
}

style >
head >

< body >

< p > Udacity - это место, где вы можете узнать о толщине шрифта p >

body >
html >

Этот код HTML и CSS, взаимодействующий вместе, поясняется на следующем рисунке:

Результат на вашей веб-странице следующий.Обратите внимание на текст BOLD .

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

Что нужно знать об использовании числовых значений

Хотя на самом деле существуют следующие числовые значения, которые вы можете использовать для определения «жирности» отображаемого текста: 100, 200, 300, 400, 500, 600, 700, 800 и 900, фактический результат будет зависеть от того, какой шрифт вы используете в своем CSS.

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

Числовые значения следующие:

  • 100 — тонкий
  • 200 — сверхлегкий (сверхлегкий)
  • 300 — светлый
  • 400 — нормальный
  • 500 — средний
  • 600 — полужирный (полужирный)
  • 700 — полужирный
  • 800 — экстра Полужирный (Ультра полужирный)
  • 900 — Черный (Толстый)

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

Примечание: Мы будем использовать семейство шрифтов : Helvetica, Arial, sans-serif; для этой демонстрации.

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

Сценарии использования

Когда дело доходит до стиля, будут моменты, когда вы захотите либо выделить свой текст, либо сделать его менее заметным.

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

Например:


< html >
< head >

< style type = text / css>

/ * Styles * /

p {
color: grey
font-weight: 100;
font-size: 18px; Семейство шрифтов
: Arial, Helvetica, без засечек;
}

style >
head >

< body >

< p > Udacity - это место, где вы можете узнать о толщине шрифта p >

body >
html >

Веб-результат использования числового шрифта 100 будет выглядеть следующим образом:

Теперь, если вы хотите подчеркнуть суть вашего сообщения, увеличьте толщину шрифта, добавив большее число.

Например:


< html >
< head >

< style type = text / css>

/ * Styles * /

p {
color: grey
font-weight: 900;
font-size: 18px; Семейство шрифтов
: Arial, Helvetica, без засечек;
}

style >
head >

< body >

< p > Udacity - это место, где вы можете узнать о толщине шрифта p >

body >
html >

Веб-результат использования числового шрифта 900 будет выглядеть следующим образом:

В мире веб-создания разные браузеры иногда могут давать разные результаты.

Давайте проверим это. Мы будем использовать следующий код для примера:




Udacity - это то место, где вы можете узнать о толщине шрифта


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

Outro: (Куда дальше?)

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

Зарегистрируйтесь сегодня в нашей программе «Введение в программирование Nanodegree»!

Начать обучение

CSS — вес шрифта

CSS — вес шрифта

font-weight

Вернуться к оглавлению.

Тонкая проблема совместимости: где именно в диапазоне 100-900 lighter начинает генерировать жирный текст?

font-weight предназначен для установки жирности (жирности) шрифта. нормальный — значение по умолчанию.

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

Если вам нужен полностью безопасный вес, просто используйте font-weight: bold и принимайте все, что вам дает браузер.

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

font-weight: 400 должно быть равно нормальному , а 700 равно жирному .

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

Тестовый чемодан

В качестве тестового примера я использую Segoe UI для Windows и Helvetica Neue для Mac. У Segoe UI четыре веса, а у Helvetica Neue пять. Если вы видите только два веса, ваш браузер неправильно обрабатывает font-weight .

font-weight: normal полужирный зажигалка
font-weight: bold полужирный зажигалка
font-weight: 100 полужирный зажигалка
font-weight: 200 смелее зажигалка
font-weight: 300 смелее зажигалка
font-weight: 400 смелее зажигалка
font-weight: 500 смелее зажигалка
font-weight: 600 смелее зажигалка
font-weight: 700 смелее зажигалка
font-weight: 800 смелее зажигалка
font-weight: 900 смелее зажигалка

Свойство font-weight — Типографика — HTML Academy

HTML

Сайт начинающего программиста <заголовок>

Блог

<основной> <статья>

День второй. Я хочу стать кодером

Сегодня весь вечер провел в Интернете. Я читал о преимуществах работы кодером. Я, конечно, часто проводил свободное время за просмотром видео с котиками. Но потом кое-что вспомнил:

  • Вы помогаете полезному делу.
  • Вы можете работать удаленно.
  • Интересные люди
  • Хорошая зарплата

Мое желание учиться резко возросло.

<сторона> Ваше объявление может быть размещено здесь