Жирний текст

Жирний текст

Більше звичайного

Менше звичайного

Курсив

Курсив

З підкресленням

Закреслений

Можливості атрибуту

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

1) font-family – властивість визначає сімейство шрифту. Можливе перерахування кількох значень.
Зміна шрифту в html на наступне значення відбудеться, якщо попередня родина не встановлена ​​в операційній системі користувача.

Синтаксис написання:

font-family: ім'я шрифту [, ім'я шрифту[, ...]]

2) font-size – задається розмір від 1 до 7. Це один із основних способів того, як у html можна збільшити шрифт.
Синтаксис написання:

font-size: абсолютний розмір Відносний розмір | значення | відсотки | inherit

Розмір шрифту можна також задати:

• У пікселях;
• В абсолютному значенні ( xx-small, x-small, small, medium, large);
• У відсотках;
• У пунктах (pt).

Font-size:7

Font-size:24px

Font-size: x-large

Font-size: 200%

Font-size:24pt

3) font-style – встановлює стиль написання шрифту. Синтаксис:

font-style: normal | italic | oblique | inherit

Значення:

• normal -нормальне написання;
• italic – курсив;
• oblique – шрифт із нахилом вправо;
• inherit – успадковує написання батьківського елемента.

Приклад того, як змінити шрифт у html за допомогою цієї властивості:

font-style:inherit

font-style:italic

font-style:normal

font-style:oblique

4) font-variant - переводить всі великі літери в великі. Синтаксис:

font-variant: normal | small-caps | inherit

Приклад того, як змінити шрифт у html цією властивістю:

font-variant:inherit

font-variant:normal

font-variant:small-caps

5) font-weight – дозволяє встановити товщину написання тексту (насиченість). Синтаксис:

font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

Значення:

• bold – встановлює жирний шрифт html;
• bolder – жирніша щодо normal;
• lighter –менш насичене щодо normal;
• normal – нормальне написання;
• 100-900 - задається товщина шрифту в числовому еквіваленті.

font-weight:bold

font-weight:bolder

font-weight:lighter

font-weight:normal

font-weight:900

font-weight:100

Властивість font та колір шрифту html

Font є ще однією контейнерною властивістю. Усередині воно об'єднало значення кількох властивостей, призначених зміни шрифтів. Синтаксис :

font: font-size font-family | inherit

Також як значення можуть бути задані шрифти, що використовуються системою в написах різних елементів управління:

• caption – для кнопок;
• icon – для іконок;
• menu – меню;
• message-box –для діалогових вікон;
• small-caption – для невеликих елементів керування;
• status-bar – шрифт рядка стану.

font:icon

font:caption

font:menu

font:message-box

small-caption

font:status-bar

font:italic 50px bold "Times New Roman", Times, serif

Для того щоб задати колір шрифту в HTML можна використовувати властивість color. Воно дозволяє встановлювати колір як за допомогою ключового слова, так і у форматі rgb . А також у вигляді шістнадцяткового коду.

Опис

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

Синтаксис

font-style: normal | italic | oblique | inherit

Значення

HTML5 CSS2.1 IE Cr Op Sa Fx

Duis te feugifacilisi

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. У вас є анім з мінімальним веніям, які не виконані практикою ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

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

Рис. 1. Застосування якості font-style

Об'єктна модель

document.getElementById("elementID ").style.fontStyle

Браузери

Internet Explorer до версії 7.0 включно не підтримує значення inherit.

Браузер текст зі значенням oblique завжди відображається як курсив (italic ).

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

Курсив чи похилий шрифт?

Відображення одного шрифту в курсивному накресленні може відрізнятися.

На картинці - три блоки тексту, набраних одним і тим самим шрифтом Playfair Display. Перший має звичайне пряме зображення, а другий і третій - курсивне. Вони відкриті в тому самому браузері Google Chrome, але виглядають зовсім по-різному.

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

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

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

HTML-курсив

Для курсивного відображення тексту в HTML існує два спеціальні теги: i (від слова italic) та em. Накреслення текстового фрагмента, укладеного у будь-якій із цих дескрипторів, буде однаковим.

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

Властивість font-style

У CSS курсивом управляє інструкція font-style. Вона може набувати одне з трьох базових значень:

• normal - шрифт звичайного зображення;
• italic – курсивне накреслення;
• oblique – похило накреслення.

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

Якщо шуканий шрифт браузером не виявлений, то italic виглядатиме так само, як і oblique.

На відміну від тега em, не надає виділеного фрагмента особливої ​​ваги, воно швидше відповідає дескриптору i.

Приклади

Курсивним зображенням часто виділяються цитати. Спробуємо надати гарного вигляду.

Quote ( font-style: italic; border-left: 5px solid purple; padding-left: 20px; )

Крім декоративної рамки праворуч та відступів, для блоку quote визначено правило font-style зі значенням italic.

З його допомогою встановлюється курсив CSS.

Тег у HTML використовується виділення фрагмента тексту курсивом.