Содержание
Эта страница содержит инструкции о том, как изменить шрифт и его цвет на веб-странице. С введением HTML5 правильным способом настройки шрифтов веб-страниц является использование каскадных таблиц стилей. Старый метод использования встроенного атрибута стиля или тега шрифта устарел и больше не должен использоваться.
Заметка
Хотя устаревшие методы могут по-прежнему корректно отображаться в современных интернет-браузерах, они больше не гарантируют этого. Чтобы создать веб-страницы, которые правильно отображаются для максимального количества пользователей, используйте методы CSS, описанные на этой странице.
Заметка
Если вам нужна помощь в настройке внешнего вида шрифта в документе Microsoft Word, узнайте, как изменить цвет, размер или тип шрифта в Word.
- Использование CSS для одного приложения.
- Использование CSS для одной или нескольких страниц.
- Тег Font
Использование CSS для одного приложения
Если вы планируете изменить лицо шрифта и его цвет только один раз на веб-странице, настройте его атрибуты в теге элемента. Используя атрибут style, вы можете указать шрифт face и color с font-family, color, а размер шрифта с font-size, как показано в примере ниже.
Пример кода
Этот текст имеет шрифт Courier, синий и 20px.
Результат
Этот текст имеет шрифт Courier, синий, и размером 20px.
Использование CSS для одной или нескольких страниц
Пользовательский шрифт для одной страницы
В заголовке вашей веб-страницы вы можете вставить код между вкладками, чтобы изменить внешний вид вашего текста в различных элементах. Следующий синий блок содержит пример кода, который после вызова изменит ваше лицо шрифта на Courier и покрасит его в красный цвет. Как видите, мы определили имя класса как «пользовательское».
.обычай {
семья шрифтов: курьер;
красный цвет;
Размер шрифта: 20px;
}
После определения этот стиль можно применить к большинству элементов на вашей странице, добавив к ним класс «custom». В следующем окне показаны две строки кода и их соответствующие результаты.
пример
Вся эта фраза красная и Курьер
Только слово ТЕСТ — красный и Курьер.
Результат
Вся эта фраза красная и курьерская.
Только слово ТЕСТ — красный и Курьер.
Пользовательский шрифт для многих страниц
Импорт внешнего CSS-файла может быть очень полезным, поскольку он позволяет пользователям изменять правила для нескольких страниц одновременно. В следующем разделе показан пример создания базового файла CSS, который меняет шрифт и его цвет для большинства элементов. Этот файл может быть загружен более чем на одну веб-страницу, даже на весь сайт.
Используя любой основной текстовый редактор, сохранение следующего текста в виде файла .css подготовит его к импорту.
@charset "utf-8";
.курьер { семья шрифтов: курьер; цвет: # 005CB9; }
Как только предыдущий текст помещен в файл .css (мы назвали наш basic.css), вы можете ссылаться на него с любой другой страницы, используя строку, аналогичную следующей.
Чаевые
Пользователи могут изменять атрибуты элементов на странице, изменяя код в импортированном файле .css.
Решение для шрифтов
Несмотря на то, что тег HTML устарел, он все еще может использоваться и может потребоваться для некоторых онлайн-сервисов. При использовании тега FONT необходимо включить атрибут face, который описывает используемый шрифт. В приведенном ниже примере мы используем шрифт Courier и шестнадцатеричный цветовой код # 005CB9, который темно-синий.
Пример кода
Специальный пример шрифта.
Результат
Специальный пример шрифта.
