Здрастуйте, шановні читачі блогу . Сьогодні чергова стаття, що вносить свій внесок у складання довідника по 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 коді. У нього є свої особливості. Розмір можна задавати як в абсолютних, так і у відносних одиницях:
font-size:10px;
Можна використовувати відносні одиниці em і ex. Детальніше про них ви можете прочитати за посиланням, але якщо говорити коротко, то «em» — це висота шрифту, задана для даного елемента або успадкована, а «ex» — це висота латинської букви «x» в потрібній вам гарнітурі.
Але розмір «Ex» для різних браузерів може відрізнятися по відношенню до «Em», тому в CSS властивості font-size набагато частіше використовують відносні одиниці розміру шрифту у вигляді «Em». Наприклад, якщо для заголовка задати:
font-size:2em;
то цей заголовок буде отрисовываться фонтом в два рази більшого розміру, ніж той, який би використовувався для нього за умовчанням (унаследовался б від тексту).
Також відносні розміри font size можна задавати і за допомогою відсотків, які будуть вважатися від розміру гарнітури, що даний елемент отримав у спадок. «Em», до речі, робить теж саме. Один «Em» і 100% — це одне і те ж:
font-size:200%;
До речі, гарнітура за замовчуванням визначається використовуваним браузерів і цю інформацію завжди можна подивитися. У Firefox, наприклад, вам достатньо для цього вибрати з верхнього меню «Налаштування» — «Налаштування» — вкладка «Вміст»:
У наведеному прикладі кореневий елемент (тег Html) отримає у спадок від налаштувань браузера користувача саме фонт такого розміру і такої гарнітури. Ну, а далі або все буде успадковуватися від елемента до елемента в глиб Html коду (вкладеними елементами), або ви зможете задати для тега розмір в абсолютних величинах.
У будь-якому випадку ви будете вільні з допомогою font-size задавати у відносних одиницях зменшення або збільшення цього успадкованого розміру. Те ж саме можна сказати і про по умовчанню гарнітурі (яка в CSS задається через font-family) — вона теж передається у спадок тегу з налаштувань браузера користувача.
Всі шрифтові правила успадковуються. Тобто, якщо ви написали в якомусь елементі правило Font-size, то цей розмір буде передаватися у всі вкладені в нього теги (успадковуватися). Це можна перебити вже прописаних для вкладеного елемента правилом «Font-size» і т. д.
Можна ще в якості значень для цього властивості використовувати одне із семи позначень: xx-small, x-small, small, medium, large, x-large або xx-large. Що це таке?
А це повний аналог того, як ми ставили розміри в чистому Html за допомогою тега Font і атрибуту Size. Але тільки там ми використовували числа від 1 до 7, а тут використовуються назви, але суть залишилася колишньою, і розміри, задані таким чином і через можливості чистого html, будуть корелювати між собою:
Властивості font-weight, line-height і font-style
«Font-weight» в Css дозволяє задавати нормальний (normal) або жирне (bold) накреслення шрифту для того елемента, для якого це властивість адресовано. Але насправді у нього можуть бути також інші значення. Їх усього чотири буквених плюс цифрова шкала:
Або цифрові значення від 100 до 900 з кроком 100 (від надтонкого до сверхжирного). Тобто за цією шкалою шрифт міг використовувати багато накреслень різного ступеня жирності. Спочатку значення normal відповідало 400, а значення bold — 700.
Але на практиці поки що жоден браузер для «Font-weight» цього не підтримує повною мірою. А шкода, іноді хочеться використовувати більш жирний або трохи більш тонкий фонт, ніж той, що нам можуть дати значення «normal» і «bold». На жаль і ах, зараз всі цифри менше 400 дадуть вам в результаті нормальний, а все що більше — жирний.
До речі, в одній з останніх статей ми розглядали таке поняття, як Css стилі прийняті за замовчуванням, для оформлення елементів Html коді, якщо файл каскадних таблиць стилів для цих елементів нічого не вказано. Так ось там, наприклад, для заголовків H1-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.3 em;
то висота лінії стане менше, ніж висота шрифту (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 взято з специфікації:
Удачі вам! До зустрічей на сторінках блогу
