My Blog

The font-variant-numeric property supports the OpenType font format taking control of the usage of alternate glyphs for numbers, fractions, and ordinal markers. Numbers can have variants such as ordinals (e.g. 1st), fractions (e.g. 1/2). Unlike letters, they don’t change the content’s meaning but these variations add additional context and can have an effect on legibility. The main…

The font-variant-ligatures property controls the ligatures and contextual forms that produce more harmonized forms. This property is specified by the following values: 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.fontVariantLigatures = “normal”; Syntax Example of the font-variant-ligatures property: Result Types of ligatures There are multiple…

The font-variant-east-asian property controls the usage of alternate glyphs for East Asian scripts. In particular, it is used to control glyph substitution and sizing in East Asian texts. This property is one of the CSS3 properties. 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.fontVariantEastAsian = “ruby”; Syntax…

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…