In CSS1 and CSS2, it was the font-variant property that specified small caps. But in CSS3, this property has become shorthand for CSS3 properties like font-variant-caps property. This property allows to select alternate glyphs for small, petite capitals and titling including many useful values like: When a given font involves capital letter glyphs that are of different…

The font-variant-alternates property takes control over the selection of alternate glyphs. The names of alternate glyph functions (styleset, stylistic, character-variant, ornament, swash, annotation) can be defined in @font-feature-values. The human-readable names specified in @font-feature-values are allowed in the stylesheet. Initial Value normal Applies to All elements. It also applies to ::first-letter and ::first-line. Inherited Yes. Animatable No. Version CSS3 DOM Syntax object.style.fontVariantAlternates…

The font-variant property sets the text as normal or small-caps from a font-family. The font-variant property can have two values: normal and small-caps. Normal is the default value. When we select small-caps for a text, it makes the lowercase letters to the uppercase letters, but these converted letters will be displayed a little smaller than normal uppercase letters. The font-variant property can…

The font-style property defines the font style for a text. The property has three values: normal, italic and oblique. Oblique is a roman font that has been skewed 8-12 degrees. Italic is another value that is created by the type designer with specific characters particularly lowercase “a” for creating a calligraphic and a slanted version. Oblique is…

The font-stretch property makes the text wider or narrower. This property is one of the CSS3 properties. The font-stretch property does not work on any font! It only works if the font-family has width-variant faces. The font-stretch property alone does not stretch a font. This property has the following values: Initial Value normal Applies to All elements. It also applies to ::first-letter and ::first-line. Inherited Yes. Animatable…

The font-language-override property controls the use of the language-specific glyphs. This property can be specified by two values: normal and <string>. The “string” must match a language tag. For example, “TRK” for Turkish. By default, the HTML lang attribute instructs the browser to display glyphs which are deigned for a certain language. The font-language-override property overrides the typeface behavior for a…

The font-size-adjust property controls the font size when the first specified font is not available. In such cases, the browser uses the second specified font. Thus, the font size can be changed. The font-size-adjust controls this process. The font-size-adjust property is one of the CSS3 properties. All fonts have an “aspect value” which is the difference of size between the lowercase letter…

The font-size property defines the font size of the text. Font size can be defined by the following ways: Absolute font size includes the following values: Relative font size includes the following values: Lengths can be relative lengths (em, ex, px) and absolute lengths (in, cm, mm, pt, pc). Percentages specify an absolute font size relative to…

The font-kerning property controls the use of the kerning information stored in a font. Kerning defines the spacing of the letters. Kerning specifies how the letters are spaced. It makes character spacing more pleasant to the eye and easier to read. Initial Value auto Applies to All elements. It also applies to ::first-letter and ::first-line. Inherited Yes. Animatable No. Version…

The @font-feature-values at-rule sets a named value for certain font feature of a font family. It can be used at the top level of CSS or in a CSS conditional-group at-rule. The @font-feature-values at-rule can contain any of the following feature values: Besides a character’s default glyph there can also be other alternate glyphs (e.g., swash glyphs, stylistic alternates) for…