Що таке атрибути тегів html і як ними користуватися? Як зробити гарний шрифт в html: розміри, кольори, теги шрифтів html Атрибути font.

елемент (Від англ. font - шрифт) являє собою контейнер для зміни характеристик шрифту, таких як розмір, колір і гарнітура.

Даний елемент застарів, натомість використовуйте стилі.

синтаксис

текст

закриває тег

Обов'язковий.

приклад

FONT

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

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

Мал. 1. Зміна вигляду тексту

Примітка

Для зміни кольору тексту призначене стильова властивість color, сімейство шрифту задається властивістю font-family, а розмір тексту через властивість font-size.

font

перше слово цієї пропозиції написано шрифтом Arial, виділено червоним кольором і збільшено в розмірах.

браузери

У таблиці браузерів застосовуються такі позначення.

- елемент повністю підтримується браузером;
- елемент браузером не сприймається і ігнорується;
- при роботі можлива поява різних помилок, Або елемент підтримується з застереженнями.

Число вказує версію браузреа, починаючи з якої елемент підтримується.

98.9K

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

Теги та атрибути при роботі зі шрифтами html

Мова гіпертексту володіє великим набором засобів для роботи зі шрифтами. Адже саме форматування тексту є основним завданням html.

причиною створення мови HTML стала проблема відображення правил форматування тексту браузерами.

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

color - встановлює колір тексту;
size - розмір шрифту в умовних одиницях.

Підтримується позитивне значення атрибута від 1 до 7.

face - використовується для установки сімейства шрифтів тексту, які будуть використані всередині тега . Підтримується відразу кілька значень перерахованих через кому.

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

Також в html існує ряд парних тегів, які задають лише одне правило форматування. До них відносяться:

- задає в html жирний шрифт. тег за дією аналогічний попередньому;

- розмір більше встановленого за замовчуванням;

- менший розмір шрифту;

- курсив (курсив). Аналогічний йому тег ;

- текст з підкресленням;

~~- закреслений;~~

_{- відображення тексту тільки в нижньому регістрі;}

^{- у верхньому регістрі.}

звичайний текст

жирний текст

жирний текст

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

менше, ніж звичайно

курсив

курсив

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

~~закреслений~~

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

Крім описаних тегів існує ще кілька способів, як змінити шрифт в 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: font-size font-family | inherit

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

caption - для кнопок;

icon - для іконок;

menu - меню;

message-box -для діалогових вікон;

small-caption - для невеликих елементів управління;

status-bar - шрифт смужки стану.

Сьогодні продовжимо розгляд різних тегів, а саме Font, Blockquote, Pre, Strong, Em, B, I і інших, що дозволяють здійснювати форматування тексту.
Blockquote і Pre - форматування в HTML
Раніше (ще до появи CSS) тег цитати Blockquote в Html коді використовувався досить часто, тому що фрагмент тексту, укладений в нього, отримував горизонтальний відступ, що було не так-то просто зробити в той час в силу неможливості використання CSS властивостей. Елемент Blockquote є парним і всередині нього можуть перебувати як рядкові теги, так і блокові (наприклад, абзаци P).

приклад

Приклад, укладений в Blockquote

Зараз тег Blockquote як і раніше використовується при оформленні тексту, але зовнішній вигляд цитат в наш час вже зазвичай задається за допомогою CSS властивостей, прописаних саме для нього в файлі з таблицями стилів вашого шаблону оформлення. Наприклад, в разі мого блогу, в style.css можна знайти такі рядки:
#content blockquote (margin: 15px 0 20px 0; padding: 5px 8px 5px 35px; background: # eaedf0 url (images / quote2.png) no-repeat left top; background-position: 8px 5px; color: # 666; font- size: 14px; width: 91%; font-style: italic;) #content blockquote p (color: # 666; font-size: 14px;)
Ну, а те, як будуть при цьому виглядати цітатати, укладені в Blockquote, ви можете побачити в тексті статті з інтерв'ю з керівником.
Крім цитати в Html раніше (до появи CSS) досить широко використовувався ще один тег форматування - Center. Він є парним (своєрідний контейнер) і блоковим. У ньому можна укладати будь-які елементи тексту (як малі, так і блокові), які в результаті цього дійства будуть вирівняні по центру.
Так, тепер давайте розглянемо тег Pre, Який дозволяє передати форматування тексту заданий безпосередньо в вихідному коді. Пам'ятайте я говорив, що все йдуть підряд в (пробіл, табуляція і перенесення рядка) будуть при розборі коду в браузері замінені одним єдиним пропуском.
Так ось, елемент Pre забороняє скорочення пробільних символів в ділянці тексту, який буде в нього укладений. Що примітно, для фрагмента, укладеного в Pre, браузер не буде здійснювати автоматичний перенос рядків по пробільним символам.
Тобто всі рядки всередині елемента Pre будуть вважатися браузером нерозривними - як ви написали в коді, так і буде відображатися в браузері. Причому, в браузері для відображення ділянки тексту, відформатованого за допомогою тега Pre, буде використовуватися моноширинний шрифт, типу Courier New або подібні до нього.

Форматування в вихідному коді тег Pre теги застарілі

Сам тег Pre є блоковим, а всередині нього (цей тег парний) може бути укладений тільки рядковий контент (тобто всередині нього не слід розміщувати абзаци P, заголовків H1 - H6 і т.п.).
В Html є ще один блоковий тег, який призначений для форматування тексту - Address. Усередині цього тега може розташовуватися по стандартам валідатора тільки рядковий контент, який буде відображений у браузері курсивом.
Font - робота з кольором і шрифтом тексту в чистому Html
Strong, Em - теги логічних і візуальних виділень в тексті
Якби зараз не існувало CSS, то я мав би описати призначення тих чи інших тегів логічного і фізичного (візуального) форматування тексту. Але, тому що CSS зараз вже використовується на переважній більшості сайтів, то роль подібних тегів в Html коді вже практично зведена до нуля, тому я лише швидко пробіжуся по ним і поясню для чого вони використовувалися раніше (а деякі використовуються і зараз).
Візуальні теги призначені для зміни накреслення тексту, яке буде видно відвідувачам вашого сайту, але якому не повинні приділяти якусь особливу увагу пошукові системи.
Логічні ж теги форматування тексту, по ідеї, орієнтовані для зазначення будь-яких акцентів пошуковим машинам. Для користувача виділення цими елементами теж буде змінювати зовнішній вигляд виділених слів.
Якщо ви пам'ятаєте, то не так уже й давно оптимізаторів радили виділяти значущі місця з ключовими словами (як потрібно виділяти) тегами логічного форматування Strong і EM, які для користувача будуть виглядати як звичайне виділення жирним і курсивом.
А ось для виділень без ключових слів радили використовувати Html елементи «B» і «I», які для користувачів знову ж виглядали б теж як виділення жирним і курсивом, але вже пошуковими машинами не враховувалися, тому що вони не є тегами логічного форматування.
Зараз все це вже практично не працює так, як було задумано, і виділення ключових слів за допомогою Strong і EM ми робимо швидше за звичкою, ніж дійсно сподіваючись на певні дивіденди за це з боку пошукових систем.
Отже, крім уже згаданих «B» і «I» (виділення жирним і курсивом) до розряду візуального форматування можна віднести вже розглянуті на початку статті Font, Pre, а також теги:
«U» - виділення підкресленням
«Strike» - перекреслення
«Sup» - верхній індекс
«Sub» - нижній індекс
«Tt» - виділення моноширінним шрифтом
«Big» - збільшити шрифт
«Small» - зменшити шрифт

Ну, а тепер давайте розглянемо перелік елементів логічного форматування тексту:
«Em» - логічне виділення важливих фрагментів курсивом
«Strong» - те ж саме, але тільки виділятися буде жирним
«Cite» - виділення цитат курсивом
«Code» - призначений для відображення різноманітних кодів моноширінним фонтом
«Samp» - для виділення декількох символів моноширінним фонтом
«Abbr» - в атрибуті Title цього тега прописується розшифровка якої-небудь абревіатури (типу, CSS або Html, які читаються по буквах, а не як єдине слово). Прописані в Title слова будуть спливати при підведенні до цієї абревіатурі курсора миші.
«Acronym» - те ж саме, але використовується для акронімів, тобто скорочень, які читаються не по буквах, а як слово (наприклад, МКАД або Гаї)
«Kbd» - використовується для відображення моноширінним шрифтом тексту, що вводиться користувачем сайту з клавіатури
«Var» - використовується для виділення курсивом змінних в будь-якому коді
«Del» - виділення перекресленням, коли потрібно показати, що якийсь фрагмент був видалений після опублікування Html документа
«Ins» - виділення підкресленням, коли потрібно показати, що якийсь шматок був вставлений після публікації Html документа

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

Удачі вам! До швидких зустрічей на сторінках блогу сайт
Вам може бути цікаво
Пробільні символи і форматування ними коду в Html, а так само спецсимволи нерозривного пробілу і інші мнемоніки
Як задаються кольору в Html і CSS коді, підбір RGB відтінків в таблицях, видачі Яндекса і інших програмах Select, Option, Textarea, Label, Fieldset, Legend - теги Html форми випадаючих списків і текстового поля
Списки в Html коді - теги UL, OL, LI і DL
Як створити гіперпосилання (А, Href, Target blank), як відкривати її в новому вікні на сайті, а так само зробити картинку посиланням в Html коді
Таблиці в Html - теги Table, Tr і Td, а так само Colspan, Cellpadding, Cellspacing і Rowspan для їх створення
Теги та атрибути заголовків H1-H6, горизонтальної лінії Hr, розриву рядків Br і абзацу P за стандартом Html 4.01
Що таке мова гіпертекстової розмітки Html і як подивитися список всіх тегів в валідаторі W3C
Img - Html тег для вставки картинки (Src), вирівнювання і обтікання її текстом (align), а так само завдання фону (background)
Директиви коментарів і Doctype в Html коді, а так само поняття блокових і малих елементів (тегів)

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

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

<НЕАD><ТIТLЕ>фізичні стилі

<В>напівжирний
курсив
підкреслений
~~викреслений~~
<ТТ>Друкарська машинка
<ВХ1>напівжирний курсив
<ВХ1><и>Напівжирний курсив підкреслений

Мал. 649. Фізичні стилі
Усередині тега заголовка можна вставити тег фізичного стилю, щоб модифікувати весь заголовок або тільки деяку його частину. Наприклад, щоб виділити курсивом частину тексту, певного як заголовок, можна використовувати наступну конструкцію:

<НЕАD><ТIТLЕ>Фізичні і логічні стилі

<Н2>це - модифікований заголовок 2-го рівня

Мал. 650. Зміна стилю шрифту частини заголовка
За допомогою спеціального тега можна налаштувати шрифт для зображення тексту: задати гарнітуру, розмір і колір. Перш за все, ви можете встановити розмір основного шрифту, який використовується в документі за замовчуванням. тег основного шрифту має формат . Розмір основного шрифту можна встановити від 1 до 7. Якщо не використовувати цей тег, то розмір основного шрифта встановлюється рівним 3.
тег встановлює розмір поточного шрифту для окремих фрагментів тексту. На стилі цей тег не впливає. Діапазон можливих значень - від 1 до 7. Даний тег дозволяє також керувати розміром поточного шрифту щодо основного. Для цього використовуються символ + (щоб збільшити) і символ - (щоб зменшити) розмір шрифту на задану величину. Наприклад, якщо розмір основного шрифту встановлено рівним 3, то тег встановлює розмір поточного шрифту рівним 5.
Для завдання гарнітури шрифту використовується тег . наприклад:

Якщо цей тег не використовується в вашому документі, то браузер буде застосовувати шрифт, встановлений в його налаштуванні. Тому текст на екрані користувача може виглядати зовсім не так, як ви його представляли. Слід також мати на увазі, що якщо призначений вами шрифт не встановлений на комп'ютері користувача, то браузер буде зображувати текст шрифтом, встановленим за замовчуванням.
Ви можете в тезі вказати через кому перелік шрифтів. В цьому випадку браузер буде використовувати перший знайдений шрифт. Наприклад, можна записати тег:
FACE \u003d "Arial, Sans Serif, Courier"\u003e
Зазвичай в переліку задають схожі шрифти. Рекомендується призначати найбільш популярні шрифти. При розміщенні на сторінці текстової інформації краще взагалі не призначати назва шрифту, покладаючись на стандартні настройки браузера. Але тоді при розробці сторінки слід також використовувати стандартні настройки браузера, щоб синхронізувати своє сприйняття тексту з можливим сприйняттям користувача. Зрештою, ви створюєте сторінку не для себе, а для читачів.
За допомогою атрибута COLOR в тезі можна задати колір шрифту:

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

<НЕАD><ТIТLЕ>установка шрифтів

<Р>шрифт Aria АБВГДЕЖЗІК
<Р>шрифт Courier АБВГДЕЖЗІК
<Р>шрифт SYMBOL АБВГДЕЖЗІК

Мал. 651. Використання різних шрифтів
Зауважимо, що в тезі можна використовувати кілька або всі його можливі атрибути. наприклад:

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

<НЕАD><Т1ТLЕ>індекси / НЕАD\u003e

<НЗ>Приклад використання індексів
<Р> (5 + x ²)^{x + 3}

a ₁ + a ₂+ a ₃
<Р>підрядкові примітки ²

Мал. 832. Використання верхніх і нижніх індексів
Крім розглянутих вище, є додаткові теги форматування тексту:
- виділення адрес електронної пошти, поштових адрес і
номерів телефонів;
<СIТЕ> - виділення цитат;
, - запис текстів програм, символьних констант;
- введення текстів з клавіатури.
В останніх трьох стилях використовується моноширинний шрифт (зазвичай Courier). Наприклад, букви I і Ж моноширинного шрифту займають однакове місце. Використання моноширинних шрифтів обумовлено простою можливістю вирівнювання тексту за допомогою символів "пробіл". Відзначимо ще один момент. В теги управління шрифтом, як і в теги логічних стилів, можна вставляти атрибут ТITLE \u003d "рядок", Що дозволяє прив'язати до тексту всередині цього тега підказку. аргументом атрибута TITLE є рядок підказки. При зупинці покажчика миші на виділеному слові або фразі біля вказівника з'явиться підказка. За допомогою цього прийому можна розшифровувати абревіатури, давати додаткові пояснення і рекомендації користувачеві.

тег являє собою контейнер для зміни характеристик шрифту, таких як розмір, колір і гарнітура. Хоча цей тег до сих пір підтримується всіма браузерами, він вважається застарілим і від його використання рекомендується відмовитися на користь стилів. синтаксис текст параметри Опис параметрів тега параметр COLOR Встановлює колір тексту усередині контейнера . синтаксис ... Аналог CSS -color параметр FACE Параметр face служить для завдання гарнітури шрифтів, що використовуються для тексту. Назв шрифтів можна навести кілька, через кому. В цьому випадку, якщо перший зазначений шрифт не буде знайдений, браузер стане використовувати наступний за списком. синтаксис ... Аргументи - будь-яка кількість імен шрифтів розділених комами. Універсальні сімейства шрифтів: serif- шрифти із зарубками (антіквенние), типу Times; sans-serif- рубані шрифти (шрифти без зарубок або гротески), типовий представник - Arial; cursive- курсивні шрифти; fantasy- декоративні шрифти; monospace- моноширинних шрифти, ширина кожного символу в такому сімействі однакова. Аналог CSS - font-family параметр SIZE Задає розмір шрифту в умовних одиницях від 1 до 7. Середній розмір, який використовується за умовчанням прийнятий 3. Розмір шрифту можна вказувати як абсолютною величиною (наприклад, size \u003d "4"), так і відносної (наприклад, size \u003d "+ 1", size \u003d "- 1"). В останньому випадку розмір змінюється відносно базового. На розмір шрифту впливає не тільки заданий параметр size, але і вибір гарнітури шрифту. Так, шрифт Arial виглядає більшим, ніж шрифт Times, а шрифт Verdana трохи більше шрифту Arial. Враховуйте цю особливість при виборі шрифту і його розмірів. синтаксис ... Аргумент - ціле число від 1 до 7 або зміна значення в більшу або меншу сторону за допомогою символів + і -.