Introduction and examples of fontVariant in css attributes-CSS Tutorial-php.cn

Introduction and examples of fontVariant in css attributes

零下一度

Release： 2017-06-19 11:17:22

Original

2271 people have browsed it

font-variant PropertiesSets the font for displaying text in small caps. This means that all lowercase letters will be converted to uppercase, but all letters using small caps font will be converted to uppercase. Its font size is smaller compared to the rest of the text.
Value small-caps The browser will display the font of small capital letters.

Syntax:

font-variant : normal | small-caps

Copy after login

Parameters:
normal: normal font
small-caps: small uppercase font
Description:
Set or Retrieve whether the text in object is small caps.
The corresponding script feature is fontVariant. Please see other books I have written.

text-transformThe difference between text-transform and font-variant

text-transform and font-variant can both convert English Convert text to uppercase or lowercase. But the only function of font-variant is to convert English text into "small" uppercase text. Note that this is "small". Generally, the font-variant attribute is rarely used. For English case conversion, we use the text-transform attribute instead of the font-variant attribute.

Instance of font-variant attribute

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS font-variant 属性示例</title>
<style type="text/css" media="all">
p#small-caps
{
font-variant:small-caps;
}
p#uppercase
{
text-transform:uppercase;
}
</style>
</head>
<body>
<p id="small-caps">The quick brown fox jumps over the lazy dog.</p>
<p id="uppercase">The quick brown fox jumps over the lazy dog.</p>
</body>
</html>

Copy after login

The above is the detailed content of Introduction and examples of fontVariant in css attributes. For more information, please follow other related articles on the PHP Chinese website!