CSS style (font)

CSS Fonts

• CSS text
• CSS Links

CSS font Properties Define the font family, size, bold, style (such as italic), and distortion (such as small capital letters) of text.

CSS Font Series

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

• Universal Font Family-a combination of font systems with similar appearance (e.g. "Serif" or "monospace")
• Specific font family-specific font family (e.g. "times" or "Courier")

In addition to a variety of specific font families, CSS defines 5 universal font families:

• Serif fonts
• Sans-serif fonts
• monospace fonts
• Cursive fonts
• Fantasy Fonts

If you need more information about the font family, please read the CSS font family.

Specify font family

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

Use the Universal font family

If you want the document to use a Sans-serif font, but you don't care what font it is, here's an appropriate statement:

body {Font-family:sans-serif;}

Try it yourself.

This allows the user agent to select a font (such as Helvetica) from the Sans-serif font family and apply it to the BODY element. Because of inheritance, this font selection is also applied to all elements contained in the BODY element, unless a more specific selector overrides it.

Specify font family

In addition to using a generic font family, you can also set more specific fonts through the Font-family property.

The following example sets the Georgia font for all H1 elements:

h1 {Font-family:georgia;}

Try it yourself.

Such a rule can also produce another problem, and if the Georgia font is not installed on the user agent, the H1 element can only be displayed using the user agent's default font.

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

serif;}

Try it yourself.

If the reader does not have Georgia installed, but the Times font (a font in the serif font family) is installed, the user agent may use the times for the H1 element. Although the Times and Georgia do not exactly match, they are at least close enough.

Therefore, we recommend that you provide a generic font family in all font-family rules. This provides a way to select a candidate font when the user agent is unable to provide a specific font that matches the rule.

If you are familiar with fonts, you can also specify a series of similar fonts for a given element. To do this, you need to sort these fonts in order of precedence and then concatenate them with commas:

p {font-family:times, Timesnr, ' New Century schoolbook ',     Georgia, ' new York ', serif;}

Try it yourself.

Based on this list, the user agent looks for these fonts in the order listed. If all the fonts listed are not available, simply select one of the available serif fonts.

Use quotation marks

You may have noticed that single quotes are used in the example above. Enclose the font-family declaration only if there is one or more spaces in the font name (such as New York), or if the font name includes symbols such as # or $.

Either single or double quotation marks are acceptable. However, if you put a font-family property in the Style property of the HTML, you need to use the kind of quotation marks that the property itself does not use:

<p style= "Font-family:times, Timesnr, ' New Century schoolbook ', Georgia, ' new York ', serif;" >...</p>

Try it yourself.

font Style

The Font-style attribute is most commonly used to specify italic text.

This property has three values:

• Normal-text is displayed normally
• Italic-Text italic display
• Oblique-Text skew display

Example

p.normal {font-style:normal;} p.italic {font-style:italic;} P.oblique {font-style:oblique;}

Try it yourself.

the difference between italic and oblique

Font-style is very simple: used to select between normal text, italic text, and oblique text. The only thing that is somewhat complicated is the distinction between italic text and oblique text.

Italic (italic) is a simple font style that has minor changes to the structure of each letter to reflect the changing appearance. In contrast, italic (oblique) text is an oblique version of normal vertical text.

Typically, italic and oblique text look exactly the same in a Web browser.

Font Warp

The Font-variant property allows you to set small caps.

Small caps are not general uppercase letters, nor lowercase letters, which use uppercase letters of different sizes.

Example

p {font-variant:small-caps;}

Try it yourself.

Font Bold

The Font-weight property sets the thickness of the text.

Use the Bold keyword to set the text to bold.

The Keyword 100 ~ 900 specifies a 9-level bold degree for the font. If a font has these bold levels built into it, these numbers are mapped directly to a predefined level, 100 corresponds to the finest font distortion, and 900 corresponds to the most coarse font distortion. The number 400 is equivalent to normal, while 700 is equivalent to bold.

If you set the element's bold to bolder, the browser sets a font that is thicker than the inherited values. In contrast, the keyword lighter will cause the browser to move the bold down rather than move up.

Example

p.normal {font-weight:normal;} P.thick {font-weight:bold;} P.thicker {font-weight:900;}

Try it yourself.

Font Size

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

The ability to manage the size of text is important in the field of web design. However, you should not make the paragraph look like a caption by resizing the text, or make the title look like a paragraph.

Always use the correct HTML headings, such as use

The Font-size value can be an absolute or relative value.

Absolute:

• Sets the text to the specified size
• Do not allow users to change the size of text in all browsers (not for usability)
• Absolute size is useful when determining the physical size of the output

Relative size:

• To set the size relative to the surrounding elements
• Allow users to change text size in the browser

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

use the image to set the font size

By setting the text size in pixels, you can have full control over the text size:

Example

h1 {font-size:60px;} h2 {font-size:40px;} p {font-size:14px;}

Try it yourself.

In Firefox, Chrome, and Safari, you can readjust the text size of the above example, but not in Internet Explorer.

Although the size of the text can be resized through the browser's zoom tool, this is actually an adjustment to the entire page, not just text.

use em to set font size

Many developers use EM units instead of pixels to avoid problems with text that cannot be adjusted in Internet Explorer.

It is recommended to use EM size units.

1em equals the current font size. If the font-size of an element is 16 pixels, then for that element, 1em is equal to 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 1em is 16 pixels.

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

(Note: 16 equals the default font size of the parent element, assuming that the parent element is font-size to 20px, then the formula should be changed to:pixels/20=em)

Example

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

Try it yourself.

In the example above, the text size in the EM unit is the same as the text in pixels in the previous example. However, if you use EM units, you can adjust the text size in all browsers.

Unfortunately, there are still problems in IE. When you resize the text, it is larger or smaller than the normal size.

combined use percent and EM

A scheme that works in all browsers is to set the default Font-size value for the BODY element (parent element) as a percentage:

Example

body {font-size:100%;}h1 {font-size:3.75em;} h2 {font-size:2.5em;} p {font-size:0.875em;}

Try it yourself.

Our code is very effective. In all browsers, you can display the same text size and allow all browsers to scale the size of the text.

CSS Font instances:

Set font for text

This example shows how to set the text font.

Set Font size

This example shows how to set the font size.

Set font style

This example shows how to set the font style.

Set the variant of the font

This example shows how to set the variant of a font.

Set the weight of a font

This example shows how to set the weight of a font.

All font attributes within a declaration

This example demonstrates how to use the shorthand property to set a font property within a declaration

CSS style (font)