CSS Стиль шрифта
Свойство font-style задаёт стиль текста. Оно может принимать одно из следующих значений:
normal— текст отображается обычным.italic— текст отображается курсивом.oblique— текст наклонён (очень похоже на italic).
Пример
Три абзаца показывают обычный, курсивный и наклонный текст.
Prompt
HTML-страница, показывающая свойство font-style.
Во внутреннем блоке
<style> создайте три класса абзацев: normal, italic и oblique. Добавьте абзац для каждого класса.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<p class="normal">This text is shown normally.</p>
<p class="italic">This text is shown in italics.</p>
<p class="oblique">This text is leaning (oblique).</p>
</body>
</html>
CSS Насыщенность шрифта
Свойство font-weight задаёт, насколько толстыми или тонкими являются символы. Оно может принимать одно из следующих значений:
normal— значение по умолчанию.bold— толстые символы.bolder— более толстые символы.lighter— более тонкие символы.100–900— от тонкого до толстого. 400 эквивалентно normal, а 700 эквивалентно bold.
Пример
Четыре абзаца показывают обычный, более тонкий, жирный текст и текст с насыщенностью 900.
Prompt
HTML-страница, показывающая свойство font-weight.
Во внутреннем блоке
<style> создайте четыре класса абзацев: normal, lighter, bold и 900. Добавьте абзац для каждого класса.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.normal {
font-weight: normal;
}
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
</style>
</head>
<body>
<p class="normal">Normal weight text.</p>
<p class="light">Lighter weight text.</p>
<p class="thick">Bold text.</p>
<p class="thicker">Weight 900 text.</p>
</body>
</html>
CSS Вариант шрифта
Свойство font-variant задаёт, отображается ли текст шрифтом small-caps.
В шрифте small-caps все строчные буквы становятся заглавными, но преобразованные буквы меньше исходных заглавных букв.
Пример
Один абзац обычный, а другой использует small-caps.
Prompt
HTML-страница, показывающая свойство font-variant.
Во внутреннем блоке
<style> создайте два класса абзацев: normal и small-caps. Добавьте абзац для каждого класса с текстом, где есть заглавные и строчные буквы, чтобы эффект small-caps был виден.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
</style>
</head>
<body>
<p class="normal">My name is Hege Refsnes.</p>
<p class="small">My name is Hege Refsnes.</p>
</body>
</html>