Shulou(Shulou.com)06/01 Report--

This article mainly introduces CSS how to define the font style of the text, the article is very detailed, has a certain reference value, interested friends must read it!

CSS font

The CSS font properties define the font family, size, bold, style (such as italics) and deformations (such as small uppercase letters) of the text.

CSS font family

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

Common font family-A combination of font systems with a similar appearance (such as "Serif" or "Monospace")

Specific font family-specific font family (such as "Times" or "Courier")

In addition to specific font families, CSS defines five general font families:

Serif font

Sans-serif font

Monospace font

Cursive font

Fantasy font

Specify font family

Use the font-family property to define the font family of the text.

Use a common font family: if you want the document to use a sans-serif font, but you don't care which font it is:

Body {font-family: sans-serif;}

Specify a font family: in addition to using a general font family, you can also set more specific fonts through the font-family property:

H2 {font-family: Georgia;}

Note: if the Georgia font is not installed on the user agent, you can only use the default font of the user agent to display H2 elements.

We can solve this problem by combining specific font names and generic font families:

H2 {font-family: Georgia, serif;}

In this way, if the reader does not have Georgia installed, but Times fonts (a font in the serif font family) are installed

It is possible for a user agent to use Times for H2 elements. Although Times and Georgia do not exactly match, they are at least close enough.

Therefore, we recommend that a common font family be provided in all font-family rules. This provides candidate fonts.

If you are familiar with fonts, you can also specify a series of similar fonts for a given element and connect them with commas:

P {font-family: Times, "New Century Schoolbook", Georgia, "New York", serif;}

According to this list, the user agent looks for these fonts in the order listed (in order of priority).

If all the fonts listed are not available, one of the available serif fonts is simply selected.

Tip: when there are one or more spaces in the font name (such as New York), you need to put quotation marks in the font-family declaration.

Either single or double quotation marks are acceptable. However, in the style attribute of HTML, it is important to note that single and double quotation marks cannot conflict:

...

Font style

The font-style attribute, which is most commonly used to specify italic text, has three values:

Normal-text is displayed normally

Italic-text display in italics

Oblique-text tilt display

The difference between italic and oblique

Font-style is very simple: it is used to choose between normal text, italic text, and oblique text.

The only thing that is a little complicated is to make clear the difference between italic text and oblique text.

Italic is a simple font style with minor changes to the structure of each letter to reflect the changed appearance.

In contrast, oblique text is a slanted version of normal vertical text.

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

Font deformation

The font-variant property can be set to small uppercase letters.

Small uppercase letters are not ordinary uppercase letters, nor are they lowercase letters. These letters are capitalized in different sizes.

P.normal {font-variant: normal} p.small {font-variant: small-caps} This is a paragraph

This is a paragraph

Bold font

The font-weight property sets the thickness of the text. Use the bold keyword to set the text to bold.

Keywords 100-900 specify 9 levels of boldness for fonts.

If these bold levels are built into a font, these numbers map directly to the predefined levels:

100 corresponds to the tiniest font distortion, while 900 corresponds to the thickest; the number 400 is equivalent to normal,700 and bold.

If you set the bold of the element to bolder, the browser sets a font that is bolder than the inherited value.

In contrast, the keyword lighter causes the browser to move the roughness down instead of up.

Font size

The font-size property sets the size of the text.

Note that you should not resize the text to make a paragraph look like a title, or make a title look like a paragraph.

Always use the correct HTML title, such as using-to mark the title, using the

To mark the paragraph.

The font-size value can be absolute or relative.

Absolute value:

Sets the text to the specified size

Users are not allowed to change the text size in all browsers (bad for usability)

Absolute size is useful when determining the physical size of the output

Relative size:

Set the size relative to the surrounding elements

Allows the user to resize the text in the browser

Note: if you do not specify a font size, the default size for plain text (such as paragraphs) is 16 pixels (16px=1em).

Use em to set the font size

Use pixels to set the font size: you can have complete control over the text size by setting the text size in pixels.

Use em to set font size: the W3C recommends using em units, which can be resized in all browsers.

1em is equal to the current font size.

If the font-size of an element is 16 pixels, then for that element, 1em equals 16 pixels.

When you set the font size, the value of em changes relative to the font size of the parent element.

The default text size in the browser is 16 pixels. So the default size of the 1em is 16 pixels.

You can use the following formula to convert pixels to em:pixels/16=em

Note: 16 is equal to the default font size of the parent element. Assuming that the parent element is 20px, the formula is: pixels/20=em.

H2 {font-size:3.75em;} / * 60px/16=3.75em * / h3 {font-size:2.5em;} / * 40px/16=2.5em * / p {font-size:0.875em;} / * 14px/16=0.875em * /

Combine percentage with EM

The solution that works in all browsers is to set the default font-size value as a percentage for the body element (parent element):

Body {font-size:100%;} h2 {font-size:3.75em;} h3 {font-size:2.5em;} p {font-size:0.875em;}

Note: in all browsers, you can display the same text size and allow all browsers to resize the text.

CSS font example:

P.ex1 {font: italic arial,sans-serif;} p.ex2 {font: italic bold 12px/30px arial,sans-serif;}

Note: this example shows how to use the shorthand property to set the font property within a declaration.

CSS font properties and description

Font: abbreviated attribute. The effect is to set all properties for the font in a declaration.

Font-family: sets the font family.

Font-size: sets the font size.

Font-size-adjust: smart scaling of alternate fonts when the preferred font is not available (CSS2.1 has removed this attribute)

Font-stretch: stretch the font horizontally (CSS2.1 has removed this attribute)

Font-style: sets the font style.

Font-variant: displays text in small uppercase fonts or normal fonts.

Font-weight: sets the weight of the font.

The above is all the content of the article "how CSS defines the font style of text". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.