Modifier les styles et paramètres de police CSS dans le volet Styles

Pour faciliter l’utilisation de la typographie, un éditeur de police visuel est désormais disponible dans le volet Styles . À l’aide de l’éditeur de police, vous pouvez modifier vos paramètres de police, et les modifications sont affichées immédiatement dans le navigateur, le tout sans connaissance approfondie de CSS. L’icône Éditeur de police de l’onglet >Styles de l’outil >Éléments ouvre l’éditeur de police, qui se compose de deux parties :

• Sélecteur de famille de polices.
• Éditeur de propriétés CSS .

La typographie sur le web est une partie importante de l’expérience utilisateur. Vous souhaitez vous assurer que les polices suivent les directives de marque de l’entreprise et que votre contenu s’affiche comme prévu sur différents appareils. Le texte doit être facile à lire à l’aide de la taille et de la hauteur de ligne. Les utilisateurs peuvent redimensionner les polices pour répondre à des besoins individuels.

Pour les situations où des polices spécifiques ne sont pas disponibles sur un appareil utilisateur, vous devez fournir des options de police de secours.

CSS offre une meilleure prise en charge de la typographie ces dernières années. Des dizaines d’unités CSS différentes sont disponibles pour définir la taille du texte. Plusieurs propriétés CSS sont disponibles pour contrôler la taille de police, l’espacement, la hauteur de ligne et d’autres caractéristiques typographiques.

Actuellement, l’option Activer le nouvel outil Éditeur de polices dans la fonctionnalité du volet Styles est expérimentale et vous devez l’activer pour les outils de développement Microsoft Edge.

Tout css du volet Styles , qu’il s’agit de définitions de polices ou de styles inline, comporte une icône Éditeur de police. Pour ouvrir l’éditeur de police visuel, cliquez sur l’icône Éditeur de polices .

L’Éditeur de polices s’ouvre au-dessus du volet Styles :

Tous les champs de l’éditeur de police visuel sont remplis à partir des valeurs du css dans le volet Styles . Par exemple, la line-height définition est définie 160% sur dans le volet Styles , de sorte que le champ de texte de hauteur de ligne affiche 160, et la liste déroulante d’unités affiche %. En outre, le curseur est automatiquement défini pour correspondre aux valeurs du champ de texte.

Sélecteur de famille de polices

Le sélecteur Famille de polices est la partie supérieure de l’éditeur de police visuel. Pour sélectionner les polices de la règle CSS, dans l’éditeur CSS, utilisez le sélecteur Famille de polices. Vous pouvez sélectionner des polices main et de secours pour chaque règle CSS.

L’éditeur de police s’ouvre en haut du volet Styles avec le sélecteur Famille de polices mis en évidence :

Utilisez la liste déroulante Famille de polices pour sélectionner une police. Les polices sont organisées en quatre groupes :

• Polices calculées, qui sont les polices disponibles dans la feuille de style dans le volet Styles .
• Polices système, qui sont les polices disponibles sur le système d’exploitation actuel.
• Familles de polices génériques, telles que serif ou sans-serif.
• Valeurs globales, telles que inherit, initialet unset.

L’éditeur de police s’ouvre en haut du volet Styles avec le sélecteur Famille de polices mis en évidence :

Une fois que vous avez sélectionné une police, un autre menu déroulant s’affiche pour vous permettre de sélectionner des polices de secours. Vous pouvez sélectionner jusqu’à huit polices de secours. Pour supprimer une police, cliquez sur l’icône Supprimer la famille de polices .

Remarque

Si vous sélectionnez une valeur globale pour la famille de polices, vous n’obtenez pas un autre menu déroulant, car il n’y a pas de secours pour celle-ci dans CSS.

Éditeur de propriétés CSS

Vous pouvez modifier les propriétés de police CSS dans la partie inférieure de l’éditeur de polices visuel. Vous pouvez modifier la taille de police, la hauteur des lignes, l’épaisseur de police et l’espacement des lettres à l’aide de n’importe quel contrôle d’interface utilisateur. Vos modifications sont appliquées immédiatement dans le navigateur.

L’Éditeur de police s’ouvre au-dessus du volet Styles, avec les propriétés CSS mises en évidence :

Vous pouvez également convertir des unités CSS à l’aide de l’éditeur de polices visuel. Par exemple, vous pouvez utiliser l’outil sur une règle CSS où le curseur Taille de police est initialement défini sur 16 pixels. À présent, utilisez la liste déroulante d’unités et sélectionnez la valeur em. Le 1 em affiché est égal à 16 pixels.

Modification de la taille de police sur 16 pixels:

Ouverture de la liste déroulante d’unités à convertir en em:

La liste déroulante d’unités fournit toutes les unités CSS numériques disponibles. La taille de police, la hauteur de ligne, l’épaisseur de police et l’espacement utilisent des unités différentes. Lorsque les zones de texte ont le focus, vous pouvez appuyer sur les arrow up touches et arrow down pour affiner vos paramètres. Pour utiliser les curseurs avec un clavier, appuyez sur les arrow left touches et arrow down .

L’éditeur de propriétés CSS inclut également des mots clés prédéfinis. Pour utiliser les mots clés prédéfinis, sur le côté droit, cliquez sur l’icône Toggle Input Type . L’interface utilisateur change et une liste déroulante de mots clés prédéfinis s’affiche. Pour revenir à l’interface utilisateur avec le curseur et d’autres contrôles d’interface utilisateur, cliquez à nouveau sur l’icône Toggle Input Type .

Ouverture de l’interface de mot clé prédéfinie :