Zu Seitenhinhalt springen

🎉 Material UI v5 is out now! Check out the announcement blog post →

Helfen Sie, diese Seite zu übersetzen

Typography

Verwenden Sie die Typografie, um Ihr Design und Ihren Inhalt so klar und effizient wie möglich darzustellen.

Zu viele Schriftgrößen und -stile gleichzeitig können jedes Layout beeinträchtigen. Eine typografische Skala hat einen begrenzten Satz von Schriftgrößen, die gut mit dem Layoutraster zusammenarbeiten.

Allgemein

Die Roboto Schriftart wird nicht automatisch durch Material UI geladen werden. Der Entwickler ist dafür verantwortlich, alle, in seiner Anwendung verwendeten, Schriftarten zu laden. Roboto Font bietet einige einfache Einstiegsmöglichkeiten. Für anspruchsvollere Konfiguration, besuche den Theme Anpassung Abschnitt.

Die Roboto Schrift

Unten ist ein Beispiel für ein Link-Markup zum Laden der Roboto-Schriftart von einem CDN dargestellt:

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

Mit npm installieren

Sie können diese installieren durch den folgenden Befehl im Terminal:

npm install @fontsource/roboto

Dann können Sie es in Ihren Einstiegspunkt importieren.

'fontsource-roboto'; importieren

For more info check out Fontsource.

⚠️ Seien Sie vorsichtig, wenn Sie diesen Ansatz verwenden. Stellen Sie sicher, dass Ihr Bundler nicht alle Schriftvarianten läd (100/300/400/500/700/900, kursiv / normal, SVG / woff). Fontsource can be configured to load specific subsets, weights and styles. Durch das Einbetten aller Schriftdateien kann die Größe Ihres Bundles erheblich erhöht werden. Material-UI default typography configuration only relies on 300, 400, 500, and 700 font weights.

Komponente

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

Theme

In einigen Situationen können Sie möglicherweise die Komponente Typography nicht benutzen. Hoffentlich können Sie die Hauptfunktionalitäten der Typografie des Themas nutzen.

This div's text looks like that of a button.
<div className={classes.root}>{"This div's text looks like that of a button."}</div>

Ändern des semantischen Elements

Die Komponente Typografie verwendet die Eigenschaft variantMapping um eine UI-Variante einem semantischen Element zuzuordnen. Es ist wichtig zu wissen, dass der Stil einer Typografie unabhängig von dem zugrunde liegenden semantischen Element ist.

  • You can change the underlying element for a one time occasion with the component property:
Heading
</Typography> {/* There is already an h1 in the page, let's not duplicate it. {/* There is already an h1 in the page, let's not duplicate it. */}
<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',
      },
    },
  },
});

Barrierefreiheit

A few key factors to follow for an accessible typography:

API