{"id":482,"date":"2022-05-24T21:32:20","date_gmt":"2022-05-24T21:32:20","guid":{"rendered":"https:\/\/gyanipandit.com\/programming\/?p=482"},"modified":"2023-03-28T12:04:53","modified_gmt":"2023-03-28T12:04:53","slug":"css-font-weight","status":"publish","type":"post","link":"https:\/\/gyanipandit.com\/programming\/css-font-weight\/","title":{"rendered":"CSS Font Weight"},"content":{"rendered":"\n<p class=\"has-text-align-center\"><strong>Font Weight<\/strong><\/p>\n\n\n\n<p>font-weight: With this property, we are able to set the weight of the font. Basically, when we say weight, we mean the boldness of the text. This property has got some values like lighter, light, normal, bold, bolder, or 100, 200, 300 so on upto 900. Here, 400 is the same as normal, and 700 is the same as bold.<\/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>This means that if we want to make some text bold, we can just make use of this property, with the value of bold. Let&#8217;s have a simple example, through which, it becomes easy for us to understand the things here.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"834\" height=\"279\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/font-weight.jpg\" alt=\"\" class=\"wp-image-483\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/font-weight.jpg 834w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/font-weight-300x100.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/font-weight-768x257.jpg 768w\" sizes=\"auto, (max-width: 834px) 100vw, 834px\" \/><\/figure>\n<\/div>\n\n\n<p>If we try to open the file in the browser, we can observe that the output is something like this &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1022\" height=\"120\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/font-weight-1.jpg\" alt=\"\" class=\"wp-image-484\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/font-weight-1.jpg 1022w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/font-weight-1-300x35.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/font-weight-1-768x90.jpg 768w\" sizes=\"auto, (max-width: 1022px) 100vw, 1022px\" \/><\/figure>\n<\/div>\n\n\n<p>Now, let&#8217;s try to make this paragraph bold. We are now going to set the value of the font-weight property to bold. Have a look at the example &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"833\" height=\"279\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/font-weight-2.jpg\" alt=\"\" class=\"wp-image-485\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/font-weight-2.jpg 833w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/font-weight-2-300x100.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/font-weight-2-768x257.jpg 768w\" sizes=\"auto, (max-width: 833px) 100vw, 833px\" \/><\/figure>\n<\/div>\n\n\n<p>The output, as you might have guessed, the text now has become bold &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1023\" height=\"99\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/font-weight-3.jpg\" alt=\"\" class=\"wp-image-486\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/font-weight-3.jpg 1023w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/font-weight-3-300x29.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/font-weight-3-768x74.jpg 768w\" sizes=\"auto, (max-width: 1023px) 100vw, 1023px\" \/><\/figure>\n<\/div>\n\n\n<p>Well, you can also try for some other values, like light, or even you can try the values from 100 to 900, where 400 is normal, and 700 is bold.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Font Weight font-weight: With this property, we are able to set the weight of the font. Basically, when we say weight, we mean the boldness of the text. This property has got some values like lighter, light, normal, bold, bolder, or 100, 200, 300 so on upto 900. Here, 400 is the same as normal, [&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,190,13],"class_list":{"0":"post-482","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css-tutorial","7":"tag-css","8":"tag-css-font-weight","9":"tag-css-tutorial"},"_links":{"self":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/482","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=482"}],"version-history":[{"count":4,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/482\/revisions"}],"predecessor-version":[{"id":5651,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/482\/revisions\/5651"}],"wp:attachment":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/media?parent=482"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/categories?post=482"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/tags?post=482"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}