Changements globaux de la taille de police
La manière la plus simple de modifier la taille de police de l’ensemble de votre communauté est de remplacer la valeur par défaut sur l’élément HTML dans le CSS de votre thème, comme ceci :
html {
font-size: 17px; /* la valeur par défaut est 16px */
}
Étant donné que toutes nos valeurs de font-size dans <html> sont définies avec des unités em, l’augmentation de la font-size sur <html> augmentera proportionnellement la taille de police de tous les autres éléments (les em sont des unités relatives).
Discourse propose également des options de taille de texte sélectionnables par l’utilisateur qui peuvent être modifiées dans les préférences de chaque utilisateur (/my/preferences/interface), par défaut, elles sont :
Plus petite : 13px
Petite : 14px
Normale : 16px (par défaut)
Grande : 18px
Plus grande : 20px
Lorsque vous modifiez la font-size de <html> comme démontré ci-dessus, vous ne modifiez que la valeur Normale. Donc, si vous souhaitez que les paramètres de taille de texte de l’utilisateur continuent de fonctionner dans votre thème, vous devez également augmenter la font-size pour les autres options. Si vous souhaitiez augmenter la font-size de toutes les options de 1px, cela ressemblerait à ceci :
: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;
}
Modification de la taille de police de composants individuels
Vous ne souhaitez peut-être pas augmenter la taille de police globale de votre communauté, mais seulement modifier la font-size d’un composant spécifique, comme l’en-tête ou les publications. Si vous êtes familier avec le CSS, vous pouvez cibler des éléments individuels comme prévu.
Par exemple, pour augmenter la taille de police de tout le contenu d’une publication, vous pouvez faire ceci :
.topic-post {
font-size: 1.2em;
}
Si vous souhaitez modifier la taille du texte du contenu de la publication, mais pas les noms d’utilisateur et autres métadonnées, vous devez être un peu plus précis (clic droit sur un élément et utilisez l’inspecteur de votre navigateur si vous avez besoin de déterminer quel élément cibler)…
.topic-post .contents {
font-size: 1.2em;
}
Notez que dans les exemples ci-dessus, j’utilise des unités em. Vous pouvez utiliser des valeurs px ici, mais l’avantage des ems est qu’elles sont relationnelles.
Si vous utilisiez des unités de pixels dans les exemples ci-dessus, ces tailles de police resteraient les mêmes même si un utilisateur modifiait le paramètre de taille de texte dans ses préférences. Une valeur statique comme 16px est toujours 16px. Mais lorsque vous utilisez une valeur comme 1.2em, elle agit comme un multiplicateur… donc si quelqu’un choisit une taille de police plus grande dans ses paramètres, la font-size augmentera toujours pour être 1,2 fois plus grande que le paramètre de base.
Utilisation des variables de mise à l’échelle de la police de Discourse
Dans les styles par défaut de Discourse, nous nous appuyons sur un ensemble de variables de mise à l’échelle de la police. Vous pouvez également utiliser ces variables dans vos thèmes :
: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;
}
Ce système garantit que nous utilisons un ensemble limité de tailles de police qui s’adaptent en fonction de la taille globale définie sur html (et vous évite de faire des calculs lors de l’imbrication des unités em). Si un élément est défini sur font-size: var(--font-up-3), nous savons qu’il sera 1,5 fois plus grand que --font-0, quelle que soit la valeur px spécifique.
Si vous vous sentez un peu perdu, il pourrait être utile de visualiser ces variables comme une échelle. Si vous avez un élément avec font-size: var(--font-up-3) et que vous aviez besoin qu’un enfant de cet élément soit l’équivalent de --font-0, vous devriez descendre de 3 marches sur l’échelle (vous utiliseriez donc --font-down-3).
Voici en action :
.topic-post {
font-size: var(--font-up-3); // 3 marches vers le haut
.topic-meta-data {
font-size: var(
--font-down-3
); // 3 marches en arrière ; équivalent à --font-0 (1em)
}
}
Ce document est contrôlé par version - suggérez des modifications sur github.