font-stretch |
Étirement de police |
|---|---|
| CSS |
Syntaxe
|
font-stretch: paramètres; |
Paramètres
| Paramètre | Description | ||
|---|---|---|---|
| paramètres | Ce paramètre de propriété permet d'indiquer le facteur d'étirement : | ||
| Valeur | Aperçu | Description | |
| condensed | Ceci est un texte d'exemple | Cet attribut permet d'indiquer que l'affichage de la police de caractères avec un facteur d'étirement condensés. | |
| expanded | Ceci est un texte d'exemple | Cet attribut permet d'indiquer que l'affichage de la police de caractères avec un facteur d'étirement étendue. | |
| extra-condensed | Ceci est un texte d'exemple | Cet attribut permet d'indiquer que l'affichage de la police de caractères avec un facteur d'étirement extra condensés. | |
| extra-expanded | Ceci est un texte d'exemple | Cet attribut permet d'indiquer que l'affichage de la police de caractères avec un facteur d'étirement extra étendue. | |
| narrower | Ceci est un texte d'exemple | Cet attribut permet d'indiquer que l'affichage de la police de caractères avec un facteur de condensation sur les prochaines valeurs | |
| normal | Ceci est un texte d'exemple | Cet attribut permet d'indiquer que l'affichage de la police de caractères à un affichage normal | |
| semi-condensed | Ceci est un texte d'exemple | Cet attribut permet d'indiquer que l'affichage de la police de caractères avec un facteur d'étirement semi condensés. | |
| semi-expanded | Ceci est un texte d'exemple | Cet attribut permet d'indiquer que l'affichage de la police de caractères avec un facteur d'étirement semi étendue. | |
| ultra-condensed | Ceci est un texte d'exemple | Cet attribut permet d'indiquer que l'affichage de la police de caractères avec un facteur d'étirement ultra condensés. | |
| ultra-expanded | Ceci est un texte d'exemple | Cet attribut permet d'indiquer que l'affichage de la police de caractères avec un facteur d'étirement ultra étendue. | |
| wider | Ceci est un texte d'exemple | Cet attribut permet d'indiquer que l'affichage de la police de caractères avec un facteur d'expansion sur les prochaines valeurs | |
Description
Cette propriété permet de fixer le facteur d'étirement de la police de caractères utilisé.
Remarques
- Définition et objectif : La propriété font-stretch permet de contrôler l'étirement horizontal d'une police de caractères. Elle ajuste la largeur des caractères de la police de caractères en modifiant la graisse ou la largeur des lettres. Cela peut être utile pour ajuster l'apparence du texte tout en conservant la lisibilité et l'intégrité de la police de caractères dans un design.
- Valeurs possibles : La propriété font-stretch accepte plusieurs valeurs, dont des mots-clefs comme normal, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, et ultra-expanded. Ces valeurs indiquent l'étendue de l'étirement de la police de caractères, allant de l'ultra-condensé à l'ultra-étendu, permettant de manipuler l'aspect des caractères dans un design typographique.
- Relation avec les familles de polices : L'utilisation de font-stretch dépend des variations de largeur étant disponibles dans la famille de polices de caractères. Si la police de caractères que vous utilisez ne supporte pas ces variations, l'élément ne subira pas d'effet visible. Par exemple, une police de caractères n'ayant pas de versions "condensées" ou "étendues" ne changera pas, même si la propriété est appliquée.
- Compatibilité des navigateurs Web : Bien que font-stretch soit pris en charge par les navigateurs modernes, sa prise en charge n'est pas universelle. Il est important de tester la compatibilité sur différents navigateurs, car certaines polices de caractères personnalisées ou certaines implémentations de navigateurs peuvent ne pas supporter cette fonctionnalité de manière optimale.
- Interaction avec font-family et font-weight : font-stretch est souvent utilisé en combinaison avec font-family et font-weight. Alors que font-family détermine la police de caractères de base, font-weight ajuste l'épaisseur des caractères et font-stretch modifie leur largeur. Ensemble, ces propriétés permettent de manipuler finement l'apparence du texte dans un design flexible et réactif.
- Impact sur la lisibilité : L'utilisation de font-stretch peut avoir un impact sur la lisibilité, en particulier si la police de caractères est trop étirée ou trop condensée. Il est important de trouver un équilibre entre l'esthétique et la lisibilité pour garantir que le texte reste facile à lire, surtout dans des tailles petites ou pour des utilisateurs avec des déficiences visuelles.
- Utilisation dans les mises en page réactives : font-stretch peut être utilisé dans des conceptions responsives pour ajuster la largeur des caractères en fonction de la taille d l'écran. Cela peut aider à adapter le texte au contenu, à l'espacement disponible ou à la taille du conteneur, en garantissant une présentation cohérente sans perturber la structure du texte.
- Limites de personnalisation des polices de caractères : Bien que font-stretch offre des options intéressantes pour ajuster l'apparence du texte, il peut ne pas être aussi puissant que l'utilisation de polices de caractères différentes ou de variations de graisse. De plus, tous les navigateurs et toutes les polices ne supportent pas cette propriété, ce qui peut limiter son efficacité dans certaines situations où la flexibilité est nécessaire.
Dernière mise à jour : Dimanche, le 20 décembre 2015