グローバルなフォントサイズの変更
コミュニティ全体のフォントサイズを変更する最も簡単な方法は、テーマのCSSでHTML要素のデフォルト値を上書きすることです。次のようにします。
html {
font-size: 17px; /* デフォルトは16px */
}
<html>内のすべてのfont-size値はem単位で定義されているため、<html>のfont-sizeを大きくすると、他のすべての要素のfont-sizeも比例して大きくなります（emは相対単位です）。
Discourseには、各ユーザーが環境設定（/my/preferences/interface）で変更できるユーザー選択可能なテキストサイズオプションも用意されています。デフォルトでは次のようになります。
最小: 13px
小: 14px
標準: 16px (デフォルト)
大: 18px
最大: 20px
上記のように<html>のfont-sizeを変更すると、標準の値のみが変更されます。テーマでユーザーのテキストサイズ設定を引き続き機能させたい場合は、他のオプションのfont-sizeも増やす必要があります。すべてのオプションのフォントサイズを1px増やしたい場合、次のようになります。
: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;
}
個々のコンポーネントのフォントサイズの変更
コミュニティ全体のグローバルなフォントサイズを変更したくない場合、ヘッダーや投稿など、特定のコンポーネントのfont-sizeのみを変更できます。CSSに慣れている場合は、想定どおりに個々の要素をターゲットにできます。
たとえば、投稿内のすべてのコンテンツのフォントサイズを大きくするには、次のようにします。
.topic-post {
font-size: 1.2em;
}
投稿コンテンツのテキストサイズは変更したいが、ユーザー名やその他のメタデータは変更したくない場合は、もう少し具体的に指定する必要があります（ターゲットにする要素を特定するには、要素を右クリックしてブラウザのインスペクターを使用してください）…
.topic-post .contents {
font-size: 1.2em;
}
上記の例ではem単位を使用していることに注意してください。ここではpx値を使用することもできますが、emを使用する利点はそれらが相対的であることです。
上記の例でピクセル単位を使用した場合、ユーザーが環境設定でテキストサイズを変更しても、それらのフォントサイズは同じままになります。16pxのような静的な値は常に16pxです。しかし、1.2emのような値を使用すると乗数として機能します。そのため、誰かが設定でより大きなテキストサイズを選択した場合、基本設定よりも常に1.2倍大きくなるようにフォントサイズがスケーリングされます。
Discourseのフォントスケーリング変数の利用
Discourseのデフォルトスタイルでは、一連のフォントスケーリング変数を使用しています。これらの変数はテーマでも使用できます。
: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;
}
このシステムにより、htmlで設定されたグローバルサイズに基づいてスケーリングされる限定されたフォントサイズセットが使用されることが保証されます（ネストされたem単位で計算を行う手間が省けます）。要素がfont-size: var(--font-up-3)に設定されている場合、特定のpx値が何であれ、--font-0に相当するサイズよりも1.5倍大きくなることがわかります。
少し戸惑った場合は、これらの変数をはしごのように視覚化すると役立つかもしれません。font-size: var(--font-up-3)が設定されている要素があり、その要素の子を--font-0と同等のサイズにする必要がある場合、はしごを3段下がる必要があります（そのため、--font-down-3を使用します）。
実際の動作は次のとおりです。
.topic-post {
font-size: var(--font-up-3); // 3段階上
.topic-meta-data {
font-size: var(
--font-down-3
); // 3段階戻る; --font-0 (1em)と同等
}
}
このドキュメントはバージョン管理されています - 変更の提案はgithubで行ってください。