Работа с шрифтами

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

В редких случаях могут понадобиться локальные шрифты.

Системные шрифты

Класс	Свойства
font-b24-system	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-b24-primary	синоним `b24-system`
font-b24-secondary	синоним `b24-system`
font-b24-system-mono	font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
font-b24-helvetica	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

<p class="font-b24-system ...">...</p>
<p class="font-b24-primary ...">...</p>
<p class="font-b24-secondary ...">...</p>
<p class="font-b24-system-mono ...">...</p>
<p class="font-b24-helvetica ...">...</p>

Локальные шрифты

Класс	Свойства
font-b24-opensans	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-b24-roboto	font-family: Roboto, "Helvetica Neue", Helvetica, Arial, monospace;
font-b24-roboto-mono	font-family: "Roboto Mono", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-b24-montserrat	font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-b24-comforter-brush	font-family: "Comforter Brush";

Добавление локальных шрифтов

Чтобы добавить локальные шрифты:

1. Скопируйте шрифты в публичную папку проекта, например, public/fonts:

npm

$ npm @bitrix24/ui copy-fonts --dest=public/fonts

2. Установите параметр useLocalFonts в настройках плагина:

tailwind.config.js

module.exports = {
	content: [
		'...'
	],
	theme: {},
	plugins: [
		'...',
		require('@bitrix24/b24style')({
			useLocalFonts: true
		})
	]
};

3. Примените шрифт в вашем приложении.

Вы можете управлять шрифтом текста, используя утилиты семейства шрифтов.

<p class="font-b24-opensans ...">...</p>
<p class="font-b24-roboto ...">...</p>
<p class="font-b24-roboto-mono ...">...</p>
<p class="font-b24-montserrat ...">...</p>
<p class="font-b24-comforter-brush ...">...</p>

Просмотрите справочную информацию о семействе шрифтов