CSS font-variant

 CSS font-variant can be used to make changes in uppercase and narrower parts of the content text.

CSS font-variant syntax example

font-variant: attribute value;

There are three attribute values, namely normal, small-caps, and inherit. Normal is the default value. The browser will not shrink the text or convert the letters to uppercase, so there is no difference between writing and not writing. In small-caps, this attribute value will capitalize English letters and reduce the font size. As for inherit, it inherits the parent layer attribute, but it is not recommended because the current version of IE does not support this attribute value.

CSS font-variant implementation example

<style type="text/css">
<!--
span {
　font-variant:small-caps;
}
-->
</style>
<span>Test string.</span>Test string.

In the output result,



you may find that the ratio of the first T is larger than the others. In fact, it is not that the T is larger, but the other English letters after it are reduced. This is the special effect of the CSS font-variant. In addition, the font -variant seems to have no effect on traditional Chinese fonts.