Globale Schriftgrößenänderungen
Der einfachste Weg, die Schriftgröße Ihrer gesamten Community zu ändern, besteht darin, den Standardwert für das HTML-Element in Ihrem Theme-CSS zu überschreiben, wie hier gezeigt:
html {
font-size: 17px; /* Standard ist 16px */
}
Da alle unsere font-size-Werte innerhalb von <html> mit em-Einheiten definiert sind, erhöht die Erhöhung der font-size auf <html> proportional die Schriftgröße aller anderen Elemente (ems sind relative Einheiten).
Discourse bietet auch vom Benutzer wählbare Textgrößenoptionen, die in den Präferenzen jedes Benutzers geändert werden können (/my/preferences/interface). Standardmäßig sind dies:
Kleinste: 13px
Kleiner: 14px
Normal: 16px (Standard)
Größer: 18px
Größte: 20px
Wenn Sie die Schriftgröße von <html> wie oben gezeigt ändern, ändern Sie nur den Wert für „Normal“. Wenn Sie also möchten, dass die Textgrößeneinstellungen der Benutzer in Ihrem Theme weiterhin funktionieren, sollten Sie auch die font-size für die anderen Optionen erhöhen. Wenn Sie die Schriftgröße aller Optionen um 1px erhöhen möchten, würde dies wie folgt aussehen:
:root {
--base-font-size-smallest: 14px;
--base-font-size-smaller: 15px;
--base-font-size: 17px;
--base-font-size-larger: 19px;
--base-font-size-largest: 21px;
}
Ändern der Schriftgröße einzelner Komponenten
Möglicherweise möchten Sie die globale Schriftgröße Ihrer Community nicht erhöhen, sondern nur die font-size einer bestimmten Komponente, wie der Kopfzeile oder der Beiträge, ändern. Wenn Sie mit CSS vertraut sind, können Sie einzelne Elemente wie erwartet ansprechen.
Um beispielsweise die Schriftgröße des gesamten Inhalts in einem Beitrag zu erhöhen, können Sie dies tun:
.topic-post {
font-size: 1.2em;
}
Wenn Sie die Textgröße des Beitragsinhalts ändern möchten, aber nicht die Benutzernamen und andere Metadaten, müssen Sie etwas spezifischer sein (klicken Sie mit der rechten Maustaste auf ein Element und verwenden Sie den Inspektor Ihres Browsers, wenn Sie herausfinden müssen, welches Element Sie ansprechen sollen)…
.topic-post .contents {
font-size: 1.2em;
}
Beachten Sie, dass ich in den obigen Beispielen em-Einheiten verwende. Sie können hier px-Werte verwenden, aber der Vorteil von ems ist, dass sie relational sind.
Wenn Sie im obigen Beispiel Pixelwerte verwendet hätten, wären diese Schriftgrößen gleich geblieben, selbst wenn ein Benutzer die Textgröße in seinen Präferenzen geändert hätte. Ein statischer Wert wie 16px ist immer 16px. Aber wenn Sie einen Wert wie 1.2em verwenden, wirkt er als Multiplikator … sodass die Schriftgröße immer um das 1,2-fache der Basiseinstellung skaliert wird, wenn jemand eine größere Textgröße in seinen Einstellungen auswählt.
Nutzung der Schriftgrößenvariablen von Discourse
In den Standardstilen von Discourse verwenden wir eine Reihe von Schriftgrößenvariablen. Sie können diese Variablen auch in Ihren Themes verwenden:
:root {
--font-up-6: 2.296em;
--font-up-5: 2em;
--font-up-4: 1.7511em;
--font-up-3: 1.5157em;
--font-up-2: 1.3195em;
--font-up-1: 1.1487em;
--font-0: 1em;
--font-down-1: 0.8706em;
--font-down-2: 0.7579em;
--font-down-3: 0.6599em;
--font-down-4: 0.5745em;
--font-down-5: 0.5em;
--font-down-6: 0.4355em;
}
Dieses System stellt sicher, dass wir eine begrenzte Anzahl von Schriftgrößen verwenden, die basierend auf der globalen Größe, die auf html festgelegt ist, skaliert werden (und erspart Ihnen das Rechnen beim Verschachteln von em-Einheiten). Wenn ein Element auf font-size: var(--font-up-3) gesetzt ist, wissen wir, dass es 1,5-mal größer als --font-0 sein wird, unabhängig davon, wie hoch der spezifische Pixelwert ist.
Wenn Sie sich etwas verloren fühlen, kann es hilfreich sein, sich diese Variablen wie eine Leiter vorzustellen. Wenn Sie ein Element mit font-size: var(--font-up-3) haben und ein Kind dieses Elements dem Äquivalent von --font-0 haben möchten, müssten Sie drei Schritte auf der Leiter nach unten gehen (Sie würden also --font-down-3 verwenden).
Hier ist es in Aktion:
.topic-post {
font-size: var(--font-up-3); // 3 Schritte nach oben
.topic-meta-data {
font-size: var(
--font-down-3
); // 3 Schritte zurück nach unten; entspricht --font-0 (1em)
}
}
Dieses Dokument wird versioniert – Änderungen auf github vorschlagen.