Тег HTML параметры шрифта — размер, семейство, цвет — устаревший тег
Рейтинг: 3 из 5, голосов 22
14 октября 2019 г.
Тег <font> используется для указания параметров шрифта конкретного участка текста в HTML документе.
С помощью тега font можно задать параметры шрифта: размер (size), цвет (color) и семейство шрифта (face).
Этот тег является устаревшим. В HTML5 для управления параметрами шрифта используйте группу CSS свойств font.
Синтаксис
<font атрибуты>текст</font>
Отображение в браузере
Внимание! Это слово было выделено с помощью тега font.
Пример использования тега <font> в HTML коде
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Изменение параметров шрифта с помощью тега font</title>
</head>
<body>
<div><font size="6" color="orange" face="Times New Roman">Внимание!</font> Это слово было выделено с помощью тега font.</div>
</body>
</html>
</div>Поддержка браузерами
| Тег | |||||
| <font> | Да | Да | Да | Да | Да |
Атрибуты тега <font>
| Атрибут | Значение | Описание |
|---|---|---|
| color |
HTML hex colorname |
Цвет текста. Может быть указан в любом из трех поддерживаемых форматов:
|
| face |
имя семейства шрифтов |
Приоритет слева направо (если не доступен первый, проверяется второй и т.д.). |
| size |
числовое значение |
Размер шрифта. Можно указать в абсолютном и относительном форматах.
|
Тег <font> также поддерживает глобальные HTML атрибуты.
by Lebedev
seodon.ru | Учебник HTML — Как изменить шрифт?
Опубликовано: 29.09.2010 Последняя правка: 08.12.2015
При создании сайта постоянно возникает необходимость изменения шрифта текста для самых разных частей и элементов HTML-страниц, ведь это не только добавляет сайту уникальность и стиль, но и повышает качество восприятия информации. В HTML для этого существуют специальные теги, о них мы и поговорим в данном уроке, который будет одним из самых больших в этом учебнике. Но, как я вам уже говорил ранее, не старайтесь все запоминать наизусть, не надо, главное — разобраться и понять о чем идет речь на каждом этапе урока.
Изменение стилей шрифтов
Изменять стили написания шрифтов в HTML можно далеко не одним способом и вы скоро в этом убедитесь. А теперь давайте рассмотрим несколько новых тегов:
<B>…</B> и <STRONG>…</STRONG> — выделяют текст полужирным шрифтом.
<I>…</I> и <EM>.
<SUP>…</SUP> — выводит текст в верхнем индексе, например E = mc2.
<SUB>…</SUB> — выводит текст в нижнем индексе, например H2SO4.
Все эти теги являются встроенными (inline, уровня строки), то есть не создают переносы строк до и после себя, а располагаются на одной строке. Содержать они могут тоже только встроенные элементы, поэтому их свободно можно вкладывать друг в друга. Самое главное не забывайте о правильной вложенности: тег, открытый раньше — должен быть закрыт позже.
Думаю, вы заметили, что для выделения жирным и курсивом существует по два тега. Дело в том, что обычные браузеры отображают содержимое этих тегов одинаково, а вот невизуальные (голосовые) браузеры могут по особенному акцентировать текст внутри <STRONG> и <EM>. Поэтому, если вы хотите выделить какие-то слова или фразы, чтобы привлечь читателя, то лучше использовать именно эти теги, хотя, по большому счету, разницы нет.
Вы спросите: «Но неужели указанные выше теги — это все, чем можно выделить текст в HTML»? Ну конечно же нет! Существуют еще теги <S> и <STRIKE>, подчеркивающие текст, а также тег <U>, отображающий зачеркнутый текст. Но, видите ли, эти теги являются устаревшими в HTML и их, как и атрибут align, возможно скоро перестанут понимать браузеры. Поэтому я вам покажу другой способ, который вы можете использовать без опаски. А заключается он в применении атрибута style, причем его допустимо указывать внутри любых тегов. Общий синтаксис следующий:
<тег>…</тег> — подчеркивает текст.
<тег>…</тег> — надчеркивает текст.
<тег>…</тег> — зачеркивает текст.
Пример изменения стилей шрифтов
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1251"> <title>Изменение стилей шрифтов</title> </head> <body> <p><b>Жирный шрифт.</b> <i>Курсив.</i></p> <p><b><i>Жирный курсив.</i></b></p> <p><em>H<sub>2</sub>SO<sub>4</sub></em> - формула серной кислоты написанная курсивом.</p> <p>Подчеркнутый параграф текста.</p> <p>Обычный текст, <strong>зачеркнутый жирный.</strong> </p> </body> </html>
Результат в браузере
Жирный шрифт. Курсив.
Жирный курсив.
H2SO4 — формула серной кислоты написанная курсивом.
Подчеркнутый параграф текста.
Обычный текст, зачеркнутый жирный.
Теперь хотелось бы сделать одно пояснение по поводу атрибута style. Style — это абсолютно обычный атрибут тегов, но относится он к Каскадным таблицам стилей (CSS). В далеком прошлом все функции по структуризации HTML-страницы в целом и по внешнему представлению ее каждого элемента в отдельности (цвет, форма, положение на странице и т.
<тег>…</тег>
Используя style вы совершенно ничего не потеряете, но зато научитесь писать грамотный HTML, а в качестве бонуса еще и CSS немного освоите.
Тег <SPAN> или что делать, когда нет нужных тегов
Ну что, пока все понятно? Хорошо, тогда вопрос. А что вы будете делать, если вам, например, надо зачеркнуть не весь параграф, а только половину текста, причем не делать его ни жирным, ни курсивом? Ну да не переживайте, тут вам поможет один очень удобный и нужный тег.
Итак, знакомьтесь — <SPAN>…</SPAN>. Этот тег тоже является встроенным (inline, уровня строки) и может содержать любые встроенные теги, но главное не это.
Сам по себе <SPAN>, без атрибутов, не добавляет никаких изменений ни тексту, ни тегам находящимся внутри него. А создан он был специально для стилей, то есть, по сути, для атрибута style. Именно благодаря этому атрибуту, а вернее его разным значениям, у <SPAN> появляются те или иные свойства. Вот так, а теперь изучаем пример.
Пример использования тега SPAN
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1251"> <title>Использование тега SPAN</title> </head> <body> <p><span>Обычный текст без изменений.</span></p> <p>Еще обычный текст. <span>Подчеркнутый.</span> <span>Зачеркнутый.</span> </p> </body> </html>
Результат в браузере
Обычный текст без изменений.
Еще обычный текст. Подчеркнутый. Зачеркнутый.
Меняем имя (гарнитуру) шрифта
Не знаете что такое имя шрифта? Наверняка многие из вас хоть когда-то набивали текст в Microsoft Word или OpenOffice Writer и видели такое меню:
Меню выбора шрифта в Microsoft Word.
Это и есть имена шрифтов, которые имеются на вашем компьютере и их используют не только Word или Writer, но и многие другие приложения, в том числе и браузеры. Имя (гарнитура) шрифта определяет сам его рисунок отличающий один шрифт от другого.
Я вам настоятельно не рекомендую применять какие-либо экзотические шрифты, так как их может не быть на компьютере человека, который зайдет к вам на сайт и тогда вместо букв он увидит разные непонятные символы или квадратики. Вот список самых распространенных шрифтов, которые практически наверняка есть на компьютере каждого пользователя:
| Шрифты | Семейство |
|---|---|
| ‘Comic Sans MS’ | cursive (рукописные) |
| Courier | monospace (моноширинные) |
| Arial, Helvetica, Verdana, Tahoma | sans-serif (рубленные, гротески) |
| Times, ‘Times New Roman’, Garamond | serif (с засечками, антиква) |
По умолчанию практически все браузеры используют шрифт ‘Times New Roman’, а чтобы его изменить используется все тот же атрибут style, который можно применить внутри любого тега.
Общий синтаксис указания следующий:
<тег>…</тег>
Если имя шрифта состоит из нескольких слов, то его необходимо закрывать в одинарные кавычки. Допускается указывать не одно, а несколько имен шрифтов через запятую и тогда, если первого шрифта на компьютере нет — будет использован второй, третий и т.д. Но в конце обязательно поставьте имя всего семейства шрифтов, в этом случае, если браузер не обнаружит ни одного шрифта, то применит шрифт максимально подходящий к этому семейству.
Чтобы изменить шрифт на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить шрифт для отдельной части текста, то заключите его в тег <SPAN> и примените атрибут к нему.
Пример изменения имени шрифтов
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение имени шрифтов</title>
</head>
<body>
<p>Это шрифт Arial, если его нет, то Verdana, а если
и его нет, то любой другой из sans-serif.
</p>
<p>
Это Comic Sans MS или любой cursive.
</p>
<p>Это опять Arial, Verdana или любой sans-serif.
<span>
А это Courier или любой monospace.
</span>
</p>
</body>
</html>
</p>
<p>
Это Comic Sans MS или любой cursive.
</p>
<p>Это опять Arial, Verdana или любой sans-serif.
<span>
А это Courier или любой monospace.
</span>
</p>
</body>
</html>Результат в браузере
Это шрифт Arial, если его нет, то Verdana, а если и его нет, то любой другой из sans-serif.
Это Comic Sans MS или любой cursive.
Это опять Arial, Verdana или любой sans-serif. А это Courier или любой monospace.
Ну что, разобрались в примере? Сделаю одно пояснение, понимание которого вам серьезно облегчит жизнь в будущем, хотя думаю многие уже догадались. Итак, если теги вложены друг в друга и несколько из них осуществляют изменения одного типа (например, меняют имя шрифта), то теги-потомки переопределяют свойства тегов-предков. Если же вложенные теги осуществляют разные изменения, то они дополняют друг друга, вот и все.
Меняем размер шрифта
Язык HTML ограничен всего семью размерами шрифтов, что, согласитесь, очень мало для хорошего сайта.
Поэтому для изменения размеров все давно используют CSS, и сейчас вы тоже этому научитесь.
В CSS есть порядка десяти единиц измерения, но мы с вами рассмотрим только три самых популярных — это пункты (pt), пиксели (px) и проценты (%). Итак:
- pt — Пункты. Один пункт равен 1/72 дюйма, а один дюйм — 2.54см. Следовательно, 1pt = 0,03527778см. Это абсолютная величина, так как размер заданный в пунктах не зависит ни от чего.
- px — Пиксели. Измеряется в пикселях монитора компьютера. Пиксель — это самая маленькая точка на мониторе и она является относительной величиной, так как ее размер зависит от текущего разрешения экрана и размера самого монитора.
- % — Проценты. Высчитывается в процентах, где за 100% берется значение родительского тега, а если оно не указано, то значение в браузере по умолчанию. Это тоже относительная величина, ведь размер шрифта родителя может быть абсолютно разный, да и размер шрифта в браузере пользователи могут свободно менять.
Чтобы указать размер шрифта используется атрибут style и его можно указать внутри любого тега. Общий синтаксис такой:
<тег>…</тег>
Как и в случае с именами шрифтов, чтобы изменить размер шрифта на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить шрифт для фрагмента текста, то заключите его в тег <SPAN> и примените атрибут к нему.
Пример изменения размера шрифтов
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение размера шрифта</title>
</head>
<body>
<p>Этот размер шрифта составляет 90% от размера
в браузере по умолчанию.
</p>
<p>
Этот размер составляет 90% уже от размера в теге BODY.
</p>
<h5>
Размер шрифта заголовка составляет 120% от размера в BODY.
</h5>
<p>Это опять 90% от размера в браузере по умолчанию.
<span>
Размер этого шрифта 15 пунктов.
</span>
</p>
</body>
</html>
</h5>
<p>Это опять 90% от размера в браузере по умолчанию.
<span>
Размер этого шрифта 15 пунктов.
</span>
</p>
</body>
</html>Результат в браузере
Этот размер шрифта составляет 90% от размера в браузере по умолчанию.
Этот размер составляет 90% уже от размера в BODY.
Размер шрифта заголовка составляет 120% от размера в BODY.
Это опять 90% от размера в браузере по умолчанию. Размер этого шрифта 15 пунктов.
Размер шрифта зависит не только от его явного указания, но и от его имени (гарнитуры) — разные шрифты могут иметь совершенно разные высоту и ширину букв, а также межбуквенное расстояние.
Еще немного об атрибуте style
Самое время раскрыть вам еще один секрет этого чудесного атрибута, но опять сначала задам вам вопрос. Как бы вы поступили, если бы вам надо было установить для всего параграфа имя шрифта Arial с размером в 80%? А я вам скажу, вы бы написали что-то подобное:
Так.
<p> <span> Текст параграфа. </span> </p>
Вот так.
<p> <span> <span> Текст параграфа. </span> </span> </p>
Или вообще вот так.
<p> Текст параграфа. </p>
Я прав? Ну что ж, если первые два варианта в принципе верны, то последний вообще с ошибкой, так как, если помните, в одном теге не может быть двух одинаковых атрибутов. А теперь пора вспомнить, что style — не просто атрибут, а атрибут относящийся к CSS. Посмотрите-ка на это:
<p> Текст параграфа. </p>
Гораздо проще, да? Самое главное не забывать ставить между соседними стилями точку с запятой (;) и брать все это «хозяйство» в двойные кавычки (» «), иначе применится только первый стиль, а остальные браузер проигнорирует. Ну мы ведь всегда с вами проставляем двойные кавычки, правда?
Так, этот урок вышел очень насыщенным, поэтому сделайте домашнее задание и немного отдохните.
Домашнее задание.
- Создайте заголовок статьи и двух ее разделов, но заголовки разделов еще и подчеркните.
- Сделайте так, чтобы при наведении курсора мыши на заголовок статьи появлялась соответствующая надпись.
- Напишите один параграф в начале статьи и по два в каждом разделе.
- Установите для всей страницы шрифт Arial с размером 90% от размера в браузере по умолчанию.
- Установите для всех заголовков шрифт Times и пусть заголовок статьи будет с размером шрифта в 150%, а подзаголовки — 120%.
- Выделите в первом параграфе два слова жирным шрифтом и одно курсивом. Во втором — фразу из нескольких слов жирным курсивом. В третьем — подчеркните фразу выделенную курсивом. В четвертом — зачеркните половину фразы выделенной жирным.
- Напишите в последнем параграфе формулу спирта: C2H5OH.
Посмотреть результат → Посмотреть ответ
| Параграфы и заголовки | ← Содержание → | Меняем цвет текста и фона |
Code Card Challenge 38 Как создавать разные шрифты для начинающих в HTML — простые коды для детей
Перейти к содержимому Написано computerteacherhudson в Code Card Challenges Последнее обновление: 9 сентября 2022 г.
Как сделать разные шрифты в HTML и CSS
The Middle, ABC TV. Все права защищены.Шрифты важны
Шрифты, которые выделяются на странице, заставляют вас хотеть читать то, что они говорят. Можете ли вы представить «Звездные войны» без шрифта «Звездных войн», прокручивающегося по экрану этими гигантскими космическими буквами? Можете ли вы представить себе чтение бесконечных букв, которые плавают вместе, ничем не отличаясь друг от друга? Шрифты — прекрасный способ представить ваши слова, вашу работу и ваши идеи. Они разбивают абзацы, выделяют заголовки, вовлекают читателей в ваш мир и заставляют их остаться. На самом деле со шрифтами весело играть, есть люди, которые создают шрифты целыми днями ради карьеры! Давайте поиграем с некоторыми шрифтами, используя HTML и CSS, а затем изучим другие веб-сайты, которые позволяют вам экспериментировать с различными типами шрифтов.
Видеоруководство
Просмотрите это видео, если вам нужен пошаговый урок по изменению шрифта в CSS.
Пропустите вперед, если вы просто хотите поиграть в Codepen и уже знаете, как изменить семейство шрифтов.
Ниже «Король Лев», написанный одним из моих любимых шрифтов.
Давайте поэкспериментируем с семейством шрифтов и несколькими другими стилями, чтобы «Король Лев» действительно рычал.
Середина, ABC TV. Все права защищены.Вот код HTML, который мы используем для этого урока.
< p> Король Лев
Вот CSS, который мы используем для этого урока. Чтобы перейти на другой шрифт, просто введите новый шрифт там, где написано Arial.
p{
семейство шрифтов: Arial, без засечек;
размер шрифта: 50 пикселей;
}
Урок 1: Нажмите «Редактировать в Codepen» и выполните задачи, перечисленные в комментариях.
См. перо Как сделать разные шрифты _Arial Стефани Саттон (@hudsoncomputer) на КодПене.
Урок 2: Вы видите, какой толстый шрифт Arial Black и насколько он выделяет текст? Arial Black также заключен в кавычки, потому что он содержит пробел между двумя словами. Выполняйте задания в комментариях Codepen.
p{
семейство шрифтов: «Arial Black», без засечек;
размер шрифта: 50 пикселей;
}
См. перо Как сделать разные шрифты _Arial Black от Стефани Саттон (@hudsoncomputer) на КодПене.
См.
перо
Как сделать разные шрифты _Arial Black_Challenges Стефани Саттон (@hudsoncomputer)
на КодПене.
Урок 3: Нажмите «Редактировать в Codepen» и измените цвет фона только для абзаца. Как изменить цвет фона для тела? Можете ли вы сделать так, чтобы Король Лев отображался в 7 разных цветах шрифта с 7 разными цветами фона?
p{
семейство шрифтов: «Bahnschrift SemiBold», без засечек;
размер шрифта: 50 пикселей;
}
См. перо Как сделать разные шрифты _Bahnschrift SemiBold Стефани Саттон (@hudsoncomputer) на КодПене.
См.
перо
Как сделать разные шрифты _Bahnschrift SemiBold с фоном разного цвета от Стефани Саттон (@hudsoncomputer)
на КодПене.
Шрифты на вашем компьютере
Знаете ли вы, где найти шрифты, загруженные на ваш компьютер? Перейдите на свой жесткий диск, обычно называемый диском C, и на этом диске вы найдете папку с надписью «Шрифты». В вашей папке «Шрифты» есть примеры множества разных шрифтов. Посмотреть на все это? Они такие классные!
Font Facts
The Middle, ABC TV. Все права защищены.- Со шрифтами очень весело играть, поскольку они стилизуют ваши слова и говорят им, как выглядеть.
- Чтобы изменить шрифт и заставить его выглядеть по-другому в CSS, вы меняете семейство шрифтов.
- Шрифтом по умолчанию или шрифтом, который вы видите, когда не добавляете стиль, обычно является Times New Roman или Calibri.
- Не все шрифты доступны на всех компьютерах.
Как написать семейство шрифтов
В CSS напишите семейство шрифтов следующим образом:
семейство шрифтов: «Bahnschrift SemiBold», без засечек;
Свойство font-family определяет шрифт для элемента.
Свойство font-family может содержать несколько имен шрифтов.
Если один шрифт недоступен на этом устройстве или в этом браузере, стиль семейства шрифтов переходит к следующему шрифту в списке; Это так называемая «откатная» система.
Существует два типа названий семейств шрифтов:
- family-name — название семейства шрифтов, например «times», «courier», «arial» и т. д.
- generic-family — имя родового семейства, например «serif», «sans-serif», «cursive», «fantasy», «monospace».
Начните с нужного шрифта и закончите общим семейством.
Браузер выбирает аналогичный шрифт из общего семейства, если другие шрифты недоступны.
Разделяйте каждое значение запятой.
Если имя шрифта содержит пробелы, оно должно быть заключено в кавычки.
Что означает шрифт без засечек?
Этот тип шрифта менее причудлив и отсутствуют маленькие линии на концах букв. Мой фаворит из этой группы — Ариал.
Я думаю, что это выглядит просто и аккуратно. Я начал со шрифта, который хочу использовать, и на случай, если его там нет, я добавил шрифт без засечек, который является общим семейством шрифтов.
Шрифты для загрузки
1001Шрифты
Есть отличные шрифты, которые можно добавить в список, установленный на вашем компьютере. Некоторые из них бесплатны, а за загрузку некоторых нужно платить. Интересный веб-сайт – 1001Fonts. Вот ссылка https://www.1001fonts.com/. Я набрал «Король Лев» и сразу же получил 50 различных типов шрифтов, которые я мог загрузить, и предварительный просмотр каждого шрифта с «Королем Львом» в качестве образца текста. Вот небольшой снимок:
Как изменить шрифты с помощью бесплатного графического инструмента Canva.
Canva — отличный инструмент для тех, кто хочет поэкспериментировать со шрифтом. Просто зайдите на сайт www.Canva.com и увидите миллионы дизайнов, в которых используются шрифты всех стилей, размеров и все они по-разному сочетаются друг с другом.
Давайте создадим флаер в Canva, используя разные шрифты, чтобы объявить о нашем дневном присмотре за собачками. При выполнении этих шагов подумайте о том, насколько скучным был бы флаер, если бы вы просто использовали один и тот же шрифт без стиля во всем документе. Как вы думаете, ваши потенциальные клиенты будут смотреть дважды?
Попробуйте следующее
Электронная почта
Распечатать
Последние сообщения
О нас
Здравствуйте, я Стефани Саттон. Добро пожаловать на мой сайт! Я учу детей всех возрастов анимации, STEM и программированию. Свяжитесь со мной, чтобы зарезервировать место для вашего ученика в нашем новом репетиторском клубе по адресу [email protected].
Вот письмо, которое мы недавно получили,
«Привет, я заядлый читатель вашего блога, и мне нравится ваш контент и уроки, которыми вы делитесь со своим читателем. Каждый раз, когда я читаю сообщение, я чувствую, что Я могу извлечь из этого один ясный урок, поэтому я думаю, что это так здорово».
С уважением, Нигеш.
Политика конфиденциальности
Все права защищены, Digital Animation for Kids, LLC. 2021. Я гарантирую, что ни один урок не будет беспроигрышным, чтобы научить вас программировать, но Easy Codes должно быть интересным для всех возрастов и навыков в вашем классе, библиотеке или гостиной.
Как изменить шрифт в HTML
html1 год назад
Аднан Шаббир
В более ранних версиях HTML тег font использовался для определения и изменения размера, цвета и стиля шрифта. Однако HTML5 не рекомендует использовать тег шрифта.
HTML5 добавил свойства шрифта в качестве атрибута элемента. Свойства включают стиль шрифта, размер шрифта и цвет. Эти свойства улучшают эстетику шрифта в HTML. Цель этой статьи — предоставить различные способы изменения шрифтов в HTML. Результаты этой статьи:
- Как изменить цвет шрифта в HTML
- Как изменить размер шрифта в HTML
- Как изменить стиль шрифта в HTML
Как изменить шрифт в HTML
В HTML шрифт содержит различные свойства, такие как цвет, стиль и размер .
Эти атрибуты применяются для обеспечения интерактивной видимости шрифтов.
Как изменить цвет шрифта в HTML
Чтобы изменить цвет шрифта в HTML, добавьте атрибут стиля в открывающий тег и используйте свойство цвета, а затем назначьте значение цвета, которое может быть «Hex», «RGB» или «ключевое слово». цвета имени.
В следующем HTML-коде используется цифра 9.0212 «color» атрибут для изменения цвета шрифта:
Code
1 | Мы изменили цвет шрифта со стандартного на красный |
В приведенном выше коде мы использовали атрибут стиля в открывающем теге p, а затем использовали свойство цвета и присвоили значение цвета.
Кодовое изображение
Выход
Цвет шрифта изменился со стандартного на красный, мы использовали атрибут font-color и задали красный цвет.
Как изменить размер шрифта в HTML
Встроенные стили определяют стиль отдельного элемента. Всякий раз, когда мы используем атрибут стиля внутри определенного элемента, он перезаписывает целевое свойство.
Давайте изменим размер шрифта в HTML, используя код, который написан ниже:
Код
1 | Мы изменили размер шрифта на 30 пикселей |
В приведенном выше коде мы установили размер шрифта на 30 пикселей с помощью свойства font-size, мы применили этот код к открывающему тегу тега абзаца, который называется
.
Изображение
Вывод
Размер текста абзаца изменен со значения по умолчанию на 30 пикселей с помощью свойства font-size.
Как изменить стиль шрифта в HTML
Стиль шрифта определяет стиль шрифта в HTML.
Всякий раз, когда мы используем тег стиля в элементе HTML, он перезаписывает все параметры, которые были установлены по умолчанию.
Давайте посмотрим, как мы можем изменить стиль шрифта или семейство шрифтов в HTML, используя следующий пример: 5
Стиль шрифта изменен на Вердана
Здесь мы использовали тег Font-family и присвоили ему свойство Verdana, которое установило стиль шрифта заголовка со значения по умолчанию на verdana.
Изображение
Вывод
Стиль шрифта изменен с по умолчанию на Verdana с помощью свойства font-style.
Вы научились изменять стиль шрифта, размер шрифта и цвет шрифта в HTML.
Заключение:
Шрифт HTML можно изменить с помощью трех различных атрибутов: «цвет», «размер шрифта» и «стиль шрифта». В этой статье представлены различные способы изменения шрифтов в HTML. Свойство «color» изменяет цвет шрифта, «размер шрифта» используется для управления размером шрифта, а «семейство шрифтов» добавляет к шрифтам некоторый стиль.