Html код размер текста

В html размер текста задается с помощью атрибута size тега , известного нам из предыдущего урока. Этот параметр очень ограничен, так как размеров всего 7 и куда лучше задавать размер текста в css. Но мы же только постигаем основы, поэтому все же давайте разберемся, как изменить размер текста в html.

С помощью атрибута size тега можно задать размер от 1 до 7. Заметьте, единиц измерения нет никаких, просто 1 – самый маленький размер, а 7 – самый большой размер. Записывается это так:

Обратите внимание, сам размер можно не брать в двойные кавычки, как мы делали это у других параметров, после знака равно мы сразу указываем размер текста. Хотя кавычки никто не запрещает можно записывать так size=размер и так size="размер".

Закрепим теорию и откроем Notepad++, где наберем следующий код:

Как обычно сохраним файл с расширением .html и откроем его в браузере:

Видим, каждому абзацу задан свой размер от 1 до 7. Таким способом мы задали тексту абсолютный размер, но куда лучше назначать размер относительный, так как в браузере уже стоит по умолчанию size=3. Для того, чтобы указать относительный размер текста, нужно приписать знак плюс или минус. Например:

И так как в браузере стоит size=3, то мы можем назначать для размера значения от – 2 до +4. То есть, если мы запишем size=-1, то текст будет иметь размер 3 – 1 = 2. Рассмотрим пример:

Сохраним файл под другим именем и откроем его в браузере:

Как мы видим, каждому абзацу так же задался размер от 1 до 7. А теперь давайте сравним эту страницу со страницей, где мы задавали абсолютные размеры:

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

А вот что будет, если мы укажем размер, который окажется слишком большим относительно размера по умолчанию в браузере? Например, size=+6? Чтоб было понятнее, объясню: так как в браузере стоит по умолчанию 3 размер, а мы укажем плюс шесть, то это получиться 9 размер. Но мы знаем что размеров, которые можно назначить тексту, всего 7! Рассмотрим все на примере:

Браузер выдаст следующий результат:

Что мы видим? В последних трех абзацах текст имеет одинаковый размер. Для этих абзацев мы задали разные размеры:+4, +6 и +8, а изменений ни каких. Ничего удивительно, браузер увидев, что размеры +6 и +8 выходят за рамки допустимого размера и округлил значение до ближайшего возможного +4. Вот потому в последних трех абзацах текст имеет одинаковый размер. С отрицательными значениями происходит тоже самое, браузер не даст нам выйти за рамки и округлит значение до ближайшего меньшего размера.

Если все это показалось вам запутанным, рекомендую посмотреть видео урок. А на этом все! В следующем уроке мы закончим знакомство с тегом и поговорим о последнем его атрибуте color, который изменяет цвет текста.

Тег используется для указания параметров шрифта конкретного участка текста в HTML документе.

С помощью тега font можно задать параметры шрифта: размер (size), цвет (color) и семейство шрифта (face).

Этот тег является устаревшим. В HTML5 для управления параметрами шрифта используйте группу CSS свойств font .

Синтаксис

Отображение в браузере

Пример использования тега в HTML коде

Поддержка браузерами

Атрибуты тега

Цвет текста. Может быть указан в любом из трех поддерживаемых форматов:

• RGB, например, "rgb(15, 92, 50)";
• HTML hex, например, "#0F5C32";
• colorname, например, "black".

имя семейства шрифтов

Семейство шрифтов. Можно указать несколько шрифтов через запятую. Будет использован первый доступный на компьютере пользователя шрифт.

Приоритет слева направо (если не доступен первый, проверяется второй и т.д.).

Размер шрифта. Можно указать в абсолютном и относительном форматах.

В 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 русские: