Способи завдання шрифтів в css, css
Шрифт - це важлива складова веб-дизайну, що надає сайту впізнаваність і виразність.
Грамотно підібраний шрифт може бути непомітним для неозброєного ока, проте він є тією родзинкою, яка додає дизайну завершеність.
Як задати шрифт в CSS?
CSS -властивість font-family задає список пріоритетних шрифтів, які використовуються для відображення сторінки або певного елемента. У тому випадку, якщо на комп'ютері, з якого виробляється доступ до веб-сайту, не встановлено перший шрифт списку, шукається наступний шрифт і так до тих пір, поки відповідний не буде знайдений.
Перший тип - назва шрифту (наприклад, Calibri, Times New Roman і т. Д.), Другий - група шрифтів з характерними загальними рисами (наприклад, sans-serif).
Список шрифтів може виглядати наступним чином:
Основні властивості шрифтів в CSS
В CSS при описі шрифту використовують такі характеристики:
Стиль шрифту визначає тип накреслення для представлення тексту: похилий, курсивний або звичайний.
Атрибут font style може приймати такі значення як:
При всій схожості, похилий шрифт і курсив не є одним і тим же. Похилий утворюється за допомогою звичайного нахилу символів вправо, а курсив є імітацією рукописного стилю накреслення тексту.
варіант шрифту
Дана характеристика вказує використання малими символами звичайних гліфів або гліфів капітелі. Будь шрифт може включати в себе або тільки гліфи капітелі, або тільки звичайні гліфи, або обидва варіанти в сукупності.
Властивість font variant може мати одне з двох можливих значень:
- normal (звичайний шрифт);
- small-caps (шрифт з малими прописними буквами).
вага шрифту
В CSS жирний шрифт або навпаки, більш світлий, задається параметром font weight. Деякими браузерами підтримуються числові значення в описі ваги.
Кожен шрифт може набувати таких значень:
- normal (звичайний);
- lighter (світліше);
- bold (жирний);
- bolder (ще більш жирний);
- 100-900 (числове опис ваги, в якому значення 100 відповідає самому тонкому зображенню, а 900 - самому товстому зображенню).
Розмір шрифту
Розмір шрифту - це відстань від нижньої кромки тексту до кордонів кегельний простору. Якщо в HTML даний параметр варіюється від 1 до 7 умовних одиниць, що ні далеко не завжди є зручним, то в CSS за допомогою властивості font size розмір шрифту можна вказати з точністю до пікселя.
Наприклад, завдання шрифту розміром 20 пікселів виглядає таким чином:
Також, розмір шрифту можна задати за допомогою відсотків від його базової розміру.
Наприклад, шрифт з параметрами:
буде відображений на 50% більше стандартного розміру. У тому випадку, якщо гарнітура і розмір шрифту не вказані, браузером буде виводитися базовий шрифт Times New Roman зі стандартним, на розсуд браузера, розміром.
колір шрифту
Можливості CSS дозволяють задати колір тексту і його фону за допомогою наступних властивостей:
- color (колір тексту);
- background color (колір фону тексту).
Кольорові значення рекомендується вказувати в загальноприйнятому шестнадцатеричном вигляді колірної моделі RGB.
Наприклад, білий текст на чорному тлі буде мати такі значення:
Перша пара цифр відповідає за рівень червоного кольору, друга - за рівень зеленого кольору, а третя - за рівень синього.
Мінімальне значення - 0, а максимальне - f. Цей принцип дозволяє самостійно «придумати» значення деяких кольорів: наприклад, якщо першій парі цифр привласнити максимальне значення, а другий і третій - мінімальні, вийде насичений червоний колір # ff0000.
Змішуючи кольору, можна отримувати додаткові відтінки: сукупність червоного і синього кольорів, як відомо, дадуть червоно-фіолетовий # ff00ff.
Однак, для того, щоб не винаходити велосипед, можна скористатися спеціальними програмами або онлайн-сервісами для підбору колірного шістнадцятирічного коду: наприклад, якщо в пошуковому сервісі Яндекс ввести слово «колір», з'явиться зручне для таких цілей засіб.
Таким чином, можливості CSS дозволяють змінити шрифт всього веб-сайту і його властивості всього за кілька хвилин, що істотно полегшує розробнику життя і економить час.
Сподіваємося, що цей посібник було для вас корисно. Бажаємо успіхів!