{"id":476,"date":"2022-05-24T21:30:42","date_gmt":"2022-05-24T21:30:42","guid":{"rendered":"https:\/\/gyanipandit.com\/programming\/?p=476"},"modified":"2023-03-28T12:07:29","modified_gmt":"2023-03-28T12:07:29","slug":"css-font-style","status":"publish","type":"post","link":"https:\/\/gyanipandit.com\/programming\/css-font-style\/","title":{"rendered":"CSS Font Style"},"content":{"rendered":"\n<p class=\"has-text-align-center\"><strong>CSS Font Style<\/strong><\/p>\n\n\n\n<p>This property is used to specify the normal or the italic font style.<\/p>\n\n\n\n<p>Some values for the font-style property are italic, normal, oblique, etc. Let&#8217;s have a look at some of them one by one.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"CSS font-weight, font style | Lecture 27 | CSS for Beginners\" width=\"696\" height=\"392\" src=\"https:\/\/www.youtube.com\/embed\/BTZZ4K5CRHg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>font-style: normal \u2013 this specifies that the text is shown in a normal form.<\/p>\n\n\n\n<p>font-style: italics \u2013 this specifies that the text is to show in italics.<\/p>\n\n\n\n<p>There is another value called oblique, which slants the font slightly towards the right(similar to what italics do)<br>You can refer to the following code to understand the font style &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"833\" height=\"275\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/font-style.jpg\" alt=\"\" class=\"wp-image-477\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/font-style.jpg 833w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/font-style-300x99.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/font-style-768x254.jpg 768w\" sizes=\"auto, (max-width: 833px) 100vw, 833px\" \/><\/figure>\n<\/div>\n\n\n<p>So, as you can see, we have made the font style italics for the div that was made for demonstration purposes. This is what it looks like-<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1021\" height=\"110\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/font-style-1.jpg\" alt=\"\" class=\"wp-image-478\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/font-style-1.jpg 1021w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/font-style-1-300x32.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/font-style-1-768x83.jpg 768w\" sizes=\"auto, (max-width: 1021px) 100vw, 1021px\" \/><\/figure>\n<\/div>\n\n\n<p>So, as you can see that the text appears in italics now. You can try removing the font-style property, and observe the output then.<\/p>\n\n\n\n<p>Well, now let&#8217;s have a look at the next value for the font-size property, which is oblique. Have a look at the below example &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"830\" height=\"274\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/font-style-2.jpg\" alt=\"\" class=\"wp-image-479\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/font-style-2.jpg 830w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/font-style-2-300x99.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/font-style-2-768x254.jpg 768w\" sizes=\"auto, (max-width: 830px) 100vw, 830px\" \/><\/figure>\n<\/div>\n\n\n<p>Now, the output for the following code &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1023\" height=\"119\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/font-style-3.jpg\" alt=\"\" class=\"wp-image-480\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/font-style-3.jpg 1023w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/font-style-3-300x35.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/font-style-3-768x89.jpg 768w\" sizes=\"auto, (max-width: 1023px) 100vw, 1023px\" \/><\/figure>\n<\/div>\n\n\n<p>So, you can make use of the font-style property, whenever you need to convert some text to italics.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS Font Style This property is used to specify the normal or the italic font style. Some values for the font-style property are italic, normal, oblique, etc. Let&#8217;s have a look at some of them one by one. font-style: normal \u2013 this specifies that the text is shown in a normal form. font-style: italics \u2013 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[9,13],"class_list":{"0":"post-476","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css-tutorial","7":"tag-css","8":"tag-css-tutorial"},"_links":{"self":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/476","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/comments?post=476"}],"version-history":[{"count":5,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/476\/revisions"}],"predecessor-version":[{"id":5655,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/476\/revisions\/5655"}],"wp:attachment":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/media?parent=476"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/categories?post=476"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/tags?post=476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}