42 votes

Comment augmenter la taille de la police dans Bootstrap 4 ?

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.

0 votes

Si vous voulez des tailles de police réactives, vous pouvez utiliser des requêtes média. La documentation de bootstrap 4 présente un exemple.

47voto

cwanjt Points 1417

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;
}

2 votes

Vous pouvez également définir une valeur em, mais vous devrez effectuer des tests sur plusieurs tailles. Le principal avantage de cette méthode est qu'elle respecte les paramètres de taille de police de l'agent utilisateur et de la feuille de style de l'utilisateur, ce qui rend votre site plus accessible aux personnes souffrant de déficiences visuelles.

1 votes

Un tel réglage est essentiel pour l'ensemble de la page. Le développeur doit être conscient de ses implications.

1 votes

Ne fonctionne que si elle est définie comme font-size: 16px !important;

9voto

Mr. Laeeq Khan Points 108

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.

3 votes

Ces classes doivent être utilisées pour indiquer la structure logique, et non pour contrôler la taille du texte.

2 votes

Je ne parle pas des classes java... je parle juste des classes css. vous devez d'abord lire les classes css.

4 votes

@ArmandoFox Je ne suis pas d'accord - les classes HTML n'ont pas de valeur sémantique intrinsèque comme les éléments HTML. Ce sont des crochets largement arbitraires pour le style, et Bootstrap a choisi cette convention précisément pour contrôler la taille de la police.

6voto

7guyo Points 177

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>

0 votes

small Ne fonctionne pas pour le contenu des zones de texte.

1voto

Alan Baljeu Points 640

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.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X