Arrow

CSS Font Variant

AuthorHariom Prajapati

Pubish Date20 Aug 2022

categoryCSS

It is use to change small letters to capital letters but it also decrease the font size.

 

Syntax - 

font-variant:small-caps;

 

values

normal

This is default

small-caps It's change small letter to capital letter with decresing font size

 

Note:- We can change small letter to capital letter , capital letter to small letter or capitalize first letter without change in size of text using text transform property.

 

For example -

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Font Variant</title>
	<style>
		h1.variant {
			font-variant: small-caps;
		}
	</style>
</head>

<body>
	<h1 class=variant> Welcome to Teknowize </h1>
	<p> Thank Your For visiting</p>
</body>

</html>

 

Output

Font Variant