fonts Property In CSS
Text appearance can be adjusted using the CSS Font attribute. You can change the text’s size, color, style, and more by using the CSS font property. The topic of changing text color has already been covered in color Property blog post. We will also learn how to use percentages to resize your font here.
A system font may be chosen by specifying the font property as a single keyword, or it may be used as a shorthand for a number of font-related parameters. It must be one of the following if font is given as a system keyword: caption, icon, menu, message-box, small-caption, status-bar.
//HTML
<h1>Codeshruta</h1>
//CSS
h1{
font: small-caps bold 24px sans-serif;
}
The CSS properties font-family, font-size, font-stretch, font-style and font-variant, and font-weight are all represented by this property.
font-family Property
An HTML element’s font type is set using it. As a backup system, it has several font names stored. The example that shows how to change an element’s font family is provided below. Any font family name is a value.
The font name, such as “Times New Roman,” must be enclosed in quotation marks if it contains more than one word.
//Syntax
font-family: "font family name";
//Example
h1{
font-family: Arial, Helvetica, sans-serif;
}
p{
font-family: "Lucida Console", "Courier New", monospace;
}
From highest priority to lowest, a list of fonts is specified by the font-family attribute. The user’s system’s first available font in the list is not the only font available for selection.
Instead, fonts are chosen character by character, so that if a character is required but a certain font does not have a glyph for it, the following fonts are attempted. Selecting a font family can also be influenced by the fact that a font is only offered in a limited number of styles, variations, or sizes.
font-style Property
An HTML element’s font style can be specified using it. The first of the three values for this property is normal, which means the text is displayed normally. The wording in the second one is italicised. The final one is oblique, italic is very similar to oblique but less supported. Oblique text is “leaning.”
//Syntax
font-style: style name;
//Example
h1{
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
}
p{
font-family: "Lucida Console", "Courier New", monospace;
font-style: oblique;
}
font-weight Property
It is used to control the font’s boldness. Any one of the values mentioned below can be used to provide the font-weight attribute. normal; font size equal to 400. font style: bold; weight: 700. lighter than the parent element by one relative font weight.
Greater relative font weight than the parent element, or bolder a numerical value that ranges from 1 to 1000, inclusive. Weights that are bolder than (or equal to) lesser values are represented by higher numbers.
//Syntax
font-weight: font weight value;
//Example
h1{
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: lighter;
}
p{
font-family: "Lucida Console", "Courier New", monospace;
font-style: oblique;
font-weight: 900;
}
font-variant Property
Whether or not a text should be shown in a small-caps font is determined by the font-variant property. All lowercase characters are changed to uppercase letters in a small-caps font.
However, compared to the text’s original uppercase letters, the converted uppercase letters appear in a reduced font size.
//Syntax
font-variant: font variant value;
//Example
h1{
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: lighter;
font-variant: normal;
}
p{
font-family: "Lucida Console", "Courier New", monospace;
font-style: oblique;
font-weight: 900;
font-variant: small-caps;
}
font-size Property
An HTML element’s font size is set using it. Font size can be adjusted in a variety of ways, including in pixels, percentages, em, or by entering values such as small, large, etc.
//Syntax
font-size: font size value;
//Example
h1{
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: lighter;
font-variant: normal;
font-size: 40px;
}
p{
font-family: "Lucida Console", "Courier New", monospace;
font-style: oblique;
font-weight: 900;
font-variant: small-caps;
font-size: 2.5em;
}
font shorthand property
It is also feasible to declare each of the individual font properties in a single property to make the code shorter. A shortcut for font-style, font-variant, font-weight, font-size/line-height, and font-family is the font property. Font-family and font-size settings are necessary in this case. The default value of the other values is used if one of them is absent.
p{
font: oblique small-caps 900 2.5em Georgia, serif;
}
Conclusion
CSS font Property is helpful for styling our fonts on web pages with different types of font-family, color and size. I hope after reading this blog post you have cleared all the topics related to font properties in CSS. If you have any questions or problems, then comment below.
Thankyou for reading!
Written by : Vipin
