Rafael, miembro de nuestro equipo de trabajo, nos ha hecho el favor de redactar esta sección porque domina a la perfección dicho tema.
Solución:
Con toda la confusión y tantas respuestas diferentes. Me acerqué a los autores de bootstrap con la pregunta para aclararlo de una vez por todas.
Ahora es cristal lo que tendremos que cambiar. $tamaño-de-fuente-base que cambiará directamente el tamaño de fuente raíz.
Su colaborador también me aconsejó que no controlara el tamaño de fuente con el elemento html, sino que cambiara la variable de arranque.
REF: https://github.com/twbs/bootstrap/pull/24060
Precaución acerca de usar solo la anulación de CSS
el uso del ejemplo css proporcionado no funcionará para todos los aspectos del dimensionamiento de arranque.
El resultado compilado de scss usa el $font-size-base variable para dimensionar muchas cosas y puede usarse en más áreas en el futuro.
Lista de elementos de tamaño
- fuente desplegable
- fuente de botón
- fuente emergente
- fuente del grupo de entrada
- fuente de formularios
- reiniciar fuente
————– Ejemplo SCSS ————–
Este es un ejemplo para sus archivos scss, tenga en cuenta que necesita definir el $font-size-base ANTES de incluir bootstrap en su archivo scss principal. En este caso, el app.scss El archivo es el que se está compilando.
app.scss
// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");
// Variables -- this is where you defined the variables
// BEFORE importing bootstrap which will use it's
// defaults if the variable is not predefined.
@import "variables";
// Bootstrap
@import '~bootstrap/scss/bootstrap';
// DataTables https://datatables.net/download/npm#DataTables-core
// @import "datatables";
@import "datatables.min";
_variables.scss
// Body
$body-bg: #ffffff;
// Typography
$font-size-base: 12px; // this changes the font-size throughout bootstrap
$font-family-sans-serif: "Raleway", sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;
Bootstrap define la base font-size en su _reboot.scss como
body
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #292b2c;
background-color: #fff;
NOTA:- Nunca cambie los valores predeterminados en archivos de marcos, siempre modifique los valores usando archivos css/js personalizados.
así que para cambiar el tamaño de fuente a 14px usa esto en tu propio style.css(archivo css personalizado)
body
font-size: 0.875rem;
Aquí está el violín de trabajo
usar !important no puede ver sus cambios para anular su cambio por defecto.
En tus custom.scss archivo hacer como esto:
$custom-variable:0.875rem;
Entonces úsalo así:
@import "./src/scss/_modules/custom";
@import "./bower_components/bootstrap/scss/bootstrap";
body
font-size:$custom-variable;
Si entiendes que ha sido provechoso este post, sería de mucha ayuda si lo compartes con otros seniors de esta forma nos ayudas a dar difusión a esta información.