CSS надає велику кількість властивостей для налаштування зовнішнього вигляду шрифтів. Ці властивості включають шрифт, стиль шрифту та тіні.
Серед властивостей шрифту CSS розрізняють параметри щодо шрифту, стилю шрифту та жирності шрифту. Ці властивості є корисними в основному для елементів HTML, в яких міститься текст (p, i тощо). Вони також можуть бути використані для таблиць.font-family дозволяє визначити використовуваний шрифт.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
p {font-family:verdana, sans-serif;}
h1 { font-family:"Courier New", Courier, monospace; }
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Das ist ein Absatz mit einem <strong>fetten Wort</strong>.</p>
<h2>Das ist eine Überschrift mit einem <strong>fetten Wort</strong>.</h2>
</div>
</body>
</html>Результат в браузері виглядає наступним чином:
Типовими шрифтами є, наприклад, Arial, Helvetica і Times Roman. Властивість CSS font-family призначена для вказання бажаних шрифтів. Якщо вказано кілька шрифтів, важлива їх послідовність. Якщо перший вказаний шрифт доступний, він буде використаний. Бажані шрифти слід розділяти комами. Наостанок, зазвичай вказується так звана загальна сімейство шрифтів. Цим загальним сімейством шрифтів дається можливість вибору браузерам шрифту, який, принаймні, схожий на вказаний.
• serif = шрифт з засічками
• sans-serif = шрифт без засічок
• cursive = шрифт для нахилених букв
• fantasy = шрифт для нестандартного тексту
• monospace = шрифт з однаковими товщинами символів.
Стиль шрифту
За допомогою властивості font-style можна вказати стиль шрифту. Якщо використана шрифт дозволяє це, через значення italic можна примусити використовувати нахилений стиль письма.
Інші шрифти можна нахилити за допомогою oblique. Наступна властивість CSS, яку можна використовувати для зміни зовнішнього вигляду шрифту, називається font-variant. Цим властивостям можна визначити капіталікі.
Для цього властивості font-variant присвоюється значення small-caps.
Розмір шрифту
Дуже важливим є також вказання розміру шрифту. CSS надає для цього властивість font-size. Розміри шрифту можна вказувати в різних одиницях вимірювання.
• EM
• REM
• Pixel
• Percent
• Ключові слова
Як ключові слова доступні такі варіанти:
• xx-small – дуже дуже маленький
• x-small – дуже маленький
• small – маленький
• smaller – менший, ніж у батьківському елементі
• medium – середній
• large – великий
• x-large – дуже великий
• xx-large – дуже дуже великий
• larger – більше, ніж у батьківському елементі
Ось приклад того, як вказати розмір шрифту:
.eins {font-size: 10px;}
.zwei {font-size: 20px;}
.drei {font-size: 110%;}
.vier {font-size: xx-large;}І ось як це виглядає в браузері:
Зверніть увагу, що визначення розміру шрифту є складним завданням через те, що різні одиниці вимірювання мають свої переваги та недоліки.
Щоб отримати краще уявлення про те, яку одиницю вимірювання краще використовувати у конкретному випадку, відвідайте сайт http://www.soeren-hentzschel.at/technik/programmierung/2011/01/16/px-pt-em-welches-ist-das-richtige-mas-fur-schrift/. Тепер, для тих, хто не хоче це все читати: використовуйте відносні значення, такі як em, для відображення на екрані. Для друкованих макетів використовуйте абсолютні одиниці, такі як pt.
Жирність шрифту
Далі йде тема так званої жирності шрифту. Це визначає товщину шрифту. Для цього використовується властивість font-weight.
.fett {
font-weight:bold;
}
Такий синтаксис відображає позначений текст жирним шрифтом.
Можливі значення: bold (жирний), bolder (особливо жирний), lighter (тонший) та normal. Крім того, дозволені числові значення від 100, 200, 300, 400, 500, 600, 700, 800 до 900. Вони охоплюють широкий діапазон, від додатково тонкого (100) до особливо жирного (900).
Підсумування визначень
У контексті визначень шрифтів також важливу роль відіграє властивість line-height, за допомогою якої визначається висота рядка. Я ще раз детально розкажу про цю властивість пізніше. На цьому етапі вона просто згадується, оскільки важливий для неї контекст спостерігається у зв'язку з показаною нижче властивістю font.
Ви можете поєднувати представлені раніше відомості про відображення шрифту одне з одним. Для цього використовується загальна властивість font. Вона включає наступні окремі вказівки або включені окремі:
• font-style
• font-variant
• font-weight
• font-size
• line-height
• font-family
За допомогою font можна поєднувати різні форматування шрифтів одне з одним. При цьому ви можете вказати вказані властивості раніше, але не обов'язково використовувати всі. Проте обов'язковими є властивості розміру і сімейства шрифту.
Завдяки скороченому запису CSS-файли можна робити коротшими та більш зручними.
Проте слід дотримуватися порядку, показаного нижче. Коли обидві властивості font-size і line-height зазначені, їх слід розділяти косою рискою. Якщо на цьому етапі вказується лише одне значення, це означає font-size.
Приклад:
p {
font: italic small-caps bold 1.3em/1.5em Georgia,Times,serif;
}font-size-adjust було розроблено для того, щоб вирівнювати розміри шрифтів наблизу. Різні шрифти з однаковою висотою відмічаються різною висотою х. Тим не менш, шрифти з більшою висотою х краще читаються. Таким чином, може виникнути ситуація, коли документ стає погано читабельним, якщо оригінальний шрифт відсутній і замінений на інший з меншою висотою х. За допомогою font-size-adjust цей різницю можна вирівняти.
Приклад:
h1 {
font-family: Verdana,
'Times New Roman', 'Courier New';
font-size-adjust: 0.61;
}
У наступному підручнику ви дізнаєтесь про інші можливості, якими ви можете налаштувати зовнішній вигляд тексту на вашому веб-сайті.
