Как задать шрифт html

Тег HTML параметры шрифта

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

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

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

Синтаксис

текст

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

Внимание! Это слово было выделено с помощью тега font.

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

 
 
 
 
Внимание! Это слово было выделено с помощью тега font.
 

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

Тег
	Да	Да	Да	Да	Да

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

RGB
HTML hex
colorname

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

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

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

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

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

числовое значение

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

• Абсолютное значение: число от 1 (самый маленький) до 7 (самый большой). Стандартный размер: 3.
• Относительное значение: «+1», «+2» и т.д. для увеличения размера шрифта или «-1», «-2» и т.д. для уменьшения размера шрифта.

Как задать шрифт html

CSS свойство font-family позволяет устанавливать шрифт для текста HTML элементов.

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

2. Безопасные шрифты

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

Список безопасных шрифтов:

• Arial
• Arial Black
• Courier New
• Comic Sans MS
• Georgia
• Impact
• Times New Roman
• Trebuchet MS
• Verdana

Обратите внимание: если Вы хотите использовать небезопасные шрифты, но не хотите использовать новые свойства, используйте резервные шрифты, о которых рассказано далее.

3. Резервные шрифты

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

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

/* Если на компьютере пользователя нет шрифта Verdana, то будет использован Times New Roman, если
на компьютере нет Times New Roman, то будет использован Arial */
p

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

В CSS шрифты делятся на следующие «семейства»:

• Serif шрифты данного семейства имеют небольшие засечки на концах символов. Примеры шрифтов данного семейства: Times New Roman, Georgia.
• Sans-Serif шрифты данного семейства не имеют засечек. Примеры: Arial, Arial Black, Trebuchet MS, Verdana.
• Monospace все символы шрифтов данного семейства занимают одинаковую ширину. Примеры: Courier New.
• Fantasy семейство «причудливых» шрифтов использующихся в основном для создания красочных заголовков. Примеры: Impact

/* Если на компьютере пользователя нет шрифта Verdana, то будет использован Arial, если на компьютере нет Arial, то будет использоваться один из шрифтов
семейства Sans-Serif имеющихся на компьютере */
p

4. Размер шрифта

CSS свойство font-size устанавливает размер шрифта HTML элементов. Размер шрифта можно задать двумя способами:

• Абсолютный способ

Данный способ позволяет задавать размер шрифта в абсолютных единицах таких как: пиксели (px) или проценты (%).

• Относительный способ

Обратите внимание: не используйте свойство font-size для того, чтобы оформлять абзацы как заголовки. Всегда используйте для определения абзацев тэги p, а для заголовков h1-h6.

5. Стиль шрифта

Свойство font-style позволяет сделать шрифт HTML элемента курсивным.

Свойство font-weight позволяет изменять толщину шрифта.

Следующие задания предлагаю выполнить самостоятельно.

Практическое задание 1

Оформите элементы согласно их описанию:

Данный абзац написан шрифтом Arial Black и имеет размер 20 пикселей.

Данный абзац написан курсивным шрифтом Courier New и имеет размер 24 пикселя.

Данный абзац написан жирным шрифтом Verdana и имеет размер 10 пикселей.

Данный абзац написан шрифтом Georgia и имеет размер 2.5em.

Данный абзац написан курсивным шрифтом Comic Sans MS и имеет размер 1.3em.

Как задать шрифт, изменить размер или цвет текста отдельного участка.

Первым делом хочу немного отвлечься от темы и поговорить о своих примерах кодов, например в предыдущей главе я ни где не изобразил полного кода страницы а показывал только так:

Но на самом деле я подразумевал вот так:

Т.е. в дальнейшем вы должны понимать что все теги которые я демонстрирую вы должны вставлять в основной ХТМЛ-шаблон между тегами и

А сейчас вернемся к нашей главе, для выполнения всех этих функций перечисленных в заглавии служит тег-контейнер

Теперь вернемся к нашей теме.

Для того что бы изменить размер, шрифт или цвет текста отдельного участка в HTML существует тег-контейнер отдельный кусок текста

Начнем по порядку, и научимся изменять цвет текста отдельного участка, для этой цели в тег FONT нужно поместить атрибут COLOR вот так:

color="red"> отдельный кусок текста

Значения атрибута color такие-же как и для атрибутов bgcolor text тега body, т.е мы можем их задавать словами по английски(Black, Green, Silver, Lime, Gray, Olive, White, Yellow, Maroon, Navy, Red, Blue, Purple, Teal, Fuchsia, Aqua)или номерами цвета в RGB (#000000- #FFFFFF)

Далее мы с вами научимся задавать шрифты для текста и познакомимся с новым атрибутом FACE тега FONT,

face="Tahoma"> отдельный кусок текста

• Arial
• Cosmic Sans
• Courier
• Garamond
• Helvetica
• Verdana
• Tahoma
• Times
• Times New Roman

face="Tahoma, Times, Verdana"> отдельный кусок текста

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

А теперь перейдем к размерам, изменить размер текста в HTML можно при помощи двух тегов font и/или BASEFONT.
Начнем с BASEFONT, этот тег служит для изменения базового цвета, шрифта и размера текста, на пример:
. текст.
Этот тег не является контейнером, т.е. обратного тега не имеет. Цвет и шрифт текста задается как в теге FONT, а вот для изменения размера текста используется атрибут SIZE с значением от 1 до 7. Этот тег в тексте можно использовать несколько раз: size=»4″>. текст.
size=»6″>. текст.
size=»3″>. текст.
По умолчанию размер текста = «3», этот размер можно не задавать. В первом примере мы весть текст увеличили на единицу, во второй линии мы его увиличили до «6», а в третей мы опять его вернули к тексту по умолчанию.
Теперь хочу вас круто огорчить, этот тег был введен в версии HTML-4.01, и соответственно поддерживается в браузере только Интернет Експлорер, остальные браузеры его просто игнорируют, Так что лучше этот тег не использовать вообще.
А пользоваться только тегом FONT с атрибутом SIZE он поддерживается почти всеми браузерами. Атрибут SIZE, так же принимает значения от 1 до 7, но эти размеры могут задаваться и от «-2» до «+4»
текст
текст
текст
текст
текст
текст
текст
Тег FONT как и BASEFONT может содержать несколько атрибутов:
size=»5″ color=»red» fase=»Tahoma, Times, Verdana»>. текст.

Как задать шрифт в html

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

Как задавали шрифт раньше

Ранее в html использовался специальный парный тег font, который выступил как контейнер для изменения параметров шрифта, таких, как гарнитура, цвет и размер. Сегодня такой подход является в корне неверным. Почему? Веб-стандарты определяют, что внешний вид страницы не должен прописываться в html-разметке. К тому же, тег поддерживается полноценно только в очень старой версии HTML – HTML 3.

Задание шрифта в html правильным образом

Сегодня для этой цели стоит использовать исключительно возможности css. Этот язык как раз и создан для того, чтобы определять через него внешний вид. К тому же в css намного больше свойств, которые влияют на внешний вид текста. Рассмотрим понемногу каждое из них:

Font-style. Определяет начертание текста. Принимает такие значения:

Oblique – наклонный текст. Он немного отличается от курсива, буквы склоняются немного вправо.

Font-variant. Свойство назначает, как нужно интерпретировать написание строчных букв. Имеет всего два значения:

Normal – обычное поведение.

Small-caps – все строчные буквы преобразовываются в заглавные, а их размер немного уменьшается по сравнению с обычным шрифтом.

Font-weight. Определяет жирность текста. Значение можно задавать ключевыми словами или числовым значением. Давайте рассмотрим все варианты:

Normal – обычный текст

Bold – текст с жирным начертанием

Bolder – будет выводиться жирнее, чем он выводится у родительского элемента.

Lighter – буквы получат меньше жирности, по сравнению с родителем.

Вот так все просто. Кроме этого, есть возможность задавать значение в виде чисел от 100 до 900, где 900 – самый жирный. К примеру, значению normal соответствует 400, а bold – 700.

К сожалению, большинство браузеров не распознают этих числовых значений и могут применять всего два значения – normal и bold. Для эксперимента я создал 9 абзацев и задал каждому разную жирность текста – от 100 до 900. Потом открыл эту веб-страничку в разных браузерах и ни один не отобразил разные начертания. Вывод: лучше не применяйте числовые значения.

Font-size. Это свойство задает размер букв. Размер можно задавать в различных относительных и абсолютных величинах. Чаще всего размер задается в пикселах, относительных единицах em и процентах. Если вы хотите подробнее ознакомиться с заданием размера в css, то почитайте эту статью, где все описано более подробно.

Font-family. Пожалуй, самое основное свойство, которое определяет семейство или конкретное имя используемого шрифта. Если вы используете конкретное название, то нужно убедиться, что заданный шрифт найдется на компьютерах всех пользователей. Для надежности через запятую нужно прописать альтернативный вариант или целое семейство. Шрифты подразделяются на такие семейства:

Serif – с засечками

Sans-serif – без засечек, рекомендуется применять для основного текста.

Monospace – моноширинные, ширина каждой буквы одинакова, соответственно.

Fantasy – необычные, декоративные.

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

Сокращенная запись

Все то, что мы рассмотрели выше, можно очень легко записать по сути в одну строчку с помощью замечательного свойства font, которое собирает вместе все настройки. Записывать нужно в такой последовательности: