Scanner class Methods in Java

on
0

CSS font-variant & font-variant-caps Property

on

font-variant Property


The CSS font-variant property allows you to convert your font into other case . 

It has three values in CSS,
  1. normal:- It is the default value. It sets the font to normal sentence case.
  2. small-caps:-It sets the font to small-caps case. Small-caps looks similar to capital letters but the small-caps letters are relatively smaller than the regular capital letters.If we write first letter capital then, the only first letter be in regular capital letter and all other will covert in small-caps.
  3. initial:-  It sets the font to initial sentence case.
  4. inherit:-  It inherits the font from parent element.
In CSS3 , more values are added to the font-variant property. that are as follows:-
  1. all-small-caps:-  It sets the font to small-caps for all capital and small letters.
  2. petite-caps:- It sets the font to petite-caps case. 
  3. all-petite-caps -  It sets the font to petite-caps for all the capital and small letters.
  4. unicase:-   It sets the font to mix of small capitals for uppercase letters with normal lower case letters.
  5. titling-caps -  It sets the font to titling caps..

font-variant-caps Property

It works same as font-variant property. The font-variant-caps is not supported in Edge and Safari browsers.In the example below, you can see the use of this property also.

 HTML CODE:-
<body>
<p class="normal">Paragraph font variant set to normal.
</p>
<p class="small">Paragraph font variant set to small-caps.
</p>
<p class="inherit">Paragraph font variant set to inherit.
</p>
<p class="petite">Paragraph font variant set to petite-caps.</p>
<p
<p
<p class="allpetite">Paragraph font variant set to all-petite-caps.</p>
<p
<p
<p class="unicase">Paragraph font variant set to unicase.</p>
<p 
<p 
<p class="initial">Paragraph font variant set to initial.</p>
<p class="titling">Paragraph font variant set to titling-caps.</p>
<p class="allsmall">Paragraph font variant set to all-small-caps.</p>

</body>
CSS  CODE:-
p.normal{
     font-variant:normal;
}
p.small{
     font-variant:small-caps;
}
p.inherit{
     font-variant:inherit;
}
p.allsmall{
     font-variant:all-small-caps;
}
p.petite{
     font-variant:petite-caps;
}
p.allpetite{
     font-variant:all-petite-caps;
}
p.unicase{
     font-variant:unicase;
}
p.titling{
     font-variant-caps: titling-caps;
}
p.initial{
     font-variant:initial;
}
    
p.allpetite{
     font-variant:all-petite-caps;
}
p.unicase{
     font-variant-caps:unicase;
}
p.titling{
     font-variant-caps: titling-caps;
}
p.initial{
     font-variant:initial;
}
Result:
font-variant and font-variant-caps example in css
Some of these font are not supported in browsers. That's way, there's no change in text.

Comments

Post a Comment

If you have any doubt, ask here