In css3 there are following properties for fonts are defined below.
1) There is a property named as Font Family
This property is used for specify the different families of fonts which are
explained below.
2) There is another property named as Font Style
This property is to specify different styles of fonts.
3) There is another property named as Font Size
This property is used for specify different size of the font.
4) There is another property named as Font Google
This property is used for google fonts.
Font family
There are following font families are given below.
<style type="text/css">
.d-1{
font-family: sans-serif;
width: 100%;
border: 1px solid green;
}
.d-2{
font-family: fantesy;
width: 100%;
border: 1px solid green;
}
.d-3{
font-family: serif;
width: 100%;
border: 1px solid green;
}
</style>
<h4 class="d-1">Sans-serif font family</h4>
<h4 class="d-2">Fantasy font family</h4>
<h4 class="d-3">Serif font family</h4>
Output of above code
Sans-serif font family
Fantasy font family
Serif font family
Note
If you want to explore more about font-family visit this link Click here
Font style
There are following font style are given below.
<style type="text/css">
.d-1{
font-style: italic;
width: 100%;
border: 1px solid green;
}
.d-2{
font-style: oblique;
width: 100%;
border: 1px solid green;
}
.d-3{
font-style: normal;
width: 100%;
border: 1px solid green;
}
</style>
<h4 class="d-1">italic font style</h4>
<h4 class="d-2">oblique font style</h4>
<h4 class="d-3">normal font style</h4>
Output of above code
italic font style
oblique font style
normal font style
Font weight
An example of font weight is given
<style type="text/css">
.d-1{
font-weight: bold;
width: 100%;
border: 1px solid green;
}
</style>
<h4 class="d-1">bold font weight</h4>
Output of above code
bold font weight
Font can be given in different px and it can also be used with bolder value.
Font Variant
An example of font Variant
<style type="text/css">
.d-1{
font-variant: small-caps;
width: 100%;
border: 1px solid green;
}
</style>
<h4 class="d-1">small-caps font variant</h4>
Output of above code
small-caps font variant
Font Size
An example of font Size is given
<style type="text/css">
.d-1{
font-size: 40px;
width: 100%;
border: 1px solid green;
}
</style>
<h4 class="d-1">40px font size</h4>
Output of above code
40px font size
Font size can be set by using %,vw
and it can also set as em.
Google Fonts
Note
If you want to explore about google fonts visit this link Click here
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
