CSS Tutorial for Beginners Part 13 - CSS Fonts | Learn Web Technologies
Previous Video : CSS Text
• CSS Tutorial for Beginners Part 12 - CSS T...
CSS Playlist
• CSS Tutorial for Beginners
HTML Playlist
• Html tutorial for beginners
Text Version for same
http://learnwebtechnology.ga/2019/07/...
Sign up for my newsletter to receive weekly updates
http://bit.ly/2RRFktj
Join our facebook page
bit.ly/2OKQYV7
CSS Fonts
CSS Font properties define the font family, boldness, size and style of a text.
Font Families
There are two types of font family
1) Generic family – a group of font families with a similar look(like Serif, Sans-serif and Monospace)
Serif fonts have small lines at the end on some characters
Sans-serif - Sans means without – these fonts don’t have the lines at the ends of characters
Monospace – all monospace characters have same width
2) Font family – a specific font family(like “Times New Roman” or “Arial”)
Font Family
The font family of a text is set with the font-family property.
Font-family property holds several font names as a fallback system. If browser does not support the first font, it tries to next font, and so on.
Note: If the name of a font family is more than one word, it must be in quotation marks, like “Times New Roman”.
More than one font family is specified in a comma separated list
Font Style
The font-style property is mostly used to specify italic text.
This property has three values:
Normal, italic , oblique
Font Size
Font-size property sets the size of the text.
Always use the proper HTML tags, like h1 - h6 for headings and p for paragraph.
Note: If you do not specify a font size, the default size for normal text, like paragraph is 16px (16px = 1em)
Font Weight
Font-weight property specifies the weight of a font.
Responsive Font Size
The text size can be set with a vw unit, which means the “viewport width”.
That way the text size will follow the size of the browser window
Note: Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide then 1vw = 0.5cm.
----------------------------------------------------------------------------------------------------------------
#LearnWebTechnologies #CSS #CSSTutorialForBeginners