Шрифты/иконки/изображения

Модуль идентификации поддерживает загрузку собственных шрифтов, иконок и изображений.

Шрифты

Настройка через fontsPath

Для настройки шрифтов необходимо предоставить ссылку на CSS файл с настроенными шрифтами.

Параметр: fontsPath

Пример: https://example.com/fonts.css

Формат CSS файла

@font-face {
  font-family: 'MTS Compact';
  src: url("./fonts/MTSCompact-Regular.woff2") format("woff2"),
       url("./fonts/MTSCompact-Regular.woff") format("woff"),
       url("./fonts/MTSCompact-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MTS Compact';
  src: url("./fonts/MTSCompact-Medium.woff2") format("woff2"),
       url("./fonts/MTSCompact-Medium.woff") format("woff"),
       url("./fonts/MTSCompact-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MTS Compact';
  src: url("./fonts/MTSCompact-Bold.woff2") format("woff2"),
       url("./fonts/MTSCompact-Bold.woff") format("woff"),
       url("./fonts/MTSCompact-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

Параметры шрифтов

После загрузки шрифтов можно настроить их использование через параметр fonts:

{
  "fonts": {
    "header-font-family": "MTS Wide",
    "header-font-weight": "500",
    "header-font-size": "24px",
    "regular-font-family": "MTS Compact",
    "regular-font-weight": "normal",
    "regular-font-size": "17px",
    "button-font-family": "MTS Wide",
    "button-font-weight": "bold",
    "button-font-size": "12px",
    "caption-font-family": "MTS Compact",
    "caption-font-weight": "normal",
    "caption-font-size": "14px",
    "bold-font-family": "MTS Compact",
    "bold-font-weight": "500",
    "bold-font-size": "17px"
  }
}

Изображения

Иллюстрации

Изображения настраиваются через параметр illustrations:

{
  "illustrations": {
    "PassportOnboarding": {
      "light": {
        "url": "https://example.com/passport.png",
        "width": 153,
        "height": 180
      },
      "dark": {
        "url": "https://example.com/passport-dark.png",
        "width": 153,
        "height": 180
      }
    },
    "SelfieOnboarding": {
      "light": {
        "url": "https://example.com/selfie.png",
        "width": 133,
        "height": 180
      }
    },
    "WrongIcon": {
      "light": {
        "url": "https://example.com/warning.png",
        "width": 120,
        "height": 120
      }
    },
    "AnotherTabIcon": {
      "light": {
        "url": "https://example.com/loading.png",
        "width": 120,
        "height": 120
      }
    },
    "QrPanelTipIcon": {
      "light": {
        "url": "https://example.com/qr-tip.png",
        "width": 100,
        "height": 100
      }
    }
  }
}

Доступные ключи изображений

• PassportOnboarding — иллюстрация для шага паспорта
• SelfieOnboarding — иллюстрация для шага селфи
• WrongIcon — иконка ошибки
• AnotherTabIcon — иконка для уведомления о другой вкладке
• QrPanelTipIcon — иконка подсказки для QR-панели

Поддержка тем

Каждое изображение может иметь версии для светлой и тёмной темы:

• light — версия для светлой темы
• dark — версия для тёмной темы

Если указана только light, она будет использоваться для обеих тем.

Логотип

Логотип настраивается через параметр mainLogo:

{
  "mainLogo": {
    "light": "https://example.com/logo-light.svg",
    "dark": "https://example.com/logo-dark.svg"
  }
}

Или через параметр логики:

{
  "mainLogo.light": "https://example.com/logo-light.svg",
  "mainLogo.dark": "https://example.com/logo-dark.svg"
}

Требования к файлам

Шрифты

• Форматы: WOFF2, WOFF, TTF
• Рекомендуется: WOFF2 для лучшей производительности
• Размер: оптимизируйте файлы для веб-использования

Изображения

• Форматы: PNG, SVG, JPEG
• Рекомендуется: SVG для иконок, PNG для иллюстраций
• Размер: указывайте реальные размеры в параметрах width и height
• Оптимизация: используйте сжатые изображения для быстрой загрузки

Размещение файлов

Файлы должны быть доступны по HTTPS и иметь правильные CORS заголовки для загрузки с других доменов.

Рекомендуется размещать файлы на: – CDN для быстрой загрузки – Собственном сервере с правильной настройкой CORS – Облачном хранилище (S3, Cloud Storage и т.д.)

Пример полной конфигурации

{
  "fontsPath": "https://example.com/fonts.css",
  "fonts": {
    "header-font-family": "Custom Font",
    "regular-font-family": "Custom Font",
    "button-font-family": "Custom Font"
  },
  "illustrations": {
    "PassportOnboarding": {
      "light": {
        "url": "https://example.com/passport.png",
        "width": 153,
        "height": 180
      }
    },
    "SelfieOnboarding": {
      "light": {
        "url": "https://example.com/selfie.png",
        "width": 133,
        "height": 180
      }
    }
  },
  "mainLogo": {
    "light": "https://example.com/logo.svg",
    "dark": "https://example.com/logo-dark.svg"
  }
}