Примітка: Ця сторінка пов'язана зі зміною типу, розміру та кольору шрифту на веб-сторінці. Для Microsoft Word перегляньте нашу сторінку про те, як змінити колір, розмір або тип шрифту у Word.

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

Щоб продовжити, виберіть метод, який ви хотіли б дізнатися з чи прочитати кожен розділ.

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

Приклад коду

Цей текст має шрифт Courier, Blue, 20px.

Результат

Цей текст має шрифт Courier, Blue, розмір 20px.

Використання CSS для однієї або декількох сторінок

Спеціальний шрифт для однієї сторінки

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

 .custom {font-family: Courier; колір: червоний; розмір шрифту: 20px; } 

Після визначення цього стилю можна застосувати до більшості елементів на вашій сторінці, додавши до них клас "custom". У наступному полі показано два рядки коду та їх відповідні результати.

Приклад

Весь цей вирок - червоний і кур'єр

Тільки слово TEST є червоним і Courier.

Результат

Весь цей вирок - червоний і кур'єр.

Тільки слово TEST є червоним і Courier.

Спеціальний шрифт для багатьох сторінок

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

Використовуючи будь-який основний текстовий редактор, збережіть наступний текст у вигляді файлу .css для підготовки до імпорту.

 @charset "utf-8";
.courier {font-family: Courier; колір: # 005CB9; } 

Після того, як попередній текст був поміщений у файл .css (ми назвали наш basic.css ), ви можете зв'язати його з будь-якої іншої сторінки, використовуючи рядок, подібний до наступного прикладу.

Порада: Користувачі можуть змінювати атрибути елементів на сторінці, змінюючи код імпортованого файлу .css.

Рішення шрифтів

Незважаючи на неприйнятність, тег HTML все ще може використовуватися і може знадобитися для використання з деякими онлайн-службами. При використанні тега FONT необхідно включити атрибут face, який описує використовуваний шрифт. У наведеному нижче прикладі ми використовуємо шрифт Courier і шістнадцятковий код # 005CB9, який є темно-синім.

Приклад коду

 Спеціальний приклад шрифту. 

Результат