Изменить размер шрифта html

В html размер шрифта играет важную роль. Он позволяет обратить внимание пользователя на важную информацию, размещенную на странице сайта. Хотя важен не только размер букв, но и их цвет, толщина и даже семейство.

Теги и атрибуты при роботе со шрифтами html

Язык гипертекста обладает большим набором средств для работы со шрифтами. Ведь именно форматирование текста является основной задачей html .

Рассмотрим теги, которые используются для работы со шрифтами в html и их атрибуты. Основным из них является тег . С помощью значений его атрибутов можно задать несколько характеристик шрифта:

color – устанавливает цвет текста;
size – размер шрифта в условных единицах.

face – используется для установки семейства шрифтов текста, которые будут использованы внутри тега . Поддерживается сразу несколько значений перечисленных через запятую.

Также в html существует ряд парных тегов, задающих лишь одно правило форматирования. К ним относятся:

— задает в html жирный шрифт. Тег по действию аналогичный предыдущему;
— размер больше установленного по умолчанию;
— меньший размер шрифта;
— наклонный текст ( курсив ). Аналогичный ему тег ;
— текст с подчеркиванием;
— зачеркнутый;
_{— отображение текста только в нижнем регистре;}
— в верхнем регистре.

Возможности атрибута style

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

1) font-family – свойство устанавливает семейство шрифта. Возможно перечисление нескольких значений.
Изменение шрифта в html на следующее значение произойдет, если предыдущее семейство не установлено в операционной системе пользователя .

2) font-size – задается размер от 1 до 7. Это один из основных способов того, как в html можно увеличить шрифт.
Синтаксис написания:

Размер шрифта можно также задать:

В пикселях;
В абсолютном значении ( xx-small, x-small, small, medium, large );
В процентах;
В пунктах ( pt ).

3) font-style – устанавливает стиль написания шрифта. Синтаксис:

normal –нормальное написание;
italic – курсив;
oblique – шрифт с наклоном вправо;
inherit – наследует написание родительского элемента.

Пример того, как поменять шрифт в html с помощью этого свойства:

4) font-variant – переводит все прописные буквы в заглавные. Синтаксис:

Пример того, как изменить шрифт в html этим свойством:

5) font-weight – позволяет установить толщину написание текста ( насыщенность ). Синтаксис:

bold – устанавливает полужирный шрифт html;
bolder – жирнее относительно normal;
lighter –менее насыщенное относительно normal;
normal – нормальное написание;
100-900 – задается толщина шрифта в числовом эквиваленте.

Свойство font и цвет шрифта html

Font является еще одним контейнерным свойством. Внутри себя оно объединило значения нескольких свойств, предназначенных для изменения шрифтов. Синтаксис font :

Также в качестве значения могут быть заданы шрифты, используемые системой в надписях на различных элементах управления:

caption – для кнопок;
icon – для иконок;
menu – меню;
message-box –для диалоговых окон;
small-caption – для небольших элементов управления;
status-bar – шрифт строки состояния.

Для того чтобы задать цвет шрифта в html можно использовать свойство color . Оно позволяет устанавливать цвет, как с помощью ключевого слова, так и в формате rgb . А также в виде шестнадцатеричного кода.

Русскоязычные шрифты и их поддержка

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

Arial Black ;

Arial ;

Comic Sans MS ;

Courier New ;

Georgia ;

Lucida Console ;

Lucida Sans Unicode ;

Palatino Linotype ;

Tahoma ;

Times New Roman ;

Trebuchet MS ;

Verdana .

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

Для изменения размера шрифта есть несколько способов.

или через параметр шрифта size

Например вот так

текст

Тег как вы поняли является парным. Используется обычно для выделения ЗАГОЛОВКОВ. При этом текст, выделенный тегом будет располагаться как абзац. как будто вы перед текстом и после поставили еще теги
. Т.е. текст заключенный в тег будет написан с новой строки.

Само собой текст можно сделать еще и жирным и курсивом. Например вот так

текст

второй способ изменения размера шрифта

использование параметра в теге

Вернемся к нашей страничке.

В коде страницы есть вот такой кусок

я буду богатым и свободным человеком !

здесь с помощью тега и параметра color мы задаем цвет текста.

А с помощью параметра size можно задать размер текста, например вот так

size="4" >я буду богатым и свободным человеком !

тогда текст на странице будет выглядеть так
я буду богатым и свободным человеком !

Добавьте изменение в код страницы из предыдущего урока.

Часть №1

Часть №2

Часть №3

Часть №4

Часть №5

Часть №6

Часть №7

Microsoft Office Word

HTML с нуля

css с нуля

Статья 2. Как установить стили css для всех тегов параграфов

?Глобальное форматирование стилей css тегов параграфов

? Как установить стили css для тегов заголовков h? Как объединить стили параграфов

Статья 1. Что такое каскадные таблицы стилей css? Как создать каскадную таблицу стилей css? Как подключить каскадную таблицу стилей css?

Статья 16. Что такое тег

Статья 15. Что такое спецсимволы html? Как пишутся спецсимволы html?

Статья 14. Все об html таблицах. Что такое таблицы html, зачем они нужны, какие теги и атрибуты у таблиц html и многое другое

Каталог видео курсов

Заработок от uzeron.com

Каталог курсов

Дом знаний

Домашний доктор

Журналов в базе: 11
Статей в базе: 21
Комментариев в базе: 192

На сайте человек: 3

Статья 8. Как изменить размер шрифта html? Как выделить большой фрагмент текста?

Автор: Сергей Сукманюк

Дата создния: 2009-12-19

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

Значит так, как выделять заглавия Вы уже знаете. Но этим способом нельзя выделять большой текст! А сейчас я покажу Вам, как можно выделить большой текст в HTML (изменить размер шрифта). Для этого существуют атрибут size для тега . C его помощью Вы сможете установить любой интересующий Вас размер шрифта.

Вот как правильно записывается атрибут size для тега :

. — текст размера -2

. — текст размера -1

. — текст размера +0

. — текст размера +1

. — текст размера +2

. — текст размера +3

. — текст размера +4

Вот так легко Вы можете изменить размер шрифта своего текста.

Теперь рассмотрим это на практике. Я сделаю текст "Привет!" размером +3, а текст "Если Вы хотите в домашних условиях пройти профессиональные компьютерные курсы, и через 10 часов стать «Уверенным пользователем ПК», то это реально сделать с помощью диска «Компьютер, Давай Перейдем На Ты», подробная информация о котором есть на вкладке «Товары»" — размером -2.

Для этого добавляем к тексту тег с атрибутом size="-/+..":