{"id":1978,"date":"2016-07-10T17:01:38","date_gmt":"2016-07-10T17:01:38","guid":{"rendered":"http:\/\/cssreset.com\/?p=1978"},"modified":"2016-07-10T17:02:52","modified_gmt":"2016-07-10T17:02:52","slug":"quick-tip-what-does-the-font-variant-property-do","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/quick-tip-what-does-the-font-variant-property-do\/","title":{"rendered":"Quick Tip: What Does the Font-Variant Property Do?"},"content":{"rendered":"

CSS3’s font-variant property may not be very well-known, but it is a very cool tool for styling your font in a very specific way. Applying the small-caps value to the font-variant property will make it so that all of the letters in your selected text appear as uppercase, but the letters that are actually uppercase appear larger than the other uppercase letters.<\/p>\n

Here’s what the code looks like:<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
css<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. p{<\/span><\/div><\/li>\n
  2. font-family<\/span>:<\/span> 'Futura'<\/span>,<\/span> sans-serif<\/span>;<\/span><\/div><\/li>\n
  3. font-size<\/span>:<\/span> 20px<\/span>;<\/span><\/div><\/li>\n
  4. font-weight<\/span>:<\/span> bold<\/span>;<\/span><\/div><\/li>\n
  5. font-variant<\/span>:<\/span> small-caps<\/span>;<\/span><\/div><\/li>\n
  6. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    And this is what your text should look like:<\/p>\n

    \"Screen<\/p>\n

    Share and Enjoy !<\/h3>
    0<\/span><\/span>Shares<\/small><\/div>
    <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

    CSS3’s font-variant property may not be very well-known, but it is a very cool tool for styling your font in a very specific way. Applying the small-caps value to the font-variant property will make it so that all of the […]<\/p>\n

    Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":1979,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4,6,42],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1978"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=1978"}],"version-history":[{"count":1,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1978\/revisions"}],"predecessor-version":[{"id":1980,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1978\/revisions\/1980"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/1979"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1978"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1978"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1978"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}