CSS Font

CSS font properties are used to adjust the appearance of the text in an HTML document. Using the CSS fonts properties, we can customize the font family, size, weight, style, and color of text.

• font-family: Helvetica — sets the font family of text to Helvetica within the body
• font-size: 16px — sets the font size of the text to 16px within the body

Basic Font Properties

In CSS, we have the following seven important font properties that are used to change different attributes of the text.

• font-family : defines the font applied to the text
• font-size : sets the size of the font
• font-weight : sets the thickness i.e increase the boldness or lightness of the font
• font-style : sets the font to italic or oblique
• font-variant : changes the font to small-caps
• font-stretch : expands or narrows the text
• line-height : sets the distance between lines of the text

We will learn about each of them in detail.

CSS Font Family

CSS font-family property is used to set the font face of the text on the webpage. For example,

        
CSS Font Family
  

Browser Output

In the above example, we have set the font family of the h1 element to the Courier, monospace . The browser tries to render the text of h1 in Courier font, and if not available, monospace is rendered.

Note: It is recommended to list the family name in quotation marks when it consists of multiple words. For example, «Times New Roman» .

CSS Font Size

CSS font-size property sets the size or height of the text. The values of font-size can be expressed by keywords, length units ( px , em , rem , etc), or percentages. For example,

        
Font size: 42px
 
Font size: 24px
  

Browser Output

CSS Font Style

CSS font-style property is used to style a font either with a normal , italic , or oblique face. For example,

        
Normal text
 
Italic text
 
Oblique text
  

h1.normal < font-style: normal; >h1.italic < font-style: italic; >h1.oblique

Browser Output

The possible values for CSS font-style are as follows:

• normal : text is shown normally
• italic : text is shown in italics
• oblique : text is leaned which is very similar to italic

CSS Font Stretch

CSS font-stretch property is used to widen or narrow the text by allowing us to select a normal , expanded or condensed face from the font’s family. For example,

        
Hello World
 
Hello World
  

Browser Output

Note: This property has no effect if the selected font family does not offer condensed or expanded faces.

CSS Font Variant

CSS font-variant is used to set the text to small-caps (uppercase letters but in smaller font size). For example,

        
This is the normal text.
 
This is the small caps
  

Browser Output

The possible values for CSS font-variant style are as follows:

• normal : default value and makes no change to the font
• small-caps : displays text in small uppercase letters
• initial : sets the text to initial value which is normal by default
• inherit : sets the text to value as of its parent element

CSS Font Weight

CSS font-weight determines the lightness or boldness of the text. It can be specified by using numeric or pre-defined keywords such as bold , lighter , etc. For example,

        
Normal Text
 
Bold Text
  

Browser Output

The weight available depends on the font-family that is currently set. If the specified font-family does not offer the requested font weight, the browser will simulate the lightness or boldness that approximates the requested weight.

CSS Line Height

CSS line-height property is used to set the height of the line box. It allows setting the height of the line independently from the font size. For example,

         
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a neque et turpis tristique mollis quis imperdiet purus. Nunc molestie orci eu augue consequat, pellentesque faucibus magna pretium. Duis at viverra ligula. Nullam aliquam, leo ut tristique pretium, ligula arcu cursus turpis, nec rhoncus sapien urna vitae lacus. Fusce vel consectetur diam.
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a neque et turpis tristique mollis quis imperdiet purus. Nunc molestie orci eu augue consequat, pellentesque faucibus magna pretium. Duis at viverra ligula. Nullam aliquam, leo ut tristique pretium, ligula arcu cursus turpis, nec rhoncus sapien urna vitae lacus. Fusce vel consectetur diam.
  

Browser Output

The possible values for CSS line-height are as follows:

Line Height Values	Description
normal	default value, specifies the normal line height
number	specifies the number that is multiplied with the current font size to set the line height
length	sets the line height in px , pt , cm , etc
%	sets the line height in percent of the current font size
initial	sets the value to default value i.e normal
inherit	inherits the property value from its parent element

CSS Font ShortHand Property

The CSS font shorthand property is used to set multiple font related properties in a single declaration. This property helps to shorten the code by specifying all the font properties in one place.

The font property has the following syntax:

font: font-style font-variant font-weight font-size/line-height font-family;

The font shorthand property needs at least font-size and font-family values to work.

The order of the values provided in the above shorthand font property must follow the specified ordering. Default values are used if other values are omitted.

        
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  

h1 < font: italic small-caps bold 24px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif; >/* The above code is equivalent to h1 < font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 24px; line-height: 1.2; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; >*/

Browser Output

Table of Contents

Источник

Стандартные и безопасные шрифты CSS

Безопасные шрифты – это набор шрифтов, устанавливаемый вместе с операционной системой (Windows, MacOS, Unix/Linux).

Чтобы сайт в любой операционной системе открывался одинаково, принято в CSS-свойстве font-family задавать несколько названий шрифтов, перечисленных через запятую.

Последним указывается семейство шрифта, он используется, если в системе ни один из перечисленных не найден.

Список безопасных шрифтов:

‘Times New Roman’, Times, serif	Съешь же ещё этих мягких французских булок
Georgia, serif	Съешь же ещё этих мягких французских булок
Arial, Helvetica, sans-serif	Съешь же ещё этих мягких французских булок
‘Arial Black’, Gadget, sans-serif	Съешь же ещё этих мягких французских булок
Verdana, Geneva, sans-serif	Съешь же ещё этих мягких французских булок
‘Trebuchet MS’, Helvetica, sans-serif	Съешь же ещё этих мягких французских булок
Impact, Charcoal, sans-serif	Съешь же ещё этих мягких французских булок
‘Comic Sans MS’, cursive, sans-serif	Съешь же ещё этих мягких французских булок
‘Courier New’, Courier, monospace	Съешь же ещё этих мягких французских булок

Далее о каждом шрифте подробнее:

Times New Roman

Источник

Каскадные таблицы стилей CSS советы & приёмы

После цвета шрифт — возможно, важнейшее свойство страницы. На этой странице я не буду демонстрировать никаких «трюков», но покажу ряд вариаций шрифтов, допустимых в CSS.

Поскольку не все шрифты доступны на всех компьютерах (существуют тысячи шрифтов и большинство из них не бесплатны), CSS предусматривает резервную систему. Первым вы указываете шрифт, который хотели бы использовать. Затем следуют любые шрифты, которые вы могли бы использовать, если первый указанный шрифт не доступен. А закончить список вы должны типовым шрифтом, который имеет 5 видов: serif, sans-serif, monospace, cursive и fantasy.

Стили шрифтов

Большинство шрифтов имеют разнообразные стили в пределах одного и того же шрифтового семейства. Обычно это жирный стиль (bold) или курсив (italic), часто встречается также стиль «жирный курсив» (bold italic), реже — капитель (малые прописные буквы — small-caps), а в ряде случаев — экстра-светлые/экстра-жирные или растянутые/сжатые версии.

Модуль «Шрифты» в CSS имеет больше свойств для указания специальных стилей (для шрифтов, которые поддерживают несколько вариантов), в частности, свойство font-variant имеет гораздо больше значений.

Навигация по сайту

Bert Bos, style activity lead
Copyright © 1994–2021 W3C ® Privacy policy

Created 17 Jan 2001;
Last updated Ср 06 янв 2021 05:40:49

Источник