Remarque: cette page est liée au changement de type, de taille et de couleur de police sur une page Web. Pour Microsoft Word, consultez notre page sur la façon de changer la couleur, la taille ou le type de police dans Word.

Ce document contient des instructions sur la modification d'une police et de sa couleur sur une page Web. Pour aller de l'avant, la syntaxe appropriée consiste à utiliser des feuilles de style en cascade avec les sélecteurs de classe ou d'ID plutôt qu'un attribut de style en ligne ou une balise de police, qui sont obsolètes. Cependant, il convient de noter que ces deux méthodes fonctionnent toujours avec la plupart des navigateurs Internet.

Pour continuer, sélectionnez la méthode que vous souhaitez apprendre ou lisez chaque section.

Si vous envisagez de modifier la police et sa couleur une seule fois sur une page Web, vous devez modifier ses attributs dans la balise d'élément. À l'aide de l'attribut style, vous pouvez spécifier la face et la couleur de la police avec famille de polices, la couleur et la taille de la police avec taille de police, comme indiqué dans l'exemple ci-dessous.

Exemple de code

Ce texte a la police Courier, est bleu et 20px.

Résultat

Ce texte a la police Courier, est bleu et 20px en taille.

Utiliser CSS pour une ou plusieurs pages

Police personnalisée pour une page

Dans l'en-tête de votre page Web, vous pouvez insérer du code entre les onglets pour modifier l'apparence de votre texte dans divers éléments. La boîte bleue suivante contient un exemple de code qui, une fois appelé, changerait le visage de votre police en Courier et le colorierait en rouge. Comme vous pouvez le constater, nous avons défini le nom de la classe comme "personnalisé".

 .custom {font-family: Courier; La couleur rouge; taille de police: 20px; } 

Une fois défini, ce style peut être appliqué à la plupart des éléments de votre page en y attachant la classe "custom". L'encadré suivant montre deux lignes de code et leurs résultats respectifs.

Exemple

Toute cette phrase est rouge et Courier

Seul le mot TEST est rouge et courrier.

Résultat

Toute cette phrase est rouge et Courier.

Seul le mot TEST est rouge et courrier.

Police personnalisée pour plusieurs pages

Importer un fichier CSS externe peut être très bénéfique dans la mesure où il permet aux utilisateurs de modifier les règles de plusieurs pages à la fois. La section suivante montre un exemple de création d'un fichier CSS de base qui modifie la police et sa couleur pour la plupart des éléments. Ce fichier peut être chargé dans plusieurs pages Web, même un site entier.

En utilisant n’importe quel éditeur de texte de base, enregistrer le texte suivant dans un fichier .css le préparera à l’importation.

 @charset "utf-8";
.courier {font-family: Courier; couleur: # 005CB9; } 

Une fois que le texte précédent a été placé dans un fichier .css (nous avons nommé notre basic.css ), vous pouvez y accéder depuis n'importe quelle page à l'aide d'une ligne similaire à l'exemple suivant.

Conseil: Les utilisateurs peuvent modifier les attributs des éléments d’une page en modifiant le code du fichier .css importé.

Solution de balise de police

Bien que déconseillée, la balise HTML peut toujours être utilisée et peut être nécessaire avec certains services en ligne. Lorsque vous utilisez la balise FONT, vous devez inclure l'attribut face, qui décrit la police à utiliser. Dans l'exemple ci-dessous, nous utilisons la police Courier et le code de couleur hexadécimal # 005CB9, qui est bleu foncé.

Exemple de code

 Un exemple de police spéciale. 

Résultat