Maison > Article > interface Web > Introduction et exemples de fontVariant dans les attributs CSS

Introduction et exemples de fontVariant dans les attributs CSS

零下一度original: 2017-06-19 11:17:222253parcourir

font-variant property définit la police pour afficher le texte en petites majuscules, cela signifie que toutes les lettres minuscules seront converties en majuscules, mais toutes les lettres utilisant la police en petites majuscules Sa police la taille est plus petite par rapport au reste du texte.
Si la valeur est en petites majuscules, le navigateur affichera la police en petites majuscules.

Syntaxe :

font-variant : normal | small-caps

Paramètres :
normal : police normale
petites majuscules : petite police majuscule
Description :
Définit ou récupère si le texte dans l' objet est en petites majuscules.
La fonctionnalité de script correspondante est fontVariant. Veuillez consulter les autres livres que j'ai écrits.

La différence entre la transformation de texte et la variante de police de la transformation de texte

La transformation de texte et la variante de police peuvent convertir l'anglais Convertir le texte en majuscules ou minuscules. Mais la seule fonction de font-variant est de convertir le texte anglais en "petit" texte majuscule. Notez qu'il s'agit de "petit". Généralement, l'attribut font-variant est rarement utilisé pour la conversion de la casse en anglais, nous utilisons l'attribut text-transform au lieu de l'attribut font-variant.

Instance de l'attribut font-variant

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS font-variant 属性示例</title>
<style type="text/css" media="all">
p#small-caps
{
font-variant:small-caps;
}
p#uppercase
{
text-transform:uppercase;
}
</style>
</head>
<body>
<p id="small-caps">The quick brown fox jumps over the lazy dog.</p>
<p id="uppercase">The quick brown fox jumps over the lazy dog.</p>
</body>
</html>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Tutoriel sur l'utilisation des outils de la barre d'état de DreamweaverArticle suivant：Tutoriel sur l'utilisation des outils de la barre d'état de Dreamweaver

Articles Liés

Voir plus