Размер текста (шрифта)

В предыдущем уроке мы научились выравнивать текст. В этом уроке мы научимся устанавливать тексту нужный размер.

Для этого можно использовать, например, заголовки <hi></hi>:

<h1> текст </h1>
<h2> текст </h2>
<h3> текст </h3>
<h4> текст </h4>
<h5> текст </h5>
<h6> текст </h6>


У нас должно получиться следующее:

текст

 

текст

 

текст

 

текст

 

текст

 

текст

 
Для заголовков, как и для абзацев, можно использовать атрибут <align> из предыдущего урока.

Для изменения размера шрифта также можно использовать тег <p> с атрибутом<style>:

<p style="font-size:20px">

Где 20px – это высота шрифта в пикселях. Вместо числового обозначения 20px можно использовать названия размеров: xx-small, x-small, small, medium, large, x-large, xx-large. Все это способы установления абсолютного размера шрифта. Абсолютными на 100% они конечно тоже не являются, т.к. зависят от настроек браузера пользователя и операционной системы этого пользователя. Но в любом случае предпочтительнее использовать именно  такой способ задания размера, т.к. в этом случае больше шансов на то, что Ваша страничка будет отображаться так, как Вам бы этого хотелось. Также есть относительные размеры шрифтов, они задаются при помощи em (высота шрифта), pt (пункты), % (проценты).

Есть очень полезная табличка соответствия размеров шрифтов:

Pt

Px

Em

%

6

8

0.5

50

7

9

0.55

55

7.5

10

0.625

62.5

8

11

0.7

70

9

12

0.75

75

10

13

0.8

80

10.5

14

0.875

87.5

11

15

0.95

95

12

16

1

100

13

17

1.05

105

13.5

18

1.125

112.5

14

19

1.2

120

14.5

20

1.25

125

15

21

1.3

130

16

22

1.4

140

17

23

1.45

145

18

24

1.5

150

20

26

1.6

160

22

29

1.8

180

24

32

2

200

26

35

2.2

220

27

36

2.25

225

28

37

2.3

230

29

38

2.35

235

30

40

2.45

245

32

42

2.55

255

34

45

2.75

275

36

48

3

300

Верхний и нижний индексы.

Для установления верхнего и нижнего регистра в HTML есть теги <sub> и <sup>.


<p>основной текст <sub style="color:red">текст нижнего регистра</sub> продолжение основного текста</p>
<p>основной текст <sup style="color:green">текст верхнего регистра</sup> продолжение основного текста</p>

У нас получилось следующее:

основной текст текст нижнего регистра продолжение основного текста
основной текст текст верхнего регистра продолжение основного текста

Готовые шаблоны

Понравилась статья?

Поделитесь ей с друзьями:

Есть вопросы? Задайте их через форму комментариев.
 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *