MUI предоставляет надежное решение для тем, которое позволяет вам настраивать все аспекты системы дизайна вашего приложения, включая типографику. Типографика помогает установить иерархию, согласуется с фирменным стилем и улучшает читаемость. MUI упрощает реализацию индивидуального типографического дизайна, который работает во всем вашем приложении.
В этом руководстве мы рассмотрим ключевые концепции и API, необходимые для настройки типографики в MUI:
Выполните эти шаги, и вы сможете создавать структурированные, соответствующие бренду типографические стили для своего проекта MUI.
MUI поставляется с системой типографического дизайна по умолчанию под названием Roboto. Это семейство шрифтов обеспечивает чистый, современный стиль с отличной читаемостью.
Чтобы начать использовать типографику по умолчанию, просто установите и импортируйте MUI в свой проект:
“`
npm install @mui/material @emotion/react @emotion/styled
“`
Затем в своем компоненте:
“`
import { Typography } from '@mui/material';
function MyComponent() {
return (
Hello World
);
}
“`
Это отобразит «Hello World» с использованием шрифта Roboto с размером и начертанием шрифта, соответствующими варианту h1.
MUI включает варианты для всех стандартных заголовков HTML, а также основного текста:
“`
“`
Каждый вариант автоматически устанавливает такие свойства CSS, как размер шрифта, вес шрифта, высота строки. Это позволяет вам установить согласованную визуальную иерархию во всем вашем приложении.
Стили типографики MUI по умолчанию будут работать во многих случаях использования. Однако вам может потребоваться изменить некоторые параметры, такие как размер или начертание шрифта.
Чтобы переопределить настройку по умолчанию, укажите стиль, который вы хотите изменить, в качестве реквизита для компонента «Типография»:
“`
Пользовательский h1
Жирный основной текст
“`
Таким образом можно настроить все стандартные свойства шрифта CSS, включая:
– fontFamily
– fontSize
– fontWeight
– lineHeight
– letterSpacing
– textTransform
Переопределение стилей, подобных этому, позволяет вам выводить новые варианты на основе существующих. Например, вы можете создать стиль «body1bold»:
“`
Жирный основной текст
“`
Чтобы использовать шрифт, отличный от Roboto, вам нужно добавить файлы шрифтов в свой проект и настроить MUI для их использования.
Сначала установите пакеты шрифтов:
“`
npm install typeface-raleway
“`
Затем обновите свою тему, указав этот шрифт в качестве основного:
“`
import Raleway from 'typeface-raleway';
const theme = createTheme({
typography: {
fontFamily: 'Raleway, Arial',
}
});
“`
Теперь все компоненты типографики будут использовать Raleway вместо Roboto.
Обязательно включите надлежащее лицензирование, если оно требуется для вашего шрифта. Также рассмотрите возможность добавления резервных вариантов, таких как Arial, на случай, если пользовательский шрифт не загрузится.
До сих пор мы настраивали шрифты на уровне темы, что применял их глобально. Вы также можете настраивать шрифты локально в определенных компонентах.
Например, чтобы использовать другой шрифт только для заголовков:
“`
Roboto Slab h2
Основной текст 1 сохраняет шрифт по умолчанию
“`
В этом примере Roboto Slab применяется только к варианту h2.
Это позволяет смешивать несколько шрифтов в одном приложении. Просто будьте осторожны, чтобы не создавать слишком много несоответствий, так как это может навредить читабельности и доступности.
В дополнение к семейству шрифтов, MUI позволяет детально контролировать все другие типографские настройки:
**Размер шрифта**
Используйте свойство fontSize, чтобы задать определенный размер в пикселях или ремах:
“`
3rem h1
“`
Или переопределите только множитель размера:
“`
h1 с множителем размера 6
“`
**Насыщенность шрифта**
Используйте fontWeight, чтобы задать толщину шрифта CSS от 100 до 900:
“`
Жирный основной текст
“`
**Высота строки**
Используйте свойство lineHeight:
“`
Текст с высотой строки 1,2
“`
**Интервал между буквами**
Используйте letterSpacing для настройки трекинга:
“`
Текст с интервалом между буквами 4
“`
**Трансформация текста**
Преобразовать текст в заглавные или строчные буквы:
“`
Заглавный текст
“`
Настройте все эти параметры точно так, как нужно вашему бренду.
Благодаря тематизации MUI и функциональности CSS-in-JS реализация пользовательских шрифтов, размеров, насыщенности и других типографических параметров становится простой.
Ключевые шаги:
– Используйте типографику Material Design по умолчанию в качестве отправной точки
– Переопределяйте определенные стили, такие как fontFamily, fontSize и т. д.
– Добавляйте пользовательские шрифты, следуя рекомендациям
– Настраивайте шрифты на уровне темы или компонента
– Отрегулируйте lineHeight, letterSpacing, textTransform и другие тонкие настройки.
Следуя этим советам, вы сможете оптимизировать читаемость, доступность и соответствие бренду с помощью пользовательской типографики в MUI.
Вот основные моменты, рассмотренные в этом руководстве на 4000 слов по настройке типографики с помощью MUI:
Благодаря мощной поддержке тем MUI у вас есть все инструменты для создания уникальной системы типографского дизайна, соответствующей вашему бренду.