Font and size in CSS styles

1. The introduction of external font files in CSS:

@font-face is listed as a new feature of CSS3, but it is not a fresh technology, it first appeared in CSS2 's specification definition, but was deleted in CSS2.1 and is now officially included in CSS3. Currently the main browser (IE 4+/firefox 3.5+/chrome 1+/safari 3.1+/opera + +) can support this property, so there is no need to worry about browser compatibility issues.

@font-face allows you to use fonts that are not installed on your computer in your Web pages to completely get rid of the security font restrictions. Simply install the font pack on the server, and when the user loads the page, the font pack is automatically downloaded to the user's machine, ensuring that the font is rendered correctly.

Web designers must not be satisfied with using these security fonts, how to use beautiful fonts, and can be in the normal user's browser is rendered correctly? The answer is: Use @font-face

{font-family: "Ancientwar"; src: url (' Style/css/fonts/ancientwar.ttf ');}

2, figuring out the relationship between the font pt and PX in PS and the conversion:

1) The following are our common units

Px:pixel, pixels, the smallest unit displayed on the screen for web design, intuitive and convenient;
Pt:point, is a standard length unit, 1pt=1/72 inches, for the printing industry, very simple to use;
EM: That is,%, in CSS, 1em=100%, is a ratio that combines CSS inheritance relationships with flexibility.

2) The formula for PX and PT conversions:

Pt=px Times 3/4.

such as 12pxx3/4=9pt size.

Formulas for PX and EM conversions:

The method for PX-to-em is similar, that is, em=16 times px, which means 1.5em=1.5x16=24px.

3, what is a secure font (in Web development, you should try to use a secure font, which is a highly versatile font)

The concept of safe fonts, perhaps a lot of people are not very familiar with, we first give an example:

Font-family:arial, Helvetica, Sans-serif;

This definition of font (font-family) is a secure font. Each operating system has its own default installed font, and the browser only displays the fonts installed in the operating system normally. The different operating systems installed by default fonts are not identical, and some even the name is not the same, in this case, we must define a secure font, so that the font in all browsers can display properly.

In the above definition of font-family, we choose Arial as the preferred font (note: Arial font is the most commonly used sans serif font, is also the default font of Windows, when the font is very small is not easy to read), but the Apple system does not have this font, So we chose Helvetica (similar to Arial) as the second alternative font, and finally we chose Sans-serif as the third alternative font, if in a system that has neither Arial nor Helvetica, then the browser will use the default Sans-serif font to render text. In this way, we guarantee to a large extent that visitors with different operating systems can see the same (or at least similar) page text.

In addition to Arial, Common Security fonts include:

• Verdana font, which is one of Microsoft's core fonts, was developed specifically for screen display. It is widely used, large in width and easy to read, and is the clearest font in the display. CSS notation: Font-family:verdana, Geneva, Sans-serif;
• Times New Roman Font, which is the most commonly used serif font, is the default font for the browser. The legibility of small words is also very poor. CSS notation: font-family: ' Times New Roman ', times, serif;

4. CSS font name (five font families in CSS{font-family:serif,sans-serif,fantasy,cursive})

1) some commonly used fonts

Song Body SimSun

Blackbody Simhei

Microsoft Black Microsoft Yahei

Microsoft is in bold Microsoft Jhenghei

New song Body Nsimsun

New Fine Ming body PMingLiU

Fine Ming Body MingLiU

Standard Italic DFKAI-SB

Imitation Fangsong

Italic Kaiti

Imitation _gb2312 fangsong_gb2312

Italic _gb2312 kaiti_gb2312

2) some fonts for Windows

New detail: PMingLiU

Detail: MingLiU

Target: DFKAI-SB

Blackbody: Simhei

New song body: Nsimsun

Imitation: Fangsong

Italics: Kaiti

Imitation _gb2312:fangsong_gb2312

Italic _gb2312:kaiti_gb2312

Micro-Black: Microsoft Jhenghei

Microsoft Elegance Blackbody: Microsoft Yahei

Some of the things that can be produced by office:

Official script: Lisu

Young Circle: Youyuan

Chinese fine Black: Stxihei

Chinese Italic: Stkaiti

XXFarEastFont-Arial: Stsong

XXFarEastFont-Sung: Stzhongsong

XXFarEastFont-Imitation: Stfangsong

Founder Shu Body: Fzshuti

Founder Arial: Fzyaoti

Chinese Choi Wan: Stcaiyun

Chinese Amber: Sthupo

Chinese script: Stliti

XXFarEastFont-Xingkai: Stxingkai

Chinese New Wei: Stxinwei

3) English font

Arial

Helvetica

Tahoma

Verdana

Lucida Grande

Times New Roman

Georgia

PMingLiU

Impact

Book Antiqua

Century Gothic

Courier New

Sans-serif

Font and size in CSS styles