Avant d'apprendre à utiliser la propriété font-optical-sizing, nous devons d'abord examiner la propriété font en CSS et pourquoi font-optical-sizing est nécessaire en tant que propriété distincte.
Le style du texte sur une page Web est contrôlé par la propriété font en CSS, qui est un raccourci pour de nombreuses autres propriétés. Il peut être utilisé pour appliquer des polices système aux éléments ou pour définir différentes valeurs pour d'autres propriétés CSS.
Cette propriété s'applique à tous les éléments et est de nature héritable, ce qui signifie que la police de l'élément enfant sera la même que la police de l'élément parent, sauf indication contraire.
Les propriétés qui composent les propriétés abrégées de la police sont les suivantes -
Font-family - Il précise la famille de polices qui sera appliquée au texte, vous pouvez éventuellement fournir une liste de familles avec priorité de gauche à droite.
Font Size - Utilisé pour contrôler la taille de la police ou du texte.
Font Stretch - Vous pouvez utiliser cette propriété pour définir des faces de caractères qui peuvent être plus étroites ou plus larges que les caractères normaux.
Style de police - Cet attribut spécifie si la police doit être affichée en gras, italique, souligné ou barré
Font-variant - Contrôlez les variantes de police et définissez différentes valeurs pour les ligatures.
Font-weight - Cette propriété définit le degré de gras du texte.
Line Height- Utilisé pour définir la distance entre les lignes de texte.
Toutes ces propriétés, qu'elles soient utilisées dans le cadre des propriétés abrégées de la police ou individuellement, ont une valeur initiale. Pour la plupart, la valeur initiale est « Normal », la valeur par défaut pour la taille de police est « Moyenne » et la valeur par défaut pour la famille de polices dépend du système de l'utilisateur.
Un exemple d'utilisation de l'attribut font pour styliser le texte est donné ci-dessous.
<!DOCTYPE html> <html lang="en"> <head> <title>Various font styles</title> </head> <body> <p style="font:caption">This text will be displayed as a caption.</p> <p style="font:icon">This text will be displayed as an icon.</p> <p style="font:menu">This text will be displayed as a menu.</p> <p style="font:message-box">This text will be displayed as message-box</p> <p style="font:small-caption">This text will be displayed as a smaller form of caption.</p> <p style="font:status-bar">This text will be displayed as status bar.</p> <p style="font: bold;">This will be bold</p> <p style="font-size: large;">This will have larger font size.</p> </body> </html>
CSS possède une propriété font-optical-sizing qui détermine si le texte généré est optimisé pour différentes tailles d'écran. Les navigateurs peuvent modifier le contour des glyphes de police pour les rendre plus lisibles à différentes tailles.
Ce serait un grand avantage pour nous si la police prend en charge le redimensionnement optique des polices. De cette façon, nous garantissons que le texte s'adapte toujours à l'écran utilisé par l'utilisateur. La plupart des familles de polices variables prennent en charge cette propriété. Le redimensionnement optique est automatiquement activé lorsqu'une police possède un axe de redimensionnement optique. Nous utilisons la valeur opsz dans les paramètres de variante de police pour représenter l'axe de changement de taille optique.
Lorsque vous utilisez la mise à l'échelle optique, des tailles de police plus petites apparaîtront souvent avec des traits plus épais et des empattements plus grands, tandis que le texte plus grand apparaîtra généralement plus raffiné, avec plus de contraste entre les traits plus épais et plus fins.
Lors de la spécification de cette propriété, les valeurs suivantes peuvent être utilisées -
Aucun - Nous utilisons cette valeur lorsque nous n'avons pas besoin de texte modifié optiquement.
Auto - Le navigateur utilisera cette valeur lorsque nous devrons ajuster la forme du glyphe en fonction de la taille de l'écran.
De plus, nous pouvons également utiliser des valeurs globales (héritées, initiales et non définies) comme valeur de cet attribut.
Par défaut, la valeur initiale de cette propriété est auto. Il s'applique à tous les éléments et inclut également les attributs ::first-letter et ::first-line. Il s'agit d'une valeur héritable et la valeur spécifiée par le navigateur est utilisée comme valeur calculée. Il a des types d’animation discrets.
Un exemple d'utilisation de la valeur auto comme valeur de cet attribut est présenté ci-dessous.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
padding: 3%;
font-weight: 700;
font-optical-sizing: auto;
}
</style>
</head>
<body>
<p>This text will be optically modified for all screen sizes.</p>
</body>
</html>
Cet exemple utilise l'héritage comme valeur d'une propriété, qui est l'une des trois propriétés globales que nous pouvons utiliser en CSS.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
padding: 3%;
font-weight: 700;
font-optical-sizing: inherit;
}
</style>
</head>
<body>
<p>This text will be optically modified for all screen sizes using inherit as its value.</p>
</body>
</html>
Pour résumer, la propriété font-optical-sizing en CSS est un excellent moyen d'améliorer l'apparence du texte sur différents appareils et résolutions. Il vous permet d'ajuster la taille de la police en fonction de l'utilisation prévue, ce qui contribue à améliorer la lisibilité et à créer une conception plus cohérente sur différents écrans. En tirant parti de cette fonctionnalité, les concepteurs peuvent garantir que leurs mises en page seront superbes, quel que soit l'appareil sur lequel elles sont visualisées, sans avoir à ajuster manuellement les paramètres pour chaque taille d'écran.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Diagramme de base de données
Les avantages du trading OTC
Outil d'expression régulière
Utilisation de strncpy
Qu'est-ce que le courrier électronique
Comment installer le certificat SSL
Quelles sont les méthodes permettant à Docker d'entrer dans le conteneur ?
Méthode d'enregistrement du compte Google
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
