logo
Helpful resources ▼
  Nuget   Pricing   Buy

CSS шрифти | Aspose.Font для .NET

Мета цієї статті — познайомити вас із шрифтами HTML/CSS та їхніми властивостями, а також на прикладах коду показати, як з ними працювати. Ви навчитеся робити текст жирним або напівжирним, змінювати розмір шрифту або сімейство шрифтів у CSS тощо.

Ви також побачите різницю між властивостями шрифтів CSS та загальною класифікацією властивостей шрифтів. Ці основи описані в статті Що таке шрифт?.

CSS шрифти

Шрифт у CSS — це ресурс, який містить візуальне представлення гліфів. Спрощено кажучи, він містить інформацію, яка співвідносить гліфи з їхніми відповідними кодами.

Ресурси шрифтів можна налаштувати локально на пристрої, на якому працює браузер. Для таких шрифтів описову інформацію можна отримати безпосередньо з ресурсу шрифту (наприклад, з файлу Montserrat.ttf). Для веб-шрифтів така інформація додається за посиланням на ресурс шрифту.

Властивості шрифту CSS

CSS надає кілька властивостей для керування виглядом і поведінкою шрифтів на веб-сторінках. Їх можна використовувати окремо або комбінувати для досягнення бажаних ефектів типографіки. Не всі з них підтримуються всіма браузерами, тому при використанні цих властивостей важливо враховувати сумісність між браузерами.

Давайте розглянемо деякі з найбільш вживаних властивостей:

Сімейство шрифтів CSS (font-family)

Шрифти зі спільним дизайном зазвичай групуються в сімейства шрифтів. Усередині сімейства гліфи можуть відрізнятися за шириною, нахилом або насиченістю.

Властивість CSS font-family використовується для вибору гарнітури. Рекомендується вказати всі варіанти шрифтів одного типу, оскільки важко передбачити, чи доступний конкретний шрифт на комп’ютері користувача. У цьому випадку браузер перевірятиме їх наявність, перебираючи вказані шрифти один за одним, доки не знайде доступний.

Властивість font-family успадковується.

У CSS font-family може мати такі значення:

Приклад використання:

У наведеному прикладі встановлюються такі параметри:

ВластивістьЗначення для тексту 1Значення для тексту 2Значення для тексту 3
font-family:Lobster, Pacifico, cursive;Audiowide, fantasy;Courier, monospace;

Синтаксис:

 1// text 1
 2.text1 {
 3    font-family: Lobster, cursive;
 4}
 5// text 2
 6.text2 {
 7    font-family: Audiowide, fantasy;
 8}
 9// text 3
10.text3 {
11    font-family: Courier, monospace;
12}

Результат застосування буде наступним (зауважте, що розмір і колір шрифту були встановлені однакові для всіх трьох текстів у <body>):

Текст, відтворений різними сімействами шрифтів CSS

Насиченість шрифту CSS (font-weight)

Властивість font-weight відповідає за товщину ліній шрифту.

Властивість font-weight успадковується.

В HTML/CSS font-weight може мати такі значення:

Приклад використання:

Візуалізуємо тексти з наступними параметрами font-weight:

ВластивістьЗначення для тексту 1Значення для тексту 2Значення для тексту 3
font-weight:900;500;200;

Синтаксис:

 1// text 1
 2.text1 {
 3    font-weight: 900;
 4}
 5// text 2
 6.text2 {
 7    font-weight: 500;
 8}
 9// text 3
10.text3 {
11    font-weight: 200;
12}

Результат застосування виглядатиме так (зауважте, що розмір і колір шрифту були однакові для всіх трьох текстів). Крім того, важливо пам’ятати, що використовуваний шрифт повинен мати необхідні варіації насиченості. Більшість шрифтів доступні лише у «звичайному» та «жирному» накресленнях. Шрифт Segoe UI, використаний у прикладі, має достатньо варіацій насиченості, щоб текст відображався в усіх значеннях, установлених у прикладі.

Текст, відображений CSS різної насиченості шрифту

Розтягнення шрифту CSS (font-stretch)

Властивість font-stretch дозволяє вибрати звичайний, стиснений або розширений шрифт із сімейства шрифтів. Ця властивість працює не для кожного шрифту; лише деякі спеціально розроблені шрифти, які мають у своєму сімействі гарнітури з варіантами розтягування, можуть відображати цю властивість.

Властивість font-stretch успадковується.

Значення font-stretch у CSS можуть бути такими:

Приклад використання:

ВластивістьЗначення для тексту 1Значення для тексту 2Значення для тексту 3
font-stretch:condensed;normal;expanded;

Синтаксис:

 1// text 1
 2.text1 {
 3    font-stretch: condensed;
 4}
 5// text 2
 6.text2 {
 7    font-stretch: normal;
 8}
 9// text 3
10.text3 {
11    font-stretch: expanded;
12}

Результат застосування виглядатиме так:

Текст, відображений різними значеннями розтягнення шрифту CSS

Стиль шрифту CSS (font-style)

Ця властивість регулює нахил шрифту.

Властивість font-style успадковується.

Свойство font-style в HTML/CSS може мати такі значення:

Приклад використання:

ВластивістьЗначення для тексту 1Значення для тексту 2Значення для тексту 3
font-style:normal;italic;oblique;

Синтаксис:

 1// text 1
 2.text1 {
 3    font-style: normal;
 4}
 5// text 2
 6.text2 {
 7    font-style: italic;
 8}
 9// text 3
10.text3 {
11    font-style: oblique;
12}

Результат застосування виглядатиме так:

Текст, відтворений різними стилями шрифту CSS

Можливо, ви помітили, що результати для italic та oblique виглядають однаково. Це пов’язано з тим, що значення oblique повноцінно працює лише тоді, коли шрифт має спеціальне похиле накреслення; в іншому випадку браузер може застосувати імітацію нахилу, подібну до курсиву.

Розмір шрифту CSS (font-size)

Властивість встановлює висоту гліфів шрифту.

Властивість font-size успадковується.

CSS font-size має такі значення:

Приклад використання:

ВластивістьЗначення для тексту 1Значення для тексту 2Значення для тексту 3
font-size:7vw;70px;2em;

Синтаксис:

 1// text 1
 2.text1 {
 3    font-size: 7vw;
 4}
 5// text 2
 6.text2 {
 7    font-size: 70px;
 8}
 9// text 3
10.text3 {
11    font-size: 2em;
12}

Результат:

Текст, що відображається різними розмірами шрифту CSS

Коротка форма запису CSS (font)

Властивість CSS font використовується, щоб зробити код коротшим, дозволяючи встановити всі інші властивості шрифту в одній властивості. Можуть бути вказані такі властивості: font-style, font-variant, font-weight, font-stretch, font-size/line-height та font-family. Також можна включити значення властивості font-variant, що підтримується CSS 2.1 — normal або small-caps (малі прописні). Докладнішу інформацію про цю властивість див. у параграфі Варіант шрифту статті Що таке шрифт?.

Приклад використання:

ВластивістьЗначення для тексту 1Значення для тексту 2Значення для тексту 3
font:6vw Arial;60pt Courier, monospace;-

Синтаксис:

 1// text 1
 2.text1 {
 3    font: 6vw Arial;
 4}
 5// text 2
 6.text2 {
 7    font: 60pt Courier, monospace;
 8}
 9// text 3
10.text3 {
11}

Результат застосування цих параметрів показано на малюнку нижче. Оскільки ми не встановлювали жодних значень для третього тексту, він був відтворений у параметрах за замовчуванням.

Текст, що відображається з різними параметрами шрифту CSS

Синтез шрифтів CSS (font-synthesis)

Ця властивість визначає, чи дозволено браузерам синтезувати жирне або похиле накреслення, якщо вони відсутні в сімействі шрифтів. Якщо font-weight або font-style не вказані у файлі шрифту, браузер може їх «зімітувати», якщо це не заборонено цією властивістю.

Властивість font-synthesis успадковується.

Допустимі значення:

Приклад використання:

ВластивістьЗначення для тексту 1Значення для тексту 2Значення для тексту 3
font-synthesis:weight;style;none;
font-weight:900;-900;
font-style:-oblique;oblique;

Синтаксис:

 1// text 1
 2.text1 {
 3    font-synthesis: weight;
 4    font-weight: 900;
 5}
 6// text 2
 7.text2 {
 8    font-synthesis: style;
 9    font-style: oblique;
10}
11// text 3
12.text3 {
13    font-synthesis: none;
14    font-weight: 900;
15    font-style: oblique;
16}

Результат застосування показано на зображенні нижче. Оскільки ми встановили значення none для третього тексту, браузер не став синтезувати запрошені стилі.

Текст, відтворений у різних значеннях синтезу шрифту CSS

Стеки шрифтів (Font Stacks)

Стеки шрифтів (font stacks) стосуються списку шрифтів, визначених у CSS, які використовуються як резервні варіанти (fallback), якщо певний шрифт відсутній на пристрої користувача. Вони гарантують веб-дизайнерам узгодженість типографіки на різних платформах.

Щоб визначити сімейства шрифтів, зазвичай визначають стек, перераховуючи кілька шрифтів у порядку переваги. Якщо перший параметр недоступний, браузер намагається використати наступний, доки не знайде доступний варіант.

Ось приклад: тут бажаним шрифтом є “Helvetica Neue”. Якщо він недоступний, наступним варіантом буде “Arial”. Якщо і “Arial” недоступний, браузер використає загальний шрифт sans-serif.

1    font-family: "Helvetica Neue", Arial, sans-serif;

Вказати загальне сімейство шрифтів (sans-serif, serif або monospace) як останню опцію в стеку вважається правильною практикою, що гарантує наявність відповідної заміни.

Веб-безпечні шрифти (Web-safe fonts)

Безпечні веб-шрифти, також відомі як системні шрифти або шрифти за замовчуванням, — це набір шрифтів, які зазвичай доступні в різних операційних системах і на різних пристроях. Вони вважаються безпечними для використання у веб-дизайні, оскільки широко підтримуються.

На початку веб-розробки вибір був обмежений через різну доступність шрифтів, тому дизайнери покладалися на базовий набір шрифтів, встановлених на більшості комп’ютерів.

Приклади відомих веб-безпечних шрифтів:

Однак із прогресом у технологіях і широким використанням спеціальних шрифтів (Google Fonts та ін.), залежність від веб-безпечних шрифтів зменшилася, що дало дизайнерам більшу візуальну гнучкість.

Як використовувати зовнішні шрифти в CSS?

Щоб використовувати зовнішні шрифти, можна застосувати правило @font-face. Воно дозволяє вказати спеціальний шрифт і зробити його доступним на вашій сторінці. Ось як це зробити:

  1. Отримайте файли шрифтів:

    • Знайдіть файли в потрібних форматах, таких як WOFF, WOFF2, TTF або EOT.
    • Їх можна отримати за допомогою таких сервісів, як Google Fonts, або завантажити з надійних джерел.

  2. Завантажте файли:

    • Завантажте файли на свій веб-сервер або в призначену папку у вашому проекті.

  3. Визначте правило @font-face:

    • У CSS-файлі вкажіть назву сімейства та шлях до файлів, включаючи кілька форматів для підтримки різних браузерів.

Приклад:

1    @font-face {
2        font-family: 'MyCustomFont';
3        src: url('path/to/font.woff2') format('woff2'),
4             url('path/to/font.woff') format('woff');
5        /* Додайте інші формати, якщо вони є */
6    }
  1. Застосуйте шрифт:
    • Після визначення @font-face ви можете використовувати спеціальний шрифт у властивості font-family. Якщо спеціальний шрифт не завантажиться, браузер використає стандартну заміну.
1    body {
2        font-family: 'MyCustomFont', sans-serif;
3    }
  1. Тестуйте та перевіряйте в різних браузерах і на пристроях.

Кілька слів про адаптивну типографіку

Адаптивна (відгукова) типографіка — це практика проектування та впровадження типографіки на сайті так, щоб вона адаптувалася до різних розмірів екрана та пристроїв. Це передбачає налаштування таких факторів, як розмір шрифту, довжина рядка та інтервали.

Ключові аспекти:

Висновок

Стилі шрифтів CSS є ключовими блоками в розробці інтерфейсів. Оскільки більшість вмісту веб-сторінок — це текст, опанування цих властивостей необхідно для забезпечення якісного зовнішнього вигляду, хорошої читабельності та масштабованості.

Деякі властивості легко працюють з будь-яким шрифтом, але для інших потрібні спеціальні шрифти, що підтримують специфічні варіації. Наприклад, шрифт Inconsolata має 8 варіацій насиченості, тоді як багато шрифтів пропонують лише normal та bold.

Якщо ви шукаєте конкретний шрифт, ви можете спробувати знайти та завантажити його через безкоштовні веб-програми Aspose. Крім того, Font viewer надасть усі необхідні технічні деталі, які можуть знадобитися під час розробки.

Що таке гліф Формати шрифтів

Have any questions about Aspose.Font?



Subscribe to Aspose Product Updates

Get monthly newsletters & offers directly delivered to your mailbox.

© Aspose Pty Ltd 2001-2026. All Rights Reserved.