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

This article mainly introduces HTML fonts and CSS fonts, the text is very detailed, has a certain reference value, interested friends must read!

font terminology

First, let's discuss some of the most common and commonly used font types supported by modern browsers.

Serif font type

Serif typefaces are characterized by extra detail at the end of letters.

At the end of the main strokes of the character, there are small thick strokes called serifs.

Serif fonts are traditionally widely used in printed matter because they are considered readable for longer text paragraphs. But they don't always show up well on the screen.

Serif fonts are considered one of the most classic, elegant and traditional fonts you can use.

sans serif font type

This type of font creates a clean design look while being very readable and clear.

This font has a straight head on each letter and no strokes on the edges, making the characters look clear and flat with clean lines.

Sans-serif fonts are considered new, simple, modern, and a more readable option for high-resolution computer screens.

Monospace font type

With this font type, each letter has the same fixed width, and the spacing between letters is equal.

For the font types we discussed earlier, each letter has a different width.

Therefore, for monospaced fonts, all letters have the same width. This allows the text to align well and be easy to follow, giving the design a clean look and mechanical feel.

There are two more generic font types available, fantasy and cursive, but the most widely used fonts are those mentioned above.

How to choose fonts for your website-font names

Now that we've covered the basics of font terminology and description, it's time to look at the many different font styles in each family.

Here are some common styles in each font family:

serif fonts

Georgia

Times

Times New Roman

Bodoni

Garamond

Palatino

ITC Clearface

Plantin

Freight Text

Didot

American Typewriter

sans serif typeface

Arial

Verdana

Helvetica

Geneva

Tahoma

Trebuchet MS

Open Sans

Liberation Sans

Impact

monospaced font

Courier

MS Courier New

Monaco

Lucinda Console

Andalé Mono

Menlo

Consolas

How to use font-family properties

In CSS, this font-family property defines the appearance and rendering of a particular font for an element and its text content.

The syntax for the font-family attribute is:

element {font-family: value;}

We write propty, font-family followed by a colon: , a space, a value, and finally a semicolon ending the specification;.

We have to set the attributes we want to locate and assign the values we want.

How to set CSS fonts

Suppose we have the following HTML:

CSS Fonts HTML Font - CSS Font Family

I am a paragraph

If no style is applied and no value is explicitly set for the font-family property, the browser displays headings and paragraphs in the font of its choice.

The default standard font used in Google Chrome is Times New Roman serif font.

The results are as follows:

There are several ways to set different fonts and specify the font we want.

When it comes to font selection--and this is the value section--it's worth noting that there are a limited number of font sets available for websites. They will get fonts installed on the user's computer.

The browser displays fonts only if fonts are installed on the user's computer.

So let's look at how to set fonts in CSS.

How to use common font family names

In this case, the name is a keyword and includes one of the font categories mentioned earlier (serif, sans serif, equal width).

It looks like this:

p { font-family: serif; }

This sets the font to a universal serif font.

How to use a specific font family name p { font-family: Times,serif; }

This rule sets Times to the desired font and serif to the general fallback option in case the first option is not installed on the user's computer.

If the name contains any spaces, it needs to be enclosed in quotation marks.

p {font-family: "Courier New",monospace;}

This Courier New will set the font to and add monospace to the backup.

If the font we specify is not one of the generic names (serif, sans-serif), we need to give the browser a fallback.

How to use font stacks

In this case, the font-family attribute has multiple values.

It is a prioritized, comma-separated list of font family names that can be applied to text, indicating that all fonts are alternative fonts. This maximizes browser and operating system compatibility.

The list is prioritized from left to right and highest to lowest.

p { font-family: "Lucida Console", Courier, monospace;}

By applying multiple font family names, you can create an order of precedence. Let's start with the font we want.

If the user does not have the first option installed on their computer or the browser does not support it, the browser moves to the second font and uses that font. If that font is also unavailable, move to a third font, and so on.

We can list any number of fonts, but the best practice is to list three or four.

If all else fails, there will always be a generic font listed as the last option fallback mechanism.

From the listed groups, the browser must support at least one option, and the generic name guarantees that something in the desired font family will be rendered.

p { font-family: Georgia, "Times New Roman", Times, serif;

The fonts you list are called font stacks.

The browser will look for Georgia first. If installed, the browser displays the font. Otherwise it looks for Times New Roman. If this is also not available, it will resort to displaying generic default serif family fonts.

The above is "HTML fonts and CSS fonts what" all the content of this article, thank you for reading! Hope to share the content to help everyone, more relevant knowledge, welcome to pay attention to 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.