Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях
Рубрика:Основы HTML

Как в html задать шрифт: множество фишек и примеров, чтобы сделать ваш сайт удобочитаемым

Приветствую всех читателей данной статьи и подписчиков моего блога! Сегодняшнюю публикацию я хочу посвятить теме, без знаний которой ваши интернет-ресурсы не будут читабельными и привлекательными: «Как в 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 для задания прозрачности подзаголовку.

Пример html шрифта

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>

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

С уважением, Роман Чуешов


Прочитано: 70 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: