Управление весом шрифта

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

Классы типографики для шрифтов

Vuetify использует систему типографических классов, основанную на Material Design Typography. Основные классы, влияющие на font-weight, включают:

  • font-weight-light — легкий вес шрифта (обычно 300)
  • font-weight-regular — стандартный вес шрифта (обычно 400)
  • font-weight-medium — средний вес (обычно 500)
  • font-weight-semibold — полужирный вес (обычно 600)
  • font-weight-bold — жирный шрифт (обычно 700)

Эти классы можно применять как к контейнерам, так и к отдельным компонентам:

<v-btn class="font-weight-bold">Жирная кнопка</v-btn>
<v-card-title class="font-weight-light">Легкий заголовок</v-card-title>

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

Изменение веса через style и v-bind:style

Иногда требуется динамическое управление весом шрифта. Vuetify поддерживает инлайн-стили и привязку к объектам стиля через v-bind:style:

<v-text-field
  label="Введите текст"
  :style="{ fontWeight: isImportant ? '700' : '400' }"
/>

Здесь значение fontWeight может быть числом (100, 200, …, 900) или строкой ('bold', 'normal'). Такой подход позволяет менять вес шрифта в зависимости от состояния компонента или логики приложения.

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

Для создания единого стиля текста во всем проекте можно изменить глобальные настройки Vuetify через theme или SCSS-переменные:

$body-font-weight: 400;
$heading-font-weight: 600;

В main.js можно дополнительно настроить глобальные стили компонентов:

import { createVuetify } from 'vuetify'

const vuetify = createVuetify({
  defaults: {
    global: {
      style: {
        fontWeight: '400'
      }
    }
  }
})

Такое решение упрощает поддержание консистентного визуального языка и минимизирует дублирование классов по всему приложению.

Применение весов в компонентах текста

В Vuetify большинство текстовых компонентов поддерживают комбинацию классов и стилей:

  • v-btn — кнопки
  • v-card-title, v-card-subtitle — заголовки карточек
  • v-list-item-title, v-list-item-subtitle — элементы списков
  • v-toolbar-title — заголовки тулбаров
  • v-text-field, v-textarea — поля ввода

Примеры:

<v-toolbar color="primary" dark>
  <v-toolbar-title class="font-weight-medium">Средний вес заголовка</v-toolbar-title>
</v-toolbar>

<v-list>
  <v-list-item>
    <v-list-item-content>
      <v-list-item-title class="font-weight-bold">Жирный элемент списка</v-list-item-title>
      <v-list-item-subtitle class="font-weight-light">Легкий подзаголовок</v-list-item-subtitle>
    </v-list-item-content>
  </v-list-item>
</v-list>

Использование переменных и тем для динамического управления

Vuetify позволяет использовать CSS-переменные и темы для изменения веса шрифта на лету, что удобно для реализации тёмного/светлого режимов и адаптивного дизайна:

:root {
  --font-weight-heading: 600;
  --font-weight-body: 400;
}

h1 {
  font-weight: var(--font-weight-heading);
}

p {
  font-weight: var(--font-weight-body);
}

Динамическая подмена переменных может выполняться через JS:

document.documentElement.style.setProperty('--font-weight-heading', '700')

Это позволяет централизованно управлять визуальной иерархией текста.

Практические рекомендации

  • Для заголовков использовать medium или bold, чтобы подчеркнуть визуальную иерархию.
  • Для основного текста — regular или light, чтобы не перегружать интерфейс.
  • Динамическое изменение веса через v-bind:style удобно при визуальной индикации состояния (например, выделение активного пункта меню).
  • При использовании глобальных настроек или переменных SCSS следует поддерживать единый набор весов, чтобы сохранить консистентность дизайна.

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

Оглавление