Cambios globales en el tamaño de fuente
La forma más sencilla de cambiar el tamaño de fuente de toda tu comunidad sería anular el valor predeterminado en el elemento HTML del CSS de tu tema, de esta manera:
html {
font-size: 17px; /* el valor predeterminado es 16px */
}
Debido a que todos nuestros valores de font-size dentro de <html> se definen con unidades em, aumentar el font-size en <html> aumentará proporcionalmente el tamaño de fuente de todos los demás elementos (las em son unidades relativas).
Discourse también incluye opciones de tamaño de texto seleccionables por el usuario que se pueden cambiar en las preferencias de cada usuario (/my/preferences/interface), por defecto son:
Más pequeña: 13px
Pequeña: 14px
Normal: 16px (predeterminado)
Grande: 18px
Más grande: 20px
Cuando cambias el font-size de <html> como se demostró anteriormente, solo estás cambiando el valor Normal. Por lo tanto, si deseas que la configuración de tamaño de texto del usuario siga funcionando en tu tema, también debes aumentar el font-size para las otras opciones. Si quisieras aumentar el font-size de todas las opciones en 1px, se vería así:
: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;
}
Cambiar el tamaño de fuente de componentes individuales
Puede que no desees aumentar el tamaño de fuente global de tu comunidad, y solo cambiar el font-size de un componente específico, como el encabezado o las publicaciones. Si estás familiarizado con CSS, puedes seleccionar elementos individuales como se espera.
Por ejemplo, para aumentar el tamaño de fuente de todo el contenido dentro de una publicación puedes hacer esto:
.topic-post {
font-size: 1.2em;
}
Si quisieras cambiar el tamaño del texto del contenido de la publicación, pero no los nombres de usuario y otra metainformación, debes ser un poco más específico (haz clic derecho en un elemento y usa el inspector de tu navegador si necesitas averiguar qué elemento seleccionar)…
.topic-post .contents {
font-size: 1.2em;
}
Ten en cuenta que en los ejemplos anteriores estoy usando unidades em. Puedes usar valores px aquí, pero el beneficio de las ems es que son relativas.
Si usaras unidades de píxeles en los ejemplos anteriores, esos tamaños de fuente permanecerían iguales incluso si un usuario cambiara la configuración de tamaño de texto en sus preferencias. Un valor estático como 16px es siempre 16px. Pero cuando usas un valor como 1.2em, actúa como un multiplicador… así que si alguien elige un tamaño de texto más grande en su configuración, el font-size siempre escalará para ser 1.2 veces más grande que la configuración base.
Utilizando las variables de escalado de fuente de Discourse
En los estilos predeterminados de Discourse, dependemos de un conjunto de variables de escalado de fuente. Tú también puedes usar estas variables en tus temas:
: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;
}
Este sistema asegura que estamos utilizando un conjunto limitado de tamaños de fuente que escalan según el tamaño global establecido en html (y te ahorra tener que hacer cálculos al anidar unidades em). Si un elemento está configurado como font-size: var(--font-up-3), sabemos que será 1.5 veces más grande que --font-0, sin importar cuál sea el valor específico en píxeles.
Si te sientes un poco perdido, podría ayudarte a visualizar estas variables como una escalera. Si tienes un elemento con font-size: var(--font-up-3) y necesitas que un hijo de ese elemento sea el equivalente a --font-0, tendrías que bajar 3 escalones en la escalera (así que usarías --font-down-3).
Aquí está en acción:
.topic-post {
font-size: var(--font-up-3); // 3 pasos hacia arriba
.topic-meta-data {
font-size: var(
--font-down-3
); // 3 pasos hacia abajo; equivalente a --font-0 (1em)
}
}
Este documento está controlado por versiones: sugiere cambios en github.