CSS font-style — курсив і нахилений текст
CSS властивість font-style визначає стиль шрифту: курсив або похилий.
Коли для тексту встановлено курсивне або похиле накреслення, браузер звертається до системи для пошуку відповідного шрифту. Якщо заданий шрифт не знайдений, браузер використовує спеціальний алгоритм для імітації потрібного виду тексту.
автор: Svitlana
Загальний опис
автор: NagarD
- Нотатка
-
Використовуйте універсальну властивість
автор: Svitlanafont, щоб встановити більшість властивостей шрифтів за один раз.
Синтаксис
font-style: normal|italic|oblique|initial|inherit;Властивість font-style може отримувати 5 значень:
-
normal -
Звичайний стиль шрифту. Без задання.
автор: Svitlana -
italic -
Курсивний шрифт. Імітує рукописний текст.
автор: Svitlana -
oblique -
Похилий шрифт. Літери нахиляються вправо.
автор: Svitlana -
initial -
Встановлює цю властивість в значення без задання
автор: Svitlana -
inherit -
Успадкує значення властивості від свого батьківського елемента
автор: Svitlana
| Значення без задання: | normal |
|---|---|
| Наслідує: | Так |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.fontStyle="italic" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 7 | 12 | 4 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
italic — окреме курсивне накреслення шрифту, oblique — механічно нахилене звичайне. У шрифтах без справжнього курсиву обидва виглядають однаково.
HTML
<p class="normal">normal — звичайне накреслення</p>
<p class="italic">italic — справжній курсив</p>
<p class="oblique">oblique — нахилене звичайне</p>CSS
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}Один шрифт, три значення. У справжньому курсиві літери намальовані інакше — придивіться до а, г і и; oblique 14deg тих самих літер не міняє, а лише нахиляє їх.
HTML
<p class="normal">Гарячі гривні: агенція, три, або</p>
<p class="italic">Гарячі гривні: агенція, три, або</p>
<p class="oblique">Гарячі гривні: агенція, три, або</p>CSS
p {
margin: 0 0 10px;
padding: 6px 10px;
border-left: 4px solid #0172ad;
font: 22px Georgia, "Times New Roman", serif;
}
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique 14deg;
}Значення у дії
HTML
<div class="field-items">
<div class="field-item even">
<div id="playground-result" style="font-style: oblique;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat iusto ducimus aliquid, soluta quod nihil dicta libero inventore fuga dignissimos, placeat commodi repudiandae animi maxime quaerat amet est perferendis? Corrupti.</div>
<div class="grid-x grid-margin-x">
<div id="playground-value" class="cell medium-12 large-6">
<span>Вибери потрібне значення:</span>
<label><input type="radio" name="value" value="normal" checked="">normal</label>
<label><input type="radio" name="value" value="italic">italic</label>
<label><input type="radio" name="value" value="oblique">oblique</label>
</div>
<div id="playground-code" class="cell medium-12 large-6">
<span>Результат:</span>
<pre>div {
font-style: <span id="playground-code-value">oblique</span>;
}</pre>
</div>
</div>
</div>
</div>CSS
#playground-result{
padding: 10px;
font-size: 18px;
background-color: lightgrey;
margin-bottom: 10px;
}
#playground-value{
font-size: 20px;
border: 2px dashed red;
width: auto;
text-align: center;
padding: 5px;
margin-bottom: 10px;
}
#playground-code{
font-size: 18px;
}JS
var radios = document.querySelectorAll('#playground-value input[type="radio"]');
function changeHandler(event) {
document.getElementById('playground-result').style.fontStyle = this.value;
document.getElementById('playground-code-value').innerText = this.value;
}
Array.prototype.forEach.call(radios, function (radio) {
radio.addEventListener('change', changeHandler);
});
//# sourceURL=pen.jsПриклад використання
HTML
<p class="about">За допомогою властивості <strong>font-style</strong> ми можемо змінити стиль тексту. Зробити його, наприклад корсивом. Як тут:</p>
<p>Цей абзац використовує значення властивості <strong>font-style</strong> <p class="about">За допомогою властивості <strong>font-style</strong> ми можемо змінити стиль тексту. Зробити його, наприклад корсивом. Як тут:</p>
<p>Цей абзац використовує значення властивості <strong>font-style</strong> за замовчуванням (<em>normal</em>).</p>
<p class="it">А тут ми встановили значення <em>italic</em>, що виводить текст курсивом.</p>
<p class="ob">А тут ми встановили значення <em>oblique</em>, що виводить текст похилим.</p>
<p class="notice">Якщо значення <em>oblique</em> не доступне для якогось шрифта, замість нього автоматично застосовується значення <em>italic</em>!</p> (<em>normal</em>).</p>
<p class="it">А тут ми встановили значення <em>italic</em>, що виводить текст курсивом.</p>
<p class="ob">А тут ми встановили значення <em>oblique</em>, що виводить текст похилим.</p>
<p class="notice">Якщо значення <em>oblique</em> не доступне для якогось шрифта, замість нього автоматично застосовується значення <em>italic</em>!</p>CSS
body {
line-height: 1.45;
font-size: 17px;
font-family: sans-serif;
}
.about {
background-color: gold;
padding: 12px;
}
.notice {
color: #666;
border-left: 2px solid #808080;
padding-left: 8px;
margin: 20px 0 36px 0;
}
.it {
font-style: italic;
}
.ob {
font-style: oblique;
}Коментарі
Коментарів ще немає — будьте першим!