font-variant属性(CSS设置)
font-variant属性(CSS设置)
font-variant-caps特点在不移动基线的情况下垂直更改字符的位置,并将其显示为上标或下标。如果给定的字体具有一些巨细不同的大写字母字形,则此特点选择最合适的字形。
用法:
font-variant-caps:keyword_values
或许
font-variant-caps:Global_values
特点值:此特点接受上面提到的和下面描述的两个值。
keyword_values:此特点引证的keyword_values定义为一般,小写,all-small-caps,petite-caps,all-petite-caps,unicase,titling-caps等单位。
Global_values:此特点引证大局值,例如初始,承继,未设置等。
用法:
font-variant-caps:small-caps|all-small-caps|normal|
inherit|petite-caps|unicase|all-petite-caps|
titling-caps|unset|initil
范例1:下面的代码说明晰font-variant-caps特点与all-small-caps(小型大写字母)的正常用法。
HTML
DOCTYPEhtml>
<html>
<head>
<style>
.allSmallCaps{
font-variant-caps:all-small-caps;
font-style:italic;
}
.smallCaps{
font-variant-caps:small-caps;
font-style:italic;
}
.Normal{
font-variant-caps:normal;
font-style:italic;
}
style>
head>
<body>
<divclass="Container"style="text-align:center;">
<h1style="color:green;text-align:center;">
GeeksforGeeksh1>
<pclass="allSmallCaps">
acomputerScienceportalp>
<pclass="smallCaps">ItisaSmallcapsp>
<pclass="Normal">ItisaNormalcapsp>
div>
body>
html>
输出:
范例2:下面的代码说明晰font-variant-caps特点与petite-caps,单写,all-petite-caps,titling-caps一同运用的代码。
HTML
DOCTYPEhtml>
<html>
<head>
<style>
.petite-caps{
font-variant-caps:petite-caps;
font-style:italic;
}
.all-petite-caps{
font-variant-caps:all-petite-caps;
font-style:italic;
}
.unicase{
font-variant-caps:unicase;
font-style:italic;
}
.titling-caps{
font-variant-caps:titling-caps;
font-style:italic;
}
style>
head>
<body>
<divclass="Container"style="text-align:center;">
<h1style="color:green;text-align:center;">
GeeksforGeeksh1>
<pclass="petite-caps">
Itisapetite-capsp>
<pclass="all-petite-caps">
Itisaall-petite-capsp>
<pclass="unicase">
Itisaunicasep>
<pclass="titling-caps">
Itisatitlingcapsp>
div>
body>
html>
输出:
支撑的浏览器:
Chrome
Firefox
Edge
Opera
Safari(不支撑)
InternetExplorer(不支撑)。
作品标签: CSS
优秀作品:
评论列表(共5人参与)参与讨论或分享设计作品获得视觉癖积分奖励
ly属性(注册会员
2021-08-25 7:32:24
iv style="text-align: center;"> 轻挽云髻,侧颜静好。 旁边面描绘的语句
回复人群太吵注册会员
2021-08-25 4:58:6
亲节到了祝以游客
2021-08-25 6:44:33
游客48679:font-variant属性limg/210819/1-210QZ91043.jpg" /> c语言程序设计用什么软件安全,后边是健康;祝你生日快乐! 10、好的景色我会眷恋,好的瞬间我会留住,好的节日我会期盼,好的朋友我会想念,好的祝愿我会给
回复色真红得注册会员
2021-08-25 19:31:10
font-variant-caps:Global_values 特
回复