CSS Fonts
Example: In this example we will use few CSS Font’s properties.
HTML
<!DOCTYPE html><html><head> <title>CSS Font</title> <style> .gfg { font-family: "Arial, Helvetica, sans-serif"; font-size: 60px; color: #090; text-align: center; } .geeks { font-family: "Comic Sans MS", cursive, sans-serif; font-variant:small-caps; text-align: center; } </style></head><body> <div class="gfg">GeeksforGeeks</div> <div class="geeks"> A computer science portal for geeks </div></body></html> |
Output:
The CSS font is used to set the font’s content of the HTML element. There are many font properties in CSS which are mentioned and briefly discussed below:
- CSS font-family Property: The font-family property specifies the font of an element.
- CSS font-style Property: If we want to give designing to any type of text then we can make the use of CSS font-style property.
- CSS font-weight Property: The font-weight property of the CSS is used to set the weight or thickness of the font being used with the HTML Text.
- CSS font-variant Property: The font-variant property is used to converted all lowercase letters into uppercase letters.
- CSS font-size Property: The font-size property in CSS is used to set the font size of text in HTML document.
- CSS font-stretch Property: The font-stretch property in CSS is used to set the text wider or narrower.
- CSS font-kerning Property: This property is used to control the usage of the Kerning Information that has been stored in the Font.
Below few examples are given from CSS Font Collection.
font-family: It is used to set the font type of an HTML element. It holds several font names as a fallback system.
Syntax:
font-family: "font family name";
Example:
HTML
<!DOCTYPE html><html><head> <title>font-family property</title> <style> .gfg { font-family: "Times New Roman"; font-weight: bold; font-size: 40px; color: #090; text-align: center; } .geeks { font-family: "Comic Sans MS", cursive, sans-serif; text-align: center; } </style></head><body> <div class="gfg">GeeksforGeeks</div> <div class="geeks"> A computer science portal for geeks </div></body></html> |
Output:
font-style: It is used to specify the font style of an HTML element. It can be “normal, italic or oblique”.
Syntax:
font-style: style name;
Example:
HTML
<!DOCTYPE html><html><head> <title>font-style property</title> <style> .gfg { font-style: normal; font-family: "Times New Roman"; font-weight: bold; font-size: 40px; color: #090; text-align: center; } .geeks { font-style: italic; text-align: center; } </style></head><body> <div class="gfg">GeeksforGeeks</div> <div class="geeks"> A computer science portal for geeks </div></body></html> |
Output:
font-weight: It is used to set the boldness of the font. Its value can be “normal, bold, lighter, bolder”.
Syntax:
font-weight: font weight value;
Example:
HTML
<!DOCTYPE html><html><head> <title>font-weight property</title> <style> .gfg { font-weight: bold; font-style: normal; font-family: "Times New Roman"; font-size: 40px; color: #090; text-align: center; } .geeks { font-weight: normal; text-align: center; } </style></head><body> <div class="gfg">GeeksforGeeks</div> <div class="geeks"> A computer science portal for geeks </div></body></html> |
Output:
font-variant: It is used to create the small-caps effect. It can be “normal or small-caps”.
Syntax:
font-variant: font variant value;
Example:
HTML
<!DOCTYPE html><html><head> <title>font-variant property</title> <style> .gfg { font-variant: small-caps; font-weight: bold; font-family: "Times New Roman"; font-size: 40px; color: #090; text-align: center; } .geeks { font-variant: normal; text-align: center; } </style></head><body> <div class="gfg">GeeksforGeeks</div> <div class="geeks"> A computer science portal for geeks </div></body></html> |
Output:
font-size: It is used to set the font size of an HTML element. The font-size can be set in different ways like in “pixels, percentage, em or we can set values like small, large” etc.
Syntax:
font-size: font size value;
Example:
HTML
<!DOCTYPE html><html><head> <title>font-size property</title> <style> .gfg { font-size: 40px; font-weight: bold; font-family: "Times New Roman"; color: #090; text-align: center; } .geeks { font-size: 1.2em; text-align: center; } </style></head><body> <div class="gfg">GeeksforGeeks</div> <div class="geeks"> A computer science portal for geeks </div></body></html> |
Output:
.png)
