Saltar al contenido

¿Cómo cambiar el tamaño de fuente predeterminado global de Bootstrap?

Ya no necesitas investigar más en otras páginas ya que estás al sitio exacto, tenemos la respuesta que quieres sin problemas.

Solución:

Hay varias formas, pero dado que está utilizando solo la versión CSS y no las versiones SASS o LESS, su mejor opción es usar la propia herramienta de personalización de Bootstrap:

http://getbootstrap.com/personalizar/

Personaliza lo que quieras en esta página y luego puedes descargar una compilación personalizada con tus propios tamaños de fuente y cualquier otra cosa que quieras cambiar.

No se recomienda modificar el archivo CSS directamente (o simplemente agregar nuevos estilos CSS que anulen el CSS de Bootstrap) porque los valores de otros estilos de Bootstrap se derivan del tamaño de fuente base. Por ejemplo:

https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss#L52

Puede ver que el tamaño de fuente base se usa para calcular los tamaños de h1, h2, h3, etc. Si acaba de cambiar el tamaño de fuente en el CSS (o agregó su propio tamaño de fuente anulado), todos los demás valores que usaron el el tamaño de fuente en los cálculos ya no sería proporcionalmente preciso según el diseño de Bootstrap.

Como dije, su mejor opción es simplemente usar su propia herramienta Personalizar. Eso es exactamente para lo que es.

Si está utilizando SASS o LESS, cambiaría el tamaño de fuente en el archivo de variables antes de compilar.

Bootstrap usa la variable:

$font-size-base: 1rem; // Assumes the browser default, typically 16px

No recomiendo jugar con esto, pero se puede. La mejor práctica es anular el tamaño de fuente base predeterminado del navegador con:

html 
  font-size: 14px;

Bootstrap luego tomará ese valor y lo usará a través de rems para establecer valores para todo tipo de cosas.

Puedes agregar un style.cssimporte este archivo después de la bootstrap.css para anular este código.

Por ejemplo:

/* bootstrap.css */
* 
   font-size: 14px;
   line-height: 1.428;


/* style.css */
* 
   font-size: 16px;
   line-height: 2;

no cambies bootstrap.css directamente para un mejor mantenimiento del código.

Tienes la opción de añadir valor a nuestra información colaborando tu experiencia en las aclaraciones.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *