HTML - Шрифты: Начальный гид по стилизации текста в Интернете

Привет, будущие веб-разработчики! Сегодня мы окунемся в захватывающий мир HTML шрифтов. Как ваш доброжелательный соседский компьютерный учитель, я здесь, чтобы провести вас через все тонкости и хитрости, чтобы ваш веб-текст выглядел потрясающе. Поехали!

HTML - Fonts

Что такое HTML шрифты?

Прежде чем мы углубимся в Details, давайте поймем, что мы подразумеваем под "шрифтами" в HTML. Простыми словами, шрифты - это стили текста, которые вы видите на веб-странице. Они могут быть большими, маленькими, жирными, курсивными или даже вычурными kursivными стилями. HTML предоставляет нам способы контролировать, как выглядит наш текст, делая наши веб-страницы более визуально привлекательными и легкими для чтения.

Безопасные для Интернета шрифты

Теперь давайте поговорим о чем-то called "Безопасные для Интернета шрифты". Представьте, что вы пишете письмо другу. Вы хотите убедиться, что он может его прочитать, правда? Ну, безопасные для Интернета шрифты - это как использование общего стиля handwriting, который все понимают.

Безопасные для Интернета шрифты - это шрифты, которые, скорее всего, присутствуют на большинстве компьютеров и устройств. Используя их, мы можем обеспечить одинаковое отображение наших веб-страниц на разных системах.

Вот таблица некоторых распространенных безопасных для Интернета шрифтов:

Название шрифта	Пример
Arial	Это Arial
Verdana	Это Verdana
Helvetica	Это Helvetica
Times New Roman	Это Times New Roman
Courier	Это Courier

Примеры HTML шрифтов

Давайте脏 our hands with some code! Вот несколько примеров того, как мы можем использовать шрифты в HTML:

Пример 1: Основная настройка шрифта

<p style="font-family: Arial, sans-serif;">Этот текст в шрифте Arial.</p>

В этом примере мы говорим браузеру отображать текст в шрифте Arial. Часть "sans-serif" - это запасной вариант на случай, если Arial не доступен на устройстве пользователя.

Пример 2: Использование нескольких шрифтов

<p style="font-family: 'Times New Roman', Times, serif;">Этот текст может быть в Times New Roman, Times или в любом шрифте с засечками.</p>

Здесь мы предоставляем несколько вариантов шрифтов. Браузер сначала尝试 использовать Times New Roman, затем Times, если первый не доступен, и finally, любой шрифт с засечками, если ни один из первых двух не найден.

Пример 3: Combining Font Styles

<p style="font-family: Arial, sans-serif; font-size: 18px; font-weight: bold;">Этот текст в шрифте Arial, больше и жирный.</p>

В этом примере мы не только устанавливаем семейство шрифтов, но и его размер и вес. Это дает нам больше контроля над тем, как выглядит наш текст.

Установка цвета шрифта

Теперь добавим немного цвета в нашу жизнь... или, точнее, в наш текст!

Пример 4: Покраска текста

<p style="color: blue;">Этот текст синий!</p>

Просто, правда? Мы используем свойство color, чтобы задать цвет текста.

Пример 5: Использование шестнадцатеричных цветов

<p style="color: #FF5733;">Этот текст имеет пользовательский цвет.</p>

Шестнадцатеричные цвета дают нам более точный контроль над цветом. В этом случае мы используем определенный оттенок оранжевого.

HTML элемент (устаревший)

Теперь у меня есть к вам маленькая история. Once upon a time, был HTML элемент под названием <basefont>. Его использовали для установки базового шрифта для всего HTML документа. Однако, как и многие вещи в технологии, он стал устаревшим и больше не поддерживается в HTML5.

Instead of <basefont>, мы теперь используем CSS для установки базовых шрифтов для всего документа. Вот как мы это делаем:

<style>
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333333;
}
</style>

Этот код CSS, размещенный в секции <head> вашего HTML документа, устанавливает базовый шрифт (Arial), размер (16 пикселей) и цвет (темно-серый) для всего текста в <body> вашей веб-страницы.

Заключение

И вот мы arrived, друзья! Мы прошли через мир HTML шрифтов, от безопасных вариантов до установки цветов и стилей. Помните, ключ к maîtriser шрифты - это практика. Попробуйте разные комбинации, поиграйте с размерами и цветами, и увидите, что лучше всего подходит для ваших веб-страниц.

Пока мы заканчиваем, у меня есть маленький совет из лет моего teaching: Не бойтесь экспериментировать! Красота веб-разработки в том, что вы всегда можете отменить и попробовать снова. Так что идите смело, будьте смелыми с вашими шрифтами, и счастливого кодирования!

Credits: Image by storyset