HTML тег <font>
HTML тег <font> предназначен для редактирования вида текста. Через его атрибуты можно задать цвет, размер и семейство шрифта.
Синтаксис html тега <font>
Каждый элемент задается через специальные атрибуты color, face, size. Их можно располагать в любом порядке. Можно использовать 1, 2 или все 3 атрибута.
1. Атрибут color . Цвет можно задавать тремя способами: название цвета, #XXXXXX, и RGB(). Читайте: коды и названия html цветов для сайта
2. Атрибут face задает шрифт. Например, Verdana, Arial, Times Nev Roman.
В HTML используются три типа шрифтов:
- serif — с засечками на кончиках букв
- sans-serif — без засечек
- monospaced — все буквы имеют фиксированную ширину (моноширинные)
3. Атрибут size задает размер шрифта. Указывается в виде цифры. По умолчанию равен 3.
Главное удобство HTML тега <font> в том, что он позволяет быстро задать самые необходимые изменения для текста и не вносить их отдельно в таблицу стилей CSS. Однако современный стандарт HTML5 не рекомендует использовать эти атрибуты.
Приведем пример с тегом <font>
На странице преобразуется в следующее
Существует также семейство CSS font. С помощью CSS стилей можно задавать следующие стили:
HTML-теги для оформления текста
Современный сайт невозможно представить без текстов. Чтобы пользователи могли легко взаимодействовать с контентом, важно позаботиться о его форматировании. Использование html тегов позволяет оформить текст, выбрать шрифт и начертание, выделить заголовки – другими словами, сделать всё, чтобы информация стала наглядной и доступной.
Кроме заботы о читателе, разметка текста при помощи html тегов выполняет другую важную функцию. Теги влияют на оптимизацию сайта и помогают улучшить индексацию страницы поисковыми системами. Грамотное форматирование дает возможность поисковым роботам выделить ключевые слова, по которым нужно ранжировать страницу в поисковой выдаче.
Как обернуть текст в тег
Html теги – это своего рода контейнеры для текста. Они не имеют визуального отображения, но несут смысловую нагрузку, и указывают, как будет отображаться на странице сайта каждый текстовый фрагмент.
За вид текста в целом отвечает хтмл тег <font>. Через его атрибуты face, size и color можно задать необходимый шрифт, его размер и цвет.
Как указать шрифт при помощи html тега
Эти атрибуты можно располагать в любом порядке и использовать по отдельности.
Тег шрифта
Размер шрифта можно изменить при помощи атрибута size. Указывается в виде цифры, по умолчанию применяется значение size =”3”.
При помощи html тегов можно задать любой из 3 типов шрифтов:
- С засечками (serif)
- Без засечек (san-serif)
- Моноширинный (monospaced)
Атрибут face задает необходимый шрифт, достаточно указать его название.
Приведем пример использования html тега шрифта:
- <html>
- <body>
- <font face=Times New Roman size=»5″>пример шрифта serif — Times New Roman <font/>
- <font face=Arial size=»4″>пример шрифта san-serif — Arial<font/>
- <font face=courier>пример шрифта monospaced — Courier<font/>
- <body/>
- <html/>
Данное форматирование будет выглядеть на странице следующим образом:
Результат применения html тега <font> с атрибутами face и size
Тег цвета в html
Задать цвет шрифта при помощи атрибута color можно тремя способами. Первый – указать RGB код цвета, второй – выбрать html код цвета, третий – просто написать его название. Посмотреть коды популярных цветов можно в специальных таблицах.
Названия и коды цветов для html
Воспользуемся способом указания цвета по его названию.
- <html>
- <body>
- <font color=Crimson size=»5″>выбор цвета шрифта Crimson<font/>
- <body/>
- <html/>
Тег заголовка
Заголовки – одни из важнейших элементов, которые формируют структуру web-страницы. Для создания логической последовательности текста, выделения названий разделов используются заголовки разных уровней. Они выделяются html тегами <h1>,<h2>,…<h6>.
Как выглядят заголовки разных уровней
Важно учитывать, что заголовок с хтмл тегом <h1> может использоваться на каждой странице сайта только один раз. Он должен быть уникальным и содержать ключевые слова, соответствующие тематике страницы.
Размеры шрифта заголовков разных уровней:
| Уровень заголовка | Размер шрифта в браузере | Верхний и нижний отступы |
| <h1> | 2em | 0,67em |
| <h2> | 1,5em | 0,83em |
| <h3> | 1,17em | 1em |
| <h4> | 1em | 1,33em |
| <h5> | 0,83em | 1,67em |
| <h6> | 0,67em | 2,33em |
Тег текста по центру
Выравнивание производится при помощи атрибута align. Задавая для него значения left или right, можно установить выравнивание по левому или правому краю. Если параметр не задан, то по умолчанию выравнивание произойдет по левому краю.
Выбрав html тег align=»center», можно выровнять слово, предложение или абзац по центру.
Как выглядит выравнивание текста на веб-странице
Тег жирного текста
Полужирное начертание шрифта можно установить при помощи двух разных html тегов.
Тег <b> визуально выделяет шрифт, при этом не создавая дополнительной смысловой нагрузки.
Тег <strong> относится к инструментам логической разметки. Он не только выделяет текст, но и указывает на его важность при ранжировании страницы. Еще он влияет на интонацию при голосовой озвучке страницы, показывая, что на выделенную информацию стоит обратить особое внимание.
Тег зачеркнутого текста
Тег <del> используется для выделения удаленного фрагмента. Визуально перечеркивает текст.
Теги <s> и <strike> также визуально делает шрифт перечеркнутым. Не несут дополнительной смысловой нагрузки.
Тег подчеркнутого текста
Тег <u> выделяет фрагмент текста, подчеркивая его.
Тег <ins> также отвечает за создание подчеркнутого шрифта. Этот хтмл тег обычно используют для того, чтобы отметить изменения. Им выделяют новый текст, добавленный в документ.
Тег ссылки
Для оформления внешних и внутренних ссылок на сайте используется html тег <a>. Он обязательно содержит атрибут href=»url», который указывает на адрес ссылки. Между тегами <a> <a/> прописывают анкор, чтобы обозначить, как ссылка будет выглядеть для пользователей. Анкором могут быть слова, символы или объекты.
Как оформить ссылку на сайте html тегами
Выводы
Html теги не отображаются на странице сайта, которую видят пользователи. Но их использование необходимо для создания правильной структуры страницы. Грамотное применение хтмл тегов положительно влияет на индексацию сайта и его продвижение в поисковой выдаче.
При оформлении заголовков на странице необходимо последовательно использовать html теги <h1>, <h2>,…<h6>. Заголовок первого уровня может применяться на странице только один раз, и содержать подходящие по смыслу ключевые слова.
Непосредственно за шрифт, его цвет и размер отвечает html тег <font> и его атрибуты.
Параметры текста в HTML: шрифты, курсив, жирный и другие
В этом видеоуроке мы рассмотрим дополнительные параметры текста:
- Шрифты
- Курсив, жирный, подчеркнутый , перечеркнутый и другие
- Добавлено: 16 апреля 2011
- Автор: Олег Зубцов
- Рубрика: Видеокурс по HTML
- Метки:
- Разархивировать скачанный файл.
- Открыть папку index.
- Запустить файл index.html в браузере.
Приветствую вас в еще одном видеоуроке из курса по HTML от сайта info-line.net. В этом видеоуроке мы разберем еще несколько дополнительных параметров и стилей для текста. Не будем долго рассуждать и перейдем сразу к коду — там вы сами все увидите.
Как изменить шрифт?
Приступим к редактированию какого-нибудь нашего текста. Возьмем текст «Текст заголовка H2». Для начала, давайте изменим ему шрифт. Поставим «Verdana». Если через запятую указать шрифты, то это означает, что если у человека на компьютере нет шрифта Verdana, то будет использоваться шрифт Arial. Впрочем, именно поэтому не стоит использовать редкие шрифты. Зачастую их нет на компьютере у пользователя.
Как сделать текст курсивом?
Теперь давайте уберем тег <h2> и выделим текст курсивом. Используем теги <i></i>.
Как сделать текст жирным?
Давайте текст, который прописан у нас курсивом, сделаем жирным, используя теги <b></b>.
Как сделать текст подчеркнутым?
А текст заголовка h3сделаем подчеркнутым, используя теги <u></u>.
Давайте сохраним наш документ и перейдем в браузер. Как видите, «текст заголовка h3» у нас подчеркнутый, «текст курсивом» изображен курсивом, и «синий цвет» изображен жирным.
Как сделать текст перечеркнутым?
Переходим обратно в код. Давайте сделаем наш центрированный текст перечеркнутым, применяя теги <s></s>.
Как сделать текст моноширным?
А текст, помещенный в тег <div> сделаем моноширным (буквы одинаковой ширины), используя теги <tt></tt>.
Сохраняем страницу и переходим в браузер. Как видим, «Какой-нибудь текст, помещенный в тег div» стал моноширным, а «Центрированный текст без использования тега p» — перечеркнутым.
Как написать текст в верхнем или нижнем индексе?
Давайте перейдем в код и еще поэкспериментируем с текстом. Допустим, мы хотим написать математическую задачку типа «два плюс два равно два в квадрате». Как нам написать «в квадрате»? Очень просто – используя теги <sup></sup>, что означает «верхний индекс». Если нам понадобится написать нижний индекс, то в этом случае мы воспользуемся тегами <sub></sub>. Они отличаются от предыдущих последней буквой.
Переходим в браузеры (скачать браузеры можно из первого урока) и проверяем. Как видите, выражение записано правильно и у текста «Текст заголовка H3» цифра «3» изображена в нижнем индексе.
Как сделать текст большим и маленьким?
Есть еще два тега, изменяющие текст. Они довольно редко используются, однако я вам их покажу. Например, мы хотим сделать «Синий цвет» чуть меньше. Используем теги <small></small>.
А «Центрированный текст без использования тега p» — чуть больше. Используем теги <big></big>.
В переводе «big» означает «большой», а «small» — «маленький».
Сохраняем, переходим в браузер, обновляем страницу. Как видите, «Центрированный текст без использования тега p» стал больше, а «Синий цвет» — меньше.
Как поменять шрифт в блокноте html
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap
Шрифты в CSS. Основы CSS для начинающих. Урок №6
Всем привет!
В этом уроке я расскажу, как в CSS коде можно быстро изменить шрифты сайта, размер, стиль и т.д.
В конце я приготовил для вас интересный фокус. Я покажу, как подключить к вашей веб странице или сайту нестандартный шрифт. Неплохой бонус, согласитесь!
Стиль шрифта в CSS
Свойство «FONT-STYLE»
Если вы захотели поменять стиль шрифта, а именно, сделать текст курсивом или просто наклонным, то воспользуйтесь правилом « font-style ».
- normal — нормальный шрифт;
- italic — курсив;
- oblique — наклонный шрифт.
Толщина шрифта в CSS
Свойство «FONT-WEIGHT»
Если вы хотите сделать шрифт жирным, используйте правило « font-weight ».
- normal — нормальная жирность
- lighter — светлое начертание
- bold — полужирный
- bolder– жирный
Можно указать толщину шрифта и обычными цифрами от 100 до 900.
- 100 — светлый шрифт,
- 900 — самый жирный
Размер шрифта в CSS
Свойство «FONT-SIZE»
Шрифт можно менять по размеру. Для этого используйте правило « font-size ».
Значение задается в « px » и « % ».
Шрифты в CSS
Свойство «FONT-FAMILY»
На каждом компьютере установлены стандартные шрифты, такие как « Times New Roman », « Arial » или « Verdana ». Выбор шрифта зависит от вкуса каждого, но потом он влияет на то, как внешне будет выглядеть сайт.
Чтобы указать шрифт, воспользуйтесь правилом « font-family ».
Можно задавать в правилах несколько шрифтов. Это на тот случай, если у пользователя нет первого шрифта, тогда подключится второй.
Обратите внимание, шрифт « «Times New Roman» » написан в кавычках ( » » ).
В кавычки берутся те шрифты, в которых название состоит из двух и более слов и есть пробел между словами.
Семейство шрифтов
Можно в правило « font-family » прописать и целое семейство шрифтов.
Наверное, вы меня не совсем поняли. Сейчас попробую объяснить.
Существует множество видов шрифтов, которые образуют так называемые семейства.
Существует всего пять семейств шрифтов:
- sans—serif – шрифты без засечек (как Arial).
- serif— семейство шрифтов с засечками (как Times New Roman).
- monospace – моноширинные шрифты, ширина каждого символа в таком семействе одинакова.
- cursive–курсивные шрифты.
- fantasy — художественные и декоративные шрифты.
А можно и вот так:
Подключение нестандартных шрифтов в CSS
Свойство «@FONT-FACE»
Бывает такой момент, что вам просто необходимо установить на сайт нестандартный шрифт, то есть, шрифт, который не установлен по умолчанию у пользователя на компьютере.
Правило « @font-face » позволяет нам импортировать внешний файл шрифтов в документ. После импортирования, мы можем использовать нестандартный шрифт как обычный через правило « font-family ».
Залейте любой нестандартный шрифт формата «ttf» в папку вашего сайта рядом с файлом css, это для того, чтобы вы не запутались и правильно написали путь к шрифту. Для примера я возьму нестандартный шрифт с именем « DS-UncialFunnyHand-Medium.ttf» .
Вот пример подключения нестандартного шрифта.
- font-family:. ;— здесь пишем имя шрифта;
- src: url(. ); — тут указываем путь к файлу со шрифтом который будет загружаться с сайта.
Вот полный пример с подключением нестандартного шрифта и его использование.