{"id":22053,"date":"2013-06-17T09:27:27","date_gmt":"2013-06-17T16:27:27","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=22053"},"modified":"2022-05-31T07:12:09","modified_gmt":"2022-05-31T14:12:09","slug":"font-variant","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-variant\/","title":{"rendered":"font-variant"},"content":{"rendered":"\n<p>The <code>font-variant<\/code> property allows you to change the targeted text to small caps. This property has been extended in CSS3.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">p:first-line {\n  font-variant: small-caps; \/* default is `normal` *\/\n}<\/code><\/pre>\n\n\n\n<p>Before CSS3, this property accepted one of two possible values: <code>normal<\/code> (how text is rendered by default) and <code>small-caps<\/code>.<\/p>\n\n\n\n<p>A value of <code>small-caps<\/code> will render the text in uppercase letters that are smaller than regular uppercase letters. This does not override uppercasing set in the content, inside the markup. For example:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_Dvmgdr\" src=\"\/\/codepen.io\/anon\/embed\/Dvmgdr?height=250&amp;theme-id=1&amp;slug-hash=Dvmgdr&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed Dvmgdr\" title=\"CodePen Embed Dvmgdr\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>In the above demo, both paragraphs are set to <code>font-variant: small-caps<\/code>. The first paragraph has only the first letter uppercase in the markup, so it appears as expected (first letter uppercase, remainder in small caps).<\/p>\n\n\n\n<p>The second line is written in all uppercase in the markup, which overrides the <code>small-caps<\/code> value, setting everything in regular uppercase.<\/p>\n\n\n\n<p>Taking this further, if these paragraphs are set to <code>font-variant: small-caps<\/code> and <code>text-transform: lowercase<\/code>, then they will appear in all small caps. Similarly, if these paragraphs are set to <code>font-variant: small-caps<\/code> and <code>text-transform: uppercase<\/code>, then they will appear in all regular uppercase.<\/p>\n\n\n\n<p><code>font-variant<\/code> can be included as part of a <code>font<\/code> shorthand declaration.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"new-additions-in-css3\">New additions in CSS3<\/h3>\n\n\n<p>In CSS3, <code>font-variant<\/code> becomes a shorthand and can accept multiple values, including <code>all-small-caps<\/code>, <code>petite-caps<\/code>, <code>all-petite-caps<\/code>, <code>titling-caps<\/code>, and <code>unicase<\/code>, among others.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"other-resources\">Other resources<\/h3>\n\n\n<ul><li><a href=\"http:\/\/www.w3.org\/TR\/css3-fonts\/#font-variant-prop\" rel=\"noopener\">font-variant on W3C<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/font-variant\" rel=\"noopener\">font-variant on MDN<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/gh\/ireade\/caniuse-embed\/public\/caniuse-embed.min.js\"><\/script>\n<p class=\"ciu_embed\" data-feature=\"mdn-css__properties__font-variant\" data-periods=\"future_1,current,past_1,past_2\" data-accessible-colours=\"false\">\n\n\n\n<p>In IE6\/7, setting <code>font-variant: small-caps<\/code> will cause any text set to <code>text-transform: uppercase<\/code> or <code>text-transform: lowercase<\/code> to appear like <code>text-transform: none<\/code>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The font-variant property allows you to change the targeted text to small caps. This property has been extended in CSS3. Before CSS3, this property accepted one of two possible values: normal (how text is rendered by default) and small-caps. A value of small-caps will render the text in uppercase letters that are smaller than regular [&hellip;]<\/p>\n","protected":false},"author":7178,"featured_media":0,"parent":13921,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":14053,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font\/","url_meta":{"origin":22053,"position":0},"title":"font","date":"September 5, 2011","format":false,"excerpt":"The font property in CSS is a shorthand property that combines all the following sub-properties in a single declaration. body { font: normal small-caps normal 16px\/1.4 Georgia; } \/* is the same as: body { font-family: Georgia; line-height: 1.4; font-weight: normal; font-stretch: normal; font-variant: small-caps; font-size: 16px; } *\/ There\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":322037,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-kerning\/","url_meta":{"origin":22053,"position":1},"title":"font-kerning","date":"September 25, 2020","format":false,"excerpt":"The CSS font-kerning property defines the way specific pairs of letters are spaced. You see, fonts often contain information about how much breathing room a character has on its left and right edges. The proper term for the spacing is sidebearings. When two characters are placed next to each other,\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":144460,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-transform\/","url_meta":{"origin":22053,"position":2},"title":"text-transform","date":"July 24, 2013","format":false,"excerpt":"The text-transform property in CSS controls text case and capitalization. .lowercase { text-transform: lowercase; } Text-Transform Values lowercase makes all of the letters in the selected text lowercase. uppercase makes all of the letters in the selected text uppercase. capitalize capitalizes the first letter of each word in the selected\u2026","rel":"","context":"With 16 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":261983,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-variant-numeric\/","url_meta":{"origin":22053,"position":3},"title":"font-variant-numeric","date":"October 31, 2017","format":false,"excerpt":"The font-variant-numeric property in CSS supports the OpenType font format by specifying which numeric glyphs to use on a class, including variations for fractions, ordinal markers and styled variations among others. A Little Context We tend to think of numbers as a static glyph. It prints and that's the way\u2026","rel":"","context":"In \"font-variant\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3518,"url":"https:\/\/css-tricks.com\/snippets\/css\/font-shorthand\/","url_meta":{"origin":22053,"position":4},"title":"Font Shorthand","date":"August 22, 2009","format":false,"excerpt":"Syntax body { font: font-style font-variant font-weight font-size\/line-height font-family; } In Use body { font: italic small-caps normal 13px\/150% Arial, Helvetica, sans-serif; } You need to supply at least font-size and font-family for the shorthand to work, otherwise it'll just be a syntax error and do nothing. body { font:\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":235583,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-feature-settings\/","url_meta":{"origin":22053,"position":5},"title":"font-feature-settings","date":"December 4, 2015","format":false,"excerpt":"This property gives us control over advanced typographic settings such as small caps, ligatures, and swashes. To activate them you must declare which value you need in quotes and then followed by either 1 or on to enable. Alternatively, you can disable them with either 0 or off: .element {\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/22053"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/7178"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=22053"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/22053\/revisions"}],"predecessor-version":[{"id":366135,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/22053\/revisions\/366135"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13921"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=22053"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=22053"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}