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// текст 1
 2.text1 {
 3    font-family: Lobster, cursive;
 4}
 5// текст 2
 6.text2 {
 7    font-family: Audiowide, fantasy;
 8}
 9// текст 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// текст 1
 2.text1 {
 3    font-weight: 900;
 4}
 5// текст 2
 6.text2 {
 7    font-weight: 500;
 8}
 9// текст 3
10.text3 {
11    font-weight: 200;
12}

Результат применения будет выглядеть следующим образом (обратите внимание, что размер и цвет шрифта установлены одинаковыми для всех трех текстов). Кроме того, важно помнить, что используемый шрифт должен иметь необходимые варианты начертаний. Большинство шрифтов доступны только в обычном (normal) и жирном (bold) начертаниях. Шрифт Segoe UI, используемый в примере, имеет достаточно вариантов насыщенности, поэтому текст будет корректно отображаться со всеми заданными значениями.

Текст, отображаемый CSS-шрифтом разной толщины

Растяжение шрифта CSS (font-stretch)

Свойство font-stretch позволяет выбрать обычное, сжатое или расширенное начертание из семейства шрифтов. Это свойство работает не для каждого шрифта; только специально разработанные шрифты, имеющие в своем семействе варианты с разной шириной, могут отображать это свойство.

Свойство font-stretch наследуется.

Значения font-stretch в CSS могут быть следующими:

Пример использования:

СвойствоЗначение для текста 1Значение для текста 2Значение для текста 3
font-stretch:condensed;normal;expanded;

Синтаксис:

 1// текст 1
 2.text1 {
 3    font-stretch: condensed;
 4}
 5// текст 2
 6.text2 {
 7    font-stretch: normal;
 8}
 9// текст 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// текст 1
 2.text1 {
 3    font-style: normal;
 4}
 5// текст 2
 6.text2 {
 7    font-style: italic;
 8}
 9// текст 3
10.text3 {
11    font-style: oblique;
12}

Результат применения будет выглядеть следующим образом:

Текст, отображаемый с использованием разных стилей шрифта CSS

Возможно, вы заметили, что результаты для italic и oblique выглядят одинаково. Это связано с тем, что значение oblique полноценно работает только тогда, когда шрифт сам имеет специальное наклонное начертание; в противном случае браузер может применить имитацию наклона, аналогичную курсиву.

Размер шрифта CSS (font-size)

Это свойство задает высоту глифов шрифта.

Свойство font-size наследуется.

Свойство font-size в CSS принимает следующие значения:

Пример использования:

СвойствоЗначение для текста 1Значение для текста 2Значение для текста 3
font-size:7vw;70px;2em;

Синтаксис:

 1// текст 1
 2.text1 {
 3    font-size: 7vw;
 4}
 5// текст 2
 6.text2 {
 7    font-size: 70px;
 8}
 9// текст 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, такие как normal или small-caps (малые прописные). Дополнительную информацию об этом свойстве см. в пункте Вариант шрифта статьи Что такое шрифт?.

Пример использования:

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

Синтаксис:

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

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

Текст, отображаемый с использованием краткой формы записи font

Синтез шрифтов 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// текст 1
 2.text1 {
 3    font-synthesis: weight;
 4    font-weight: 900;
 5}
 6// текст 2
 7.text2 {
 8    font-synthesis: style;
 9    font-style: oblique;
10}
11// текст 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, Adobe Fonts и др.) зависимость от веб-безопасных шрифтов снизилась, что дало дизайнерам большую визуальную гибкость.

Как использовать внешние шрифты в CSS?

Для использования внешних шрифтов применяется правило @font-face. Оно позволяет указать пользовательский шрифт и сделать его доступным на вашей странице. Вот как это сделать:

  1. Получите файлы шрифтов:

    • Найдите файлы в нужных форматах, таких как WOFF, WOFF2, TTF или EOT.
    • Их можно получить с помощью таких сервисов, как Google Fonts, или скачать из надежных источников.

  2. Загрузите файлы:

    • Загрузите их на свой веб-сервер или в папку вашего проекта.

  3. Определите правило @font-face:

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

Пример:

1    @font-face {
2        font-family: 'МойПользовательскийШрифт';
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: 'МойПользовательскийШрифт', sans-serif;
3    }
  1. Протестируйте и проверьте в разных браузерах и на разных устройствах.

Несколько слов об адаптивной типографике

Адаптивная (отзывчивая) типографика — это практика проектирования и реализации типографики сайта таким образом, чтобы она подстраивалась под различные размеры экранов и устройств. Она включает в себя настройку таких факторов, как размер шрифта, длина строки и интервалы.

Ключевые аспекты:

Заключение

Свойства шрифтов CSS являются фундаментальными блоками при разработке интерфейсов. Поскольку большая часть веб-контента является текстовой, освоение этих свойств необходимо для обеспечения качественного внешнего вида, хорошей читаемости и масштабируемости.

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

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

Что такое глифы Форматы шрифтов

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.