Примечание. Эта страница связана с изменением типа шрифта, размера и цвета на веб-странице. Для Microsoft Word см. Нашу страницу о том, как изменить цвет, размер или тип шрифта в Word.

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

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

Если вы планируете изменить лицо шрифта и его цвет только один раз на веб-странице, вам нужно изменить его атрибуты в теге элемента. Используя атрибут style, вы можете указать начертание и цвет шрифта с помощью font-family, color и размер шрифта с помощью font-size, как показано в примере ниже.

Пример кода

Этот текст имеет шрифт Courier, синий и 20px.

Результат

Этот текст имеет шрифт Courier, синий, и размером 20px.

Использование CSS для одной или нескольких страниц

Пользовательский шрифт для одной страницы

В заголовке вашей веб-страницы вы можете вставить код между вкладками, чтобы изменить внешний вид вашего текста в различных элементах. Следующий синий блок содержит пример кода, который после вызова изменит ваше лицо шрифта на Courier и покрасит его в красный цвет. Как видите, мы определили имя класса как «пользовательское».

 .custom {font-family: Courier; красный цвет; Размер шрифта: 20px; } 

После определения этот стиль можно применить к большинству элементов на вашей странице, добавив к ним класс «custom». В следующем окне показаны две строки кода и их соответствующие результаты.

пример

Вся эта фраза красная и Курьер

Только слово ТЕСТ - красный и Курьер.

Результат

Вся эта фраза красная и курьерская.

Только слово ТЕСТ - красный и Курьер.

Пользовательский шрифт для многих страниц

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

Используя любой основной текстовый редактор, сохранение следующего текста в виде файла .css подготовит его к импорту.

 @charset "utf-8";
.courier {font-family: Courier; цвет: # 005CB9; } 

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

Совет. Пользователи могут изменять атрибуты элементов на странице, изменяя код в импортированном файле .css.

Решение для шрифтов

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

Пример кода

 Специальный пример шрифта. 

Результат