w3school 在线教程HTML 系列教程浏览器脚本服务器脚本编程教程XML 系列教程建站手册参考手册CSS 参考手册CSS 参考手册CSS 浏览器支持CSS 选择器CSS 函数CSS 动画相关属性CSS 网络安全字体CSS 字体回退CSS 单位CSS 颜色CSS 颜色值CSS 默认值CSS 实体CSS 听觉CSS 属性align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-contentjustify-itemsjustify-self@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightrow-gapscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-decoration-thicknesstext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-indexCSS font-variant 属性font-stylefont-variant-caps定义和用法
font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
说明
该属性主要用于定义小型大写字母文本。理论上，用户代理可以根据正常字体计算出小型大写字母字体。
另请参阅：
CSS 教程：CSS 字体
CSS 参考手册：CSS font 属性
HTML DOM 参考手册：fontVariant 属性
实例
把段落设置为小型大写字母字体：
p.small { font-variant:small-caps; }
亲自试一试
CSS 语法font-variant: normal|small-caps|initial|inherit;属性值值描述normal默认值。浏览器会显示一个标准的字体。small-caps浏览器会显示小型大写字母的字体。inherit规定应该从父元素继承 font-variant 属性的值。技术细节 默认值： normal 继承性： yes 版本： CSS1 JavaScript 语法： object.style.fontVariant="small-caps" TIY 实例设置字体的异体本例演示如何设置字体的异体。浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
ChromeIE / EdgeFirefoxSafariOpera1.04.01.01.03.5font-stylefont-variant-capsCSS 参考手册CSS 实例CSS 测验CSS 教程
W3School 简体中文版提供的内容仅用于培训和测试，不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。版权所有，保留一切权利。
关于 W3School帮助 W3School使用条款隐私条款技术支持：赢科蒙ICP备06004630号
