Приветствую всех читателей данной статьи и подписчиков моего блога! Сегодняшнюю публикацию я хочу посвятить теме, без знаний которой ваши интернет-ресурсы не будут читабельными и привлекательными: «Как в html задать шрифт». Сама по себе тема является легкой, и я уверен, что вы быстро ее освоите.
Однако не следует забывать, что веб-языки богаты на всевозможные инструменты оформления шрифтов, которые в идеале необходимо знать. После прочтения статьи вы уверенно овладеете форматированием текста, научитесь задавать различные стили, виды начертаний и украшений шрифтов, а также изменять размер и цвет как предложений, так и отдельных букв. Приступим же!
Шрифты бывают разные
Основная масса вывесок, прессы и литературы, сайтов и других сервисов используют стандартные шрифты. Хоть они и удобные, однако уже давно наскучили и не цепляют глаз. Именно поэтому многие дизайнеры несколько изменяют вид оформления или вовсе создают новые стили. Наиболее известными и влиятельными шрифтами считаются:
- Helvetica;
- Futura;
- Garamond;
- Bodoni;
- Bembo;
- Rockwell;
- Times New Roman.
Их главные отличия состоят в отношении к определенным семействам. Существуют антиквенные (с засечками), рубленные, декоративные, курсивные и моноширинные семейства.
Также хочу подчеркнуть, что существует 5 единиц размерностей шрифтов.
| Измерение | Обозначение |
| px | В пикселах |
| pt | В пунктах |
| % | В процентах |
| ex | Высота конкретного символа |
| em | Высота текущего символа |
Начнем с языка html и его «творческих способностей»
Язык разметки играет важную роль в оформлении текстового контента сайтов. В первую очередь это связанно с тегами, отвечающими за преобразование текста, а также выделение важных моментов. Для удобства основные элементы я внес в таблицу, представленную ниже:
| Тег | Предназначение |
| <b> | Задает жирное начертание буквам. |
| <strong> | Акцентирует внимание на какой-то важной текстовой информации, выделяя текст жирным начертанием. |
| <i> | Задает курсивное начертание контента. |
| <em> | Делает акцент на какой-то важной текстовой информации, выделяя текст курсивом. |
| <big> | Размер выделенного фрагмента становится больше на 1 единицу. |
| <small> | Размер выделенного фрагмента становится меньше на 1 единицу. |
| <sub> | Задает нижний индекс. |
| <sup> | Задает верхний индекс. |
| <font> | Изменяет параметры цвета, шрифта и размера текста. |
Хочу обратить ваше внимание на первые 4 единицы языка. В браузере пары <b> и <strong> также как <i> и <em> отображаются одинаково физически, но логически они не эквивалентны. Так, первые элементы пар, т.е. <b> и <i>, просто видоизменяют начертание шрифта. В это же время <strong> и <em> делают акценты на ключевых моментах текстового наполнения.
Чтобы закрепить полученные знания, я приведу пример кода, в котором использую перечисленные элементы html.
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE HTML> <html> <head> <meta content="text/html; charset=utf-8"> <title>Форматирование текста при помощи тегов html</title> </head> <body align = "center"> <h1><font color="gold" face="fantasy">Название <big>первого</big> заголовка</font></h1> <h3><font size="7" color="red" face="Arial">П</font>одзаголовок с красной буквы!</font></h3> <p>Здесь расположен <em>первый</em> абзац <strong>текущего</strong> примера. Для наглядности <i>эти слова</i> будут написаны курсивом.</p> </body> </html> |
Напомню, что атрибут align = «center» задает отображение текста по центру.
А теперь пришел час css хвастаться своими умениями
Несмотря на целый набор разнообразных тегов, предусмотренных html, css является более удобным и гибким инструментом для оформления внешнего вида шрифтов.
Основные свойства, применяемые для форматирования контента, это font и его составляющие: text-decoration.
Сначала разберем font. Это универсальный параметр, благодаря которому одновременно можно задать несколько значений. К тому же каждый параметр оперирует своими ключевыми словами.
| Название свойства | Ключевые слова |
| font-family | Можно устанавливать как стандартные семейства шрифтов:
· без засечек (sans-serif); · антиквенные (serif); · декоративные (fantasy); · курсивные (cursive); · моноширинные (monospace), так и стандартные существующие стили (Arial, Calibri и т.д.). |
| font-size | Для установки абсолютной размерности символов используются обозначения: xx-small, x-small, small, medium, large, x-large, xx-large. Также можно задать уникальное значение. |
| font-weight | Отвечает за насыщенность текстового начертания. Изменяется в диапазоне [100;900] или задается при помощи слов normal, bold, lighter или bolder. |
| font-variant | Задает представление буквам, используя ключевые слова: small-caps, normal или inherit. |
| font-style | Устанавливает обычное (normal), наклоненное (oblique), курсивное (italic) начертание или наследует родителя (inherit). |
| font-stretch | Указывает плотность расположения букв. Можно указать такие значения: ultra-condensed, ultra-expanded, extra-condensed, extra-expanded, semi-condensed, semi-expanded, normal, expanded, condensed и inherit. |
Свойство text-decoration помогает украсить текст дополнительными элементами, такими как подчеркивание (underline), зачеркивание (line-through), надчеркивание (overline), а также наследовать параметры родителя (inherit) или отменить все оформление (none).
А теперь настало время для второго примера. Я взял предыдущий код и оформил его при помощи средств css. Так, заголовок был оформлен с тенью (при помощи свойства text- shadow) и с контуром вокруг (border- color). При этом одно слово я сделал крупнее. Также мне захотелось использовать параметр opacity для задания прозрачности подзаголовку.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=utf-8">
<title>Форматирование текста при помощи свойств css</title>
<style>
h1 {
border-color: blue white;
border-style: solid;
font-family: Calibri, fantasy;
color: gold;
text-shadow: black 3px 0 9px;
}
h3 {
font-size: x-large;
opacity: 0.6;
color: blue;
text-decoration: underline;
}
em, strong {
color: red;
text-decoration: overline;
}
</style>
</head>
<body align = "center">
<h1>Название <big>первого</big> заголовка</h1>
<h3>Полупрозрачный подзаголовок!</h3>
<p>Здесь расположен <em>первый</em> абзац <strong>текущего</strong> примера. Для наглядности <i>эти слова</i> будут написаны курсивом.</p>
</body>
</html> |
На этом статья окончена. Надеюсь, вам было интересно и познавательно. В случае положительного ответа подписывайтесь на обновления и рассказывайте о блоге друзьям. Пока-пока!
С уважением, Роман Чуешов
