Перейти к контенту
Редактировать эту страницу

Typography

Используйте оформление для максимально четкого и эффективного представления своего дизайна и содержания.

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

Основное

The Roboto font will not be automatically loaded by Material-UI. You are responsible for loading any fonts used in your application. Есть несколько простых способов начать использование шрифта Roboto. Для более продвинутой конфигурации ознакомьтесь с разделом настроек темы.

Шрифт Roboto через CDN

Ниже показан пример HTML-разметки, используемой для загрузки шрифта Roboto с CDN:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

Установка используя npm

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

npm install @fontsource/roboto

Затем вы можете импортировать его в вашу точку входа.

import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

For more info check out Fontsource.

Fontsource может быть настроен на загрузку определенных подмножеств, жирности и стилей. Стандартная конфигурация оформления в стиле Material-UI зависит только от жирности шрифта: 300, 400, 500 и 700.

Компоненты

The Typography component makes it easy to apply a default set of font weights and sizes in your application.

h1. Heading
h2. Heading
h3. Heading
h4. Heading
h5. Heading
h6. Heading
subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur

body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.

body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.

button textcaption textoverline text

Темы

В некоторых ситуациях вы не сможете использовать компонент Typography. Надеемся, что вы сможете воспользоваться ключами свойства темы typograpthy.

This div's text looks like that of a button.
<Div>{"This div's text looks like that of a button."}</Div>

Изменение семантического элемента

The Typography component uses the variantMapping property to associate a UI variant with a semantic element. It's important to realize that the style of a typography component is independent from the semantic underlying element.

  • You can change the underlying element for a one time occasion with the component property:
{/* There is already an h1 in the page, let's not duplicate it. */}
<Typography variant="h1" component="h2">
  h1. */}
<Typography variant="h1" component="h2">
  h1.

const theme = createTheme({
  props: {
    MuiTypography: {
      variantMapping: {
        h1: 'h2',
        h2: 'h2',
        h3: 'h2',
        h4: 'h2',
        h5: 'h2',
        h6: 'h2',
        subtitle1: 'h2',
        subtitle2: 'h2',
        body1: 'span',
        body2: 'span',
      },
    },
  },
});

Adding & disabling variants

In addition to using the default typography variants, you can add custom ones, or disable any you don't need. See the Adding & disabling variants example for more info.

Доступность

Несколько ключевых факторов для доступности оформления:

API