[MaskedInput] Не использовать кастомный шрифт для символа маски

[zhzz]

Сейчас в инпуте с маской используется отдельный шрифт с одним символом "_".

retail-ui/packages/react-ui/internal/MaskedInput/MaskedInput.styles.ts

Lines 4 to 26 in 94034a3

	import maskCharFontEot from './mask-char-font/font.eot';
	import maskCharFontWoff from './mask-char-font/font.woff';
	import maskCharFontWoff2 from './mask-char-font/font.woff2';
	injectGlobal`
	@font-face {
	font-family: kontur-mask-char;
	src: url('${maskCharFontEot}'); /* For IE11 in IE8 mode. */
	src: url('${maskCharFontEot}?#iefix') format('embedded-opentype'),
	url('${maskCharFontWoff2}') format('woff2'), url('${maskCharFontWoff}') format('woff');
	}
	`;
	const styles = {
	container() {
	return css`
	display: inline-flex;
	position: relative;
	/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
	font-family: kontur-mask-char, Segoe UI, Helevetica Neue; /* IE use Times New Roman as default font */
	font-size: inherit;
	flex: 100% 1 1;
	`;

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

Это работает, но требует настройки дополнительных лоадеров вебпака и заставляет конечных пользователей загружать дополнительную статику. Также мешает использовать серверный рендеринг в Next.js.

Можно попробовать заменить в маске этот символ "_" с кастомным шрифтом на какой-нибудь эквивалентный <span /> с прозрачной цифрой внутри (для ширины) и тенью (или бордером) для эмитации символа подчеркивания.