Способи завдання шрифтів у css

Властивості font-weight, font-style, text-decoration та інші

За допомогою властивості стилів font-weight задають жирність шрифту. Синтаксис:

Як значення властивості може використовуватися одне із семи числових значень від 100 до 900, або одне з іменованих normal, bold, bolder, lighter. Значення normal відповідає 400, а bold - 7000. Але практично більшість браузерів не підтримують атрибут font-weight повною мірою. Тому всі значення, які менше 400 будуть відповідати normal, а все, що більше bold. Причому значення bolder та lighter не працюють.

Властивість CSS font-style визначає шрифт. Для нього доступні три значення: normal, italic і oblique. Але на практиці використовують лише перші два, де «normal» встановлює нормальне зображення шрифту, а значення «italic» змушує браузер виводити текст курсивним накресленням.

За допомогою властивості text-decoration можна задавати різні прикраси тексту, такі як підкреслення або закреслення:

Для цього атрибуту є п'ять значень:

• none - скасовує всі ефекти, у тому числі скасовує підкреслення у посилань, яке задано за замовчуванням;
• underline - встановлює підкреслений текст;
• overline - "накреслює" текст, тобто проводить лінію над текстом;
• line-through - закреслює текст;
• blink — встановлює миготливий текст. Такий текст періодично приблизно раз на секунду зникає, потім знову з'являється на колишньому місці. Це значення зараз не підтримується браузерами і засуджується в CSS3.

За замовчуванням, для більшості елементів виводиться текст без ефектів.Але деякі html елементи відображають текст із підкресленням, зокрема гіперпосилання (тег a).

Тому, крім посилань, на веб-сторінці підкресленням краще нічого не виділяти. Тому що користувачі підсвідомо вирішать, що раз підкреслено — отже можна клікнути для переходу. І виділяючи підкресленням звичайний текст, ви вводите користувача в оману.

Нюансом властивості text-decoration є те, що для нього можна вказати одразу кілька значень:

text-decoration: underline overline line-through;

Результат буде такий:

перекреслений підкреслений та надкреслений текст!

Властивість стилю text-transform дозволяє задавати регістр символів тексту:

Властивість може мати одне з чотирьох значень:

• capitalize - Перетворює до верхнього регістру першу літеру кожного слова;
• uppercase - текст у верхньому регістрі;
• lowercase - текст у нижньому регістрі;
• none – не змінює регістр символів.

Для збільшення та зменшення відстані між рядками тексту використовується атрибут line-height. Як значення можна ставити як абсолютну і відносну величину відстані, вказавши відповідну одиницю виміру (px, pt, em та інших.). У разі відсутності одиниці виміру вказане значення сприймається браузером як множник. Наприклад, значення 1.5 встановлює полуторний міжрядковий інтервал:

Для керування відстанню між символами тексту є властивість letter-spacing. Воно дозволяє задавати додаткову відстань між літерами, яка додаватиметься до початкового. Як значення приймаються будь-які одиниці довжини, прийняті в CSS - пікселі (px), пункти (pt) та ін. Допустимо використовувати негативні значення. У цьому випадку відстань між символами зменшиться:

Аналогічний атрибут word-spacing задає додаткову відстань між словами тексту:

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

font: font-size font-family

Обов'язковими параметрами є лише розмір шрифту та його ім'я, інші параметри можуть бути відсутніми.

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

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

CSS Properties

Як зробити жирний шрифт на HTML та CSS

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

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

Для виділення певного тексту жирним використовуються спеціальні HTML-теги - і . Наприклад наступний код:

Звичайний текст.
Жирний текст.
Жирний текст.

Звичайний текст.

Жирний текст.

Жирний текст.

На виході дає таку картинку:

Останні два варіанти візуально виглядають однаково, проте вони між собою дещо відрізняються

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

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

Ви також можете зустріти прописаний в HTML жирний шрифт за допомогою стилів:

приклад жирного тексту.
Приклад тексту з жирним словом.

приклад жирного тексту.

Приклад тексту з жирним словом.

На сайті це відображається так:

Не дивлячись на те, що код жирного тексту для HTML працює коректно, так не слід робити. Усі стилі оформлення повинні бути винесені у файл CSS. Тому в прикладі вище ви повинні були для тегів

та вказати відповідний клас, а потім прописати його оформлення у таблиці стилів. Такі правила оформлення коду. Тому для жирного шрифту в HTML використовуйте тег.

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

Щоб створити в CSS жирний шрифт використовується якість font-weight. З його допомогою вказується "насиченість" фрагмента тексту. Значення можуть бути від 100 до 900, але найчастіше використовуються це:

• bold (жирний) - 700 за замовчуванням;
• normal (звичайний) - 400 за замовчуванням.

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

Щоб задати жирний текст у CSS потрібно тому чи іншому елементу задати якийсь стиль, наприклад:

Звичайний текст з жирним виділенням по центру.

Звичайний текст з жирним виділенням по центру.

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

. my-bold-font color: black;
font-weight: 700;
>

Або можна написати:

. my-bold-font color: black;
font-weight: bold;
>

Різниці немає жодної. До речі, якщо говорити про HTML тег, то для нього за умовчанням прописаний такий стиль:

strong font-weight: bold;
>

Тут хотілося відзначити один невеликий нюанс, який мені розповіли на курсах верстки — якщо ви створюєте для якогось елемента новий клас, то бажано використати більш-менш «зрозумілу назву». Наприклад, у прикладі вище стиль виглядає логічніше ніж т.к.можна почасти зрозуміти його призначення. Це плюс для тих, хто дивитися і використовувати вашу верстку надалі.

У наступній статті розповім про цікаві жирні шрифти, які мені вдалося знайти.

Як зробити підкреслений текст CSS-стилями

Щоб виділити фрагмент, і зробити його більш помітним, ми можемо зробити підкреслений текст css-стилями, використовуючи властивість text-decoration:underline;

Підкреслений текст CSS

Так само це CSS-властивість має інші цікаві значення:

• blink — дозволяє зробити слово або речення мерехтливим,
• line-through - перекреслює слово або речення,
• overline – дозволяє провести лінію над словом.

Ця властивість також використовується для стилізації відображення посилань за умовчанням. Тому, якщо ви хочете, щоб посилання на сторінках вашого сайту відображалися без підкреслення, вам потрібно задати для неї text-decoration: none;

Можливості зображення в html

Шрифт текстового контенту завжди можна змінити. Наприклад, задати жирне зображення або курсивне, а також його можна декорувати. Для цього існують прості теги, які дуже легко запам'ятати і застосовувати. Нижче наведено таблицю елементів, яка роз'яснює їх призначення.

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

Щоб збільшити товщину букв, існують такі парні теги, як і . У сучасних браузерах використання цих інструментів відображається однаково, оскільки вони форматують текст жирним. Однак їх призначення по-різному. Тому їх не можна назвати еквівалентними і використовувати лише один із них.

Тепер розглянемо такі теги, як .

Вони форматують стандартний шрифт курсивним.Думаю, ви поставите питання, що логічно виникає: «А ці елементи теж відрізнятися між собою за принципом тегів і ?». Питання правильне. І ви маєте рацію!

Типи веб-шрифтів та їх підтримка браузерами

Усі сучасні браузери підтримують використання певних веб-шрифтів. Це відбувається так: браузер користувача завантажує шрифт із вказаного сервера і застосовує його для відображення поточної сторінки. В даний час існують такі види веб-шрифтів:

• TTF/OTF (True Type та Open Type Fonts) – ці шрифти мають широку підтримку. Розроблено Microsoft спільно з Adobe, з метою застосування в різних операційних системах.
• WOFF (Web Open Font Format) – стисла версія шрифтів TTF/OTF. Формат включає метадані, в які автор шрифту може додати інформацію про використання шрифту. WOFF формат має широку підтримку з боку браузерів.
• WOFF2 (Web Open Font Format 2) — специфікація була розроблена, щоб забезпечити покращений стиск і тим самим знизити використання пропускної спроможності мережі, водночас дозволяючи швидко виробляти декомпресію навіть на мобільних пристроях.
• SVG (Scalable Vector Graphic) – спосіб створення векторної графіки. SVG-формат має дуже обмежену підтримку (IOS/Safari). Планується, що він перестане використовуватись у Chrome.
• EOT (Embedded Open Type) – шрифти, які підтримуються лише в Internet Explorer/Edge (розроблені компанією Microsoft для використання як вбудовані шрифти на веб-сторінках).

Властивість font-weight CSS

Властивість CSS font-weight визначає товщину шрифту, вона залежить або від встановлених правил накреслення в сімействі шрифтів, або від товщини, визначеної в браузері.

В якості значення властивість font-weight приймає ключове слово чи числове значення. Доступні ключові слова:

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

Значення ключового слова normal відповідає числовому значенню 400, а значення CSS font weight bold - числовому значенню 700.

Щоб до шрифту міг бути застосований інший розмір, крім 400 або 700, для нього повинні бути встановлені вбудовані правила зображення з відповідними числовими коефіцієнтами.

Якщо шрифт має жирну («700») або звичайну («400») версію, то браузер буде використовувати їх. Якщо вони не доступні, браузер імітуватиме власну жирну або нормальну версію. Для шрифтів часто використовують такі назви, як "Regular" та "Light", щоб визначити альтернативні значення товщини шрифту.

Наступна демо-версія ілюструє використання альтернативних значень товщини:

Переглянути демо - версію

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

Звичайні шрифти, такі як Arial, Helvetica, Georgia і т.д. не мають іншої товщини, крім 400 і 700. Якби в демо-версії використовувався один із цих шрифтів, то у всіх абзацах ми побачили б лише дві його версії.

Значення ключових слів «bolder» і «lighter» залежать від товщини шрифту батьківського елемента, що обчислюється.Браузер шукатиме найближчу до «bolder» або «lighter» товщину у сімействі шрифту. Інакше браузер просто встановить "400" або "700".

Дочірні елементи не успадковують значення ключових слів «bolder» і «lighter», але натомість успадковують обчислену товщину.

Дана публікація є перекладом статті «font-weight», підготовленої дружньою командою проекту Інтернет-технології.

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

Наступна 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 (напис малих буде таким же, як і у великих літер). Для російської це властивість використовується вкрай рідко.

CSS Properties

Заголовки та єдине зображення відображуваних шрифтів

Припустимо, що вам захотілося використовувати якийсь яскравий шрифт для ваших заголовків. Можливо, вам сподобається шрифт Diplomata, який можна знайти на сайті Google Web Fonts. Дотримуючись інструкцій нижче, ви можете підключити його для ваших елементів h1:

Що дасть подібний результат у Firefox:

Мал. 1: Diplomata у хибному жирному накресленні

Dipomata містить тільки одне зображення, тому правило , код якого ви отримуєте, містить налаштування . Однак, так як заголовки зазвичай за замовчуванням мають браузер розмазує гліфи в спробі емулювати жирне зображення. У попередньому перегляді шрифту ви могли бачити елегантні смуги в штрихах букв і він уже мав чесне жирне зображення. Хибний жирний, створений браузером, майже знищив такі деталі.

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

Це збереже дизайн вибраного шрифту:

Мал. 2: Diplomata без хибного жирного зображення

Так як Diplomata сам по собі жирний, він підходить для заголовків у нормальному накресленні. Якщо замість нього буде використано інший шрифт зі списку, заголовки все одно залишаться жирними. Трюк із дублюванням спрацює і з іншими шрифтовими сервісами.У своєму прикладі я продублював правило, яке використовує , але якщо ви самі складаєте ваше правило, то, можливо, ви захочете перевірити, запропонований такими сервісами як FontSpring, Font Squirrel або Paul Irish. Якщо на вашому сайті використовується шрифт з єдиним зображенням, то ви можете уникнути проблеми помилкового жирного шляхом додавання додаткового правила.

Врахуйте, що специфікація визначає властивість , з допомогою якого можна контролювати чи потрібно використовувати хибний жирний чи хибний курсив, використовуючи одне правило . Але, нині, жоден браузер не реалізував підтримку цієї характеристики. Дублювання правил — єдиний спосіб контролювати таку поведінку у браузерах.

Висота рядка

Міжрядковий інтервал – це відстань між рядками тексту. Для його встановлення використовується властивість
line-height. Воно встановлює висоту рядка. Висота рядка складається з розміру
шрифту та міжрядкового інтервалу. Якщо висота рядка дорівнює 50 пікселів, а розмір шрифту 30 пікселів,
то міжрядковий інтервал вийде 20 пікселів. Якщо висоту рядка встановити менше розміру шрифту, то
рядки перетинатимуться. Властивість line-height може набувати таких значень:

line-height: normal - звичайний інтервал (за замовчуванням)

line-height: число, на яке буде помножено розмір шрифту

line-height: висота в одиницях виміру,
доступних у CSS

line-height: відсотки від розміру шрифту

line-height: inherit значення приймається від батьківського елемента

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

Текст із кількох рядків Текст із кількох рядків Текст із кількох рядків Текст із кількох рядків Текст із кількох рядків Текст із кількох рядків Текст із кількох рядків Текст із кількох рядків Текст із кількох рядків Текст із кількох рядків Текст із кількох рядків

Спробуйте різні варіанти висоти рядка. Подивіться, як виглядатиме текст.

CSS розмір шрифту

Приклад із зміною розміру:

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

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

Опис

Встановлює насиченість шрифту. Значення встановлюється від 100 до 900
з кроком 100. Надсвітле зображення, яке може відобразити браузер, має
значення 100, а наджирне - 900. Нормальне зображення шрифту (яке
встановлено за замовчуванням) еквівалентно 400, стандартний напівжирний текст
значенню 700.

Значення

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

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
  - Похилий

а це похилий текст

І чим питається, вони відрізняються?

Чим відрізняється курсив від похилого тексту? Курсив - це свого роду шрифт, взятий з бібліотеки шрифтів, а похилий текст - це результат роботи алгоритму, де кожен символ злегка нахиляється в праву сторону.

bolder» для шрифтів з багатьма написами / Habr

Візьмемо для прикладу Open Sans.

Open Sans має п'ять написів: Light 300, Normal 400, Semi-Bold 600, Bold 700 та Extra-Bold 800.
Цифри відповідають значенню.

Нехай основний текст має зображення Light 300, заголовки і цитати - Normal 400, а промо-блок - Semi-Bold 600:

Тег може збігатися і в основному тексті, і в цитатах, і в промо-блоці. Треба це врахувати.

А нам хочеться, щоб у

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

А все тому, що згідно зі специфікацією, значення () збільшує (зменшує) успадковане значення до наступного можливого для даного шрифту значення відповідно до таблиці.

Однак у браузерної CSS прописано , тобто. успадковується значення "700", а потім воно ще й збільшується до "900". Тож здається, що працює неправильно.

Виправити це можна так:

Саме так, як два окремі правила. Перше обнуляє значення з браузерної таблиці стилів, друге задає жирність вже у відносних, а чи не абсолютних одиницях.

Тепер нам не доведеться дбати про вкладеність елементів – каскад все зробить автоматично. Ми можемо вкладати теги один в одного.

Вкладені теги "strong". Товщина шрифту визначається виходячи із значення батьківського елемента.

Обмеження

Єдиною гарантією при використанні / є те, що шрифт при значенні «» не буде тоншим, ніж легші накреслення цього шрифту, а при значенні «» буде не товстішим, ніж жирніші накреслення цього шрифту.

Щоб тонше налаштувати вагу шрифту, треба використовувати абсолютні значення.

font-weight

Ця особливість є добре створеною і роботою, пов'язаною з багатьма пристроями і розробниками версій. It's been available across browsers since July 2015 .

CSS властивість font-weight встановлює зображення шрифту. Деякі шрифти доступні лише у нормальному або напівжирному контурі.

Інтерактивний приклад

Синтаксис

font-weight: normal; font-weight: bold; /* Relative to the parent */ 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; /* Global values ​​*/ font-weight: inherit; font-weight: initial; font-weight: unset;

Значення

Нормальне зображення. Те саме, що й 400 .

Напівжирне зображення. Те саме, що й 700 .

Змінює зображення щодо насиченості батьківського елемента (надтонке зображення).

Змінює зображення щодо насиченості батька елемента (наджирне зображення).

Цифрові значення насиченості шрифтів, які дозволяють задавати більше, ніж нормальне та напівжирне зображення.

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

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

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

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

Значення відносних ваг

Коли використовується жирніше або світліше, наступна таблиця використовується для обчислення абсолютної ваги елемента:

Визначення ваги імені

Значення від 100 до 900, наприклад, відповідають наступним поширеним імен насиченості:

Інтерполяція

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

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

Alice була почати, щоб отримати дуже стиснутою, щоб поставити її sester на банці, і ні, щоб зробити: once or twice sha had peeped into book her sester був reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversations?'
I'm heavy 
I'm lighter

/* Призначення тексту елемента 
жирного зображення. */ p < font-weight: bold; >/* Призначення тексту елемента жирності, що більше на два рівні, ніж normal, але все ще менше, ніж стандартний bold.*/ div < font-weight: 600; >/* Призначення тексту елемента жирності, що на один рівень менше, ніж у його батька. */ span