¿Es posible anular las variables de Discourse?

Soporte
1

Hola,

Estoy intentando cambiar la tipografía, como la fuente (font-family), el grosor (font-weight) y los tamaños de fuente, usando las variables de Discourse.

$base-font-family: var(--font-family) !default;
$heading-font-family: var(--heading-font-family) !default;

Entonces, ¿cómo puedo cambiar la variable heading-font-family, por ejemplo, así: $heading-font-family: Arial;? He probado varios métodos, pero los cambios no se ven.

$heading-font-family: Arial;

:root {
  --heading-font-family: Arial;
}

¿Alguna idea?

1 me gusta
2

Quizás eches un vistazo a https://meta.discourse.org/t/selectable-font-family-component/117493?

4 Me gusta
3

Gracias por la respuesta.

De hecho, Discourse ya tiene una función predeterminada para eso. Pero quiero hacer una personalización de tipografía más detallada.

image
image1480×436 20.6 KB

Así que estoy buscando una forma de cambiar los valores de las variables. Pensé que podría cambiar fácilmente toda la tipografía.

desde variables.scss

// Fuentes
// --------------------------------------------------

$base-font-size-smallest: 0.815em !default; // eq. a 13px
$base-font-size-smaller: 0.875em !default; // eq. a 14px
$base-font-size: 0.938em !default; // eq. a 15px
$base-font-size-larger: 1.063em !default; // eq. a 17px
$base-font-size-largest: 1.118em !default; // eq. a 19px
$base-font-family: var(--font-family) !default;
$heading-font-family: var(--heading-font-family) !default;

// Definiciones de tamaño de fuente, multiplicador ^ (paso / intervalo)
$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; // 2^(1/5)
$font-0: 1em;
$font-down-1: 0.8706em; // 2^(-1/5)
$font-down-2: 0.7579em; // Tamaño más pequeño que usamos basado en la base de 1em
$font-down-3: 0.6599em;
$font-down-4: 0.5745em;
$font-down-5: 0.5em;
$font-down-6: 0.4355em;

¿Crees que sea posible cambiar estas variables?

2 Me gusta
4

Oh. Pensé que eso parecía antiguo y que ahora había una mejor manera. Lo siento.

2 Me gusta
5

Gracias por la respuesta @pfaffman. Espero que haya alguna forma de sobrescribir estas variables. De lo contrario, tendré que cambiar las clases CSS.

1 me gusta
6

Ejecuta de nuevo el asistente de configuración; la selección de fuente ahora es un paso en el asistente de configuración desde la versión beta 2.6.

4 Me gusta
7

Gracias por la respuesta, @codinghorror. Así que solo podemos elegir ciertas fuentes, ¿verdad? Y he aprendido que estas variables no se pueden sobrescribir. ¿Es correcto?

8

@bekircem Acabo de probar el asistente en la versión 2.7.0.beta1 y las fuentes disponibles son las mismas que las de la configuración del sitio que compartiste arriba (es posible que me esté perdiendo algo).

Probablemente ya lo hayas resuelto, pero por si acaso, puedes usar Google Fonts o simplemente reemplazar las variables CSS como lo hiciste en tu publicación original, lo cual debería haber funcionado.

Estoy usando este CSS en mi instancia y funciona (cargando la fuente mediante <link/> o @include).

:root {
  --heading-font-family: 'Inter', sans-serif;
  --font-family: 'Inter', sans-serif;
}
2 Me gusta