Comment augmenter la taille de la police dans Bootstrap 4 ?

Question

Dans Bootstrap 4, la taille de la police est utilisée par défaut. em ou rem pour les polices de caractères.

Comment puis-je augmenter le font-size pour toutes les tailles de fenêtres ? Parce que chaque élément semble minuscule.

Answer 1

Parce que Bootstrap 4 utilise le rem pour le font-size de la plupart de ses éléments, vous pouvez définir l'élément font-size sur px sur l'élément HTML dans votre propre feuille de style, ce qui modifiera la taille par défaut que Bootstrap applique à vos éléments. J'ai inclus un lien vers une projet codeply pour que vous puissiez le voir en action. Bootstrap 4 est déjà chargé dans l'environnement. Si vous modifiez la valeur de l'élément font-size pour le html et exécutez le projet, vous pouvez voir comment la taille des éléments change par rapport à l'élément racine.

L'ajout de trois lignes de CSS à votre feuille de style devrait être assez facile :

html {
    font-size: 16px;
}

Answer 2

vous pouvez utiliser .h1 à .h6 classes bootstrap ou vous pouvez créer votre propre classe css personnalisée et définir la taille de la police ici et mettre votre classe sur votre élément html.

Answer 3

Bootstrap 4 : Il existe une série de classes que vous pouvez utiliser pour personnaliser votre texte :

• h1 - h6
• display-1 - display-4
• small

I.e :

<!--class="h3" class="display-3", class="small"-->
<div *ngIf="customer_selected" class="h5">
  <p>First name: {{selected_customer.first_name}}</p>
  <p>Last name: {{selected_customer.last_name}}</p>
</div>

Answer 4

Vous pouvez également envisager d'ajouter ceci :

<meta name="viewport" content="width=device-width, user-scalable=no" />

Lorsque je l'ai ajouté, mes navigateurs mobiles ont soudainement affiché des tailles de texte raisonnables.