Styling with CSS - Part 6 - Font Video Lecture - IT & Software

welcome to the w3schools CSS font
tutorial CSS font properties define the
font family boldness size and style of
text in CSS there are two types of found
family names generic families which is a
group of font families with a similar
look
these are serif sans serif and mono
space and font family names which are
specific font families like Times New
Roman or Arial or courier new let's look
at how they're grouped Times New Roman
and Georgia are part of the serife
family Arielle and verdana are part of
the sensory family serif fonts have
small lines at the end of some
characters see here they are marked in
red
Sam serif fonts they do not have the
lines at the end of the characters
actually sons means without monospaced
fonts like Cory renew and the Serie
consoles are fonts where all characters
have the same width you can see the
difference especially for the R and I
Aaron Cory renew and are and I in
Arielle on computer screens sans serif
fonts are considered easier to read than
serif font
when we speak of fonts it's most often
the font family will mean and this is
set with the font family property when
setting the font family property you
should set several font names as a
fallback system if the browser doesn't
support the first phone it tries to next
you can specify several funds using a
comma start with the
do you want an end with a generic family
name so the browser can pick a similar
found in the generic family if no other
fonts are available if the name of the
font is more than one word it must be in
quotation marks like this let's change
this font to verdana let's see what
happens if we deliberately misspell the
name of the font see it goes to the next
fallback font we see which is the
generic sans-serif on our tutorial page
we have a link to page listing web safe
fonts combinations let's move on to font
style the font style property is mostly
used to specify italic text the font
style property supports three values
normal which is how the text is shown
normally italic which is italic style an
oblique which is leaning text this is
quite similar to italic but less
supported in browsers so let's remove
the oblique font style now the paragraph
is shown in the default style which is
normal
the font-size property sets the size of
the text the font size value can be an
absolute or relative value with absolute
value you set the text to the specified
size and you do not allow users to
change the text size in the browser's
absolute size is useful when the
physical size of the output is known
like when you know exactly how many
pixels would width you have available
with relative size you set the size
relative to the surrounding elements and
you allow users to change the text size
in their browsers let's look at an
example where we set absolute size here
we have set the size in pixels this
gives us full control of the text size
but it does not allow users to resize
the text in their browsers however you
can still use the zoom tool to resize
the entire page like this
to allow users to resize the text many
developers use e/m instead of pixels the
e/m size unit is recommended by the
World Wide Web Consortium 1:00 a.m. is
equal to the current font size the
default text size in browsers is 16
pixels so the default size of 1 a.m. is
16 pixels so we want this h1 element to
have a size of 40 pixels but we want to
set it with e/m so in our comment here
we've shown how to calculate from pixels
to e/m you divide the pixels by 16 so in
this example the text size is the same
as the previous example however with the
e/m size is possible to adjust the text
size in all browsers I'll show you this
in a different browser you see we're not
zooming or changing the text size from
medium which is default to largest or
smaller size
unfortunately there is still a problem
with older versions of Internet Explorer
the text becomes larger than it should
when made larger and smaller than it
should
when made smaller the solution to this
is to set a default font size for the
body element so you set the font size to
100% for the body element now with this
code the text is the same size in all
major browsers and it allows users to
resize the text or zoom the page let's
see how we can set the boldness of the
text in this example we use the found
weight property to set the boldness of
the text you can send it to normal bold
or bolder lighter or number from 100 to
900 where 400 is the same as normal and
700 is the same as bold the difference
between the weight settings for this
depends on the font you use on the w3
schools tutorial page there are more
examples and we list all the CSS font
properties and there's a link for each
property it goes to our CSS reference
where you can find more information for
any CSS property this concludes our
tutorial for CSS font thank you for
watching