CSS font property_html/css_WEB-ITnose

CSS font:

属性	描述
font	简写属性，把所有针对字体的属性设置在一个声明中。
font-family	设置字体系列。
font-size	设置字体的尺寸。
font-size-adjust	当首选字体不可用时，对替换字体进行智能缩放。 （CSS2.1 已删除该属性。）
font-stretch	对字体进行水平拉伸。（CSS2.1 已删除该属性。）
font-style	设置字体风格。
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	设置字体的粗细。

Properties

Description

font

Abbreviation attribute, set all font-specific attributes in a statement.

font-family

Set font family.

font-size

Set the font size.

font-size-adjust

Smart scaling of replacement fonts when the preferred font is unavailable . (This attribute has been removed in CSS2.1.)

font-stretch

Stretch the font horizontally. (CSS2.1 has removed this attribute.)

font-style

Set font style.

font-variant

Display text in small caps or normal font.

font-weight

Set the weight of the font.

1. Font family:

(1) In CSS, there are two different types of font family names:

  <1> Universal font family - A combination of font systems with a similar appearance (such as "Serif" or "Monospace"); - Specific font family (such as "Times" or "Courier");

(2) CSS also defines 5 general font families:   <1>Serif

Fonts (serif fonts)

These fonts are proportional and have upper and lower dashes. A character is proportional if all characters in a font have different widths according to their different sizes. Examples of serif fonts include Times, Georgia, and New Century Schoolbook. For Chinese, Songti is a serif font, and for Chinese, Songti is a serif font, and in English, the commonly used serif font is Times New Roman.   <2>Sans-serif fonts

These fonts are proportional and have no upper and lower dashes. Examples of Sans-serif fonts include Helvetica, Geneva, Verdana, Arial, or Univers. For Chinese, Heiti, Youyuan, and Yahei are sans serif fonts. In English, the commonly used sans serif font is Arial.

  <3>Monospace

Font (fixed width)

Monospace font is not proportional. They are often used to simulate typewritten text, the output of older dot-matrix printers, and even older video display terminals. With these fonts, each character must be exactly the same width, regardless of whether there are dashes above or below. Examples of Monospace fonts include Courier, Courier New, and Andale Mono. & lt; 4 & gt; cursive Font (cursive)

These fonts try to imitate human handwriting. Typically, they consist primarily of curves and stroke decorations not found in Serif fonts. For example, a capital A may have a small curve at the bottom of its left leg, or it may consist entirely of a curlicue part and a small curved part. Examples of Cursive fonts include Zapf Chancery, Author, and Comic Sans.

                                                                                                                                                                                                                                                               Easily plan it into any other font family. Such fonts include Western, Woodblock, and Klingon.

1. Specify the font family: font-family attribute (1) Function: Specify the font family of the element. The value of the font-family attribute is used for a certain A precedence list of font family names and/or class family names for elements. The browser will use the first value it recognizes. (2) Browser support: All major browsers support the font-family attribute.

Ps: It is recommended to provide a common font family in all font-family rules.

2. Font style: font-style attribute

(1) Function: Define the style of the font;

(2) Possible values:

Value

td>

Description

normal

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

Default value. The browser displays a standard font style.

italic

The browser will display an italic font style.

oblique

The browser will display an oblique font style.

inherit

Specifies that the font style should be inherited from the parent element.

(3) The difference between italic and oblique:

Italic (italic) is a simple font style with some small changes to the structure of each letter to reflect the changing appearance. In contrast, oblique text is a slanted version of normal vertical text.

Normally, italic and oblique text look exactly the same in web browsers.

(4) Browser support: All major browsers support the font-style attribute.

3. Font deformation: font-variant attribute

(1) Function: Set small caps;

(2) Possible values :

值	描述
normal	默认值。浏览器会显示一个标准的字体。
small-caps	浏览器会显示小型大写字母的字体。
inherit	规定应该从父元素继承 font-variant 属性的值。

Value

Description

td>

normal

Default value. The browser will display a standard font.

small-caps

The browser will display small caps fonts.

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100-900	定义由粗到细的字符。400 等同 normal，700 等同 bold。
inherit	规定应该从父元素继承字体的粗细。

inherit

Specifies that the value of the font-variant attribute should be inherited from the parent element.

(3) Browser support: All major browsers support the font-variant attribute.

4. Font bolding: font-weight attribute

值	描述
xx-small x-small small medium large x-large xx-large	把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。 默认值：medium。
smaller	把 font-size 设置为比父元素更小的尺寸。
larger	把 font-size 设置为比父元素更大的尺寸。
length	把 font-size 设置为一个固定的值。
%	把 font-size 设置为基于父元素的一个百分比值。
inherit	规定应该从父元素继承字体尺寸。

(1) Function: Set the thickness of the text; (2) Possible values :

Value	Description td>
normal	Default value. Defines standard characters.
bold	Define bold characters.
bolder	Defines bolder characters.
lighter	Defines lighter characters.
100-900	Define characters from thick to thin. 400 is equivalent to normal, 700 is equivalent to bold.
inherit	Specifies that the font weight should be inherited from the parent element.

(3) Browser support: All major browsers support the font-weight attribute. 5. Font size: font-size attribute (1) Function: Set the size of the text. In fact, it sets the height of the character box in the font; Actual character glyphs may be taller or shorter than these boxes (usually shorter); (2) Possible values:

value	Description
xx-small x-small small medium large x-large xx-large td>	Set the font size to different sizes, from xx-small to xx-large. Default value: medium.
smaller	Set font-size to a smaller size than the parent element.
larger	Set font-size to a larger size than the parent element.
length	Set font-size to a fixed value.
%	Set font-size to a percentage value based on the parent element.
inherit	Specifies that the font size should be inherited from the parent element.

(3) Compare PX and EM:

& lt; 1 & gt; Use pixels to set font size:

Set text size through pixels, you can fully control the text size; in Firefox; The text in the example above can be resized in , Chrome, and Safari, but not in Internet Explorer. While text can be resized through your browser's zoom tools, this is actually an adjustment to the entire page, not just the text.

& lt; 2 & gt; use EM to set the font size:

In order to avoid the problem that the text cannot be adjusted in the Internet Explorer, you can use the EM unit instead of Pixels. 1em is equal to the current font size. If an element's font-size is 16 pixels, then 1em equals 16 pixels for that element. When setting the font size, the em value changes relative to the font size of the parent element.

#You can use the following formula to convert pixels to em:

                        >/16=em (Note: 16 is equal to the default font size of the parent element. Assume that the font-size of the parent element is 20px, then the formula needs to be changed to: pixels/20=em)

(4) Comprehensive use of em and percentage: implemented in all browsers browser, can display the same text size and allow all browsers to scale the text size. Example: