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.
caption textoverline textTheme
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.
<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.
- Sie können das Mapping global mit dem Theme ändern:
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:
- Farbe. Provide enough contrast between text and its background, check out the minimum recommended WCAG 2.0 color contrast ratio (4.5:1).
- Schriftgröße. Use relative units (rem) to accommodate the user's settings.
- Heading hierarchy. Don't skip heading levels. In order to solve this problem, you need to separate the semantics from the style.