Font settings in the font family and CSS

Source: Internet
Author: User

CSS defines five general font Series

    • Serif font
    • Sans-serif font
    • Monospace font
    • Cursive font
    • Fantasy font
Serif font
These fonts are proportional to each other, and there are upper and lower short lines. If all characters in the font have different widths based on their different sizes, the character is proportional. For example, the width of lowercase I and lowercase m is different. Upper and Lower short lines are the decoration of the stroke ends of each character, such as the short lines at the top and bottom of lower case l, or the short lines at the bottom of upper case A and lower case. Examples of serif fonts include times, Georgia, and new century schoolbook.
Sans-serif font
These fonts are proportional, and there is no short-term. Examples of sans-serif fonts include Helvetica, Geneva, verdana, Arial, or Univers.
Monospace font s
The monospace font is not proportional. They are usually used to simulate the output of text typed by typewriters, old-fashioned dot matrix printers, and even older video display terminals. With these fonts, the width of each character must be identical, so the lower-case I and lower-case m have the same width. These fonts may be up or down or not. If the character width of a font is the same, it is classified as a monospace font, regardless of whether there is a short line or not. Examples of monospace fonts include courier, Courier New, and Andale mono.
Cursive font
These fonts try to mimic human handwriting. Generally, they are mainly composed of curves and strokes that are not in the serif font. For example, capital A may have a small bend at the bottom of its left leg, or it may be completely composed of a floral part and a small curved part. Examples of the cursive font include zafc chancery, author, And Comic Sans.
Fantasy font
These fonts cannot be defined by any feature. The only difference is that we cannot easily plan them into any other font family. Such fonts include Western, woodblock, and Klingon.

Theoretically, any font series installed by the user will fall into the above generic series, but this may not actually be the case, but there are few exceptions (if any. S

----------- The above is derived from w3school

 

There are two types of Western letter systems: serif and sans serif.

Serif is a lined font, which means that there is additional decoration at the beginning and end of the stroke, and the stroke width will be different. On the contrary, sans serif does not have these extra decorations, and the stroke width is similar.

The serif font is easy to recognize. It emphasizes the start and end of each letter stroke, so it is easy to recognize and sans serif is eye-catching. In the case of text reading, serif fonts are suitable for typographical layout, which is easy to recognize for line feed reading and avoids reading errors between lines.

Sans serif emphasizes every letter and serif emphasizes a word.

The in the Chinese font is the most standard serif font, which has obvious characteristics. The font structure is also consistent with that of the handwritten manger. Therefore, has always been used as one of the most appropriate text fonts. However, due to the comparison of horizontal and vertical strokes, the horizontal line is weakened when watching in the distance, resulting in a decline in recognition.

---------- Reference from Baidu encyclopedia

Sans serif (non-lined font) is more suitable for titles, emphasizing,

Serif is more suitable for text.

------------

Specifically, which fonts are sans serif (non-lined fonts) and serif (serif fonts) can be found in the Dreamweaver CSS prompt box, and other online searches.

------------

CSS derived from QQ.com is as follows:

Body{Margin:0;Padding:0 0 12px 0;Font-size:12px;Line-height:22px;Font-family:"", "Arial narrow", Helvetica;Background:# Fff;}

It is not hard to see that the font size is 12 pixels, the row height is 22 pixels, And the font is Al, Arial, narrow, and Helvetica.

 

CSS derived from taobao.com is as follows:

 
Body{Font:12px/1.5 tahoma, Arial, \ 5b8b \ 4f53;}

This section of CSS indicates the font size: 12 pixels, the row height is 1.5 times, that is, 150%, 1.5*12 = 18 pixels. Font: tahoma, Arial, \ 5b8b \ 4f53, here \ 5b8b \ 4f53 is the Chinese character ""Unicode encoding. simsun is not used because some versions of Firefox and opera do not support simsun writing.

 

The abbreviation of font, which can be written in the following order s

    • Font-style
    • Font-variant
    • Font-weight
    • Font-size/line-height
    • Font-family
 
P. ex1{Font:Italic Arial, sans-serif;}
P. ex2{Font:Italic bold 12px/20px Arial, sans-serif;}


English font and Unicode table

Platform

Chinese name

English name

Unicode

Unicode 2

Windows

New body

Pmingliu

\ 65b0 \ 7ec6 \ 660e \ 4f53

& # X65b0; & # x7ec6; & # x660e; & # x4f53;

Fine body

Mingliu

\ 7ec6 \ 660e \ 4f53

& # X7ec6; & # x660e; & # x4f53;

Standard entity

Dfkai-sb

\ 6807 \ 6977 \ 4f53

& # X6807; & # x6977; & # x4f53;

Simhei

Simhei

\ 9ed1 \ 4f53

& # X9ed1; & # x4f53;

Simsun

\ 5b8b \ 4f53

& # X5b8b; & # x4f53;

Xin

Nsimsun

\ 65b0 \ 5b8b \ 4f53

& # X65b0; & # x5b8b; & # x4f53;

Imitation Song

Fangsong

\ 4eff \ 5b8b

& # X4eff; & # x5b8b;

Body

Kaiti

\ 6977 \ 4f53

& # X6977; & # x4f53;

Imitation Song _ gb2312

Fangsong_gb2312

\ 4eff \ 5b8b_gb2312

& # X4eff; & # x5b8b; _ gb2312;

_ Gb2312

Kaiti_gb2312

\ 6977 \ 4f53_gb2312

& # X6977; & # x4f53; _ gb2312;

Microsoft is in bold

Microsoft jhenghei

\ 5fae \ x8f6f \ 6b63 \ 9ed1 \ 4f53

& # X5fae; & # x8f6f; & # x6b63; & # x9ed1; & # x4f53;

Microsoft yahei

\ 5fae \ 8f6f \ 96c5 \ 9ed1

& # X5fae; & # x8f6f; & # x96c5; & # x9ed1;

Mac OS

 

Stheiti light [stxihei]

\ 534e \ 6587 \ 7ec6 \ 9ed1

& # X534e; & # x6587; & # x7ec6; & # x9ed1;

Stheiti

\ 534e \ 6587 \ 9ed1 \ 4f53

& # X534e; & # x6587; & # x9ed1; & # x4f53;

Stkaiti

\ 534e \ 6587 \ 6977 \ 4f53

& # X534e; & # x6587; & # x6977; & # x4f53;

Stsong

\ 534e \ 6587 \ 5b8b \ 4f53

& # X534e; & # x6587; & # x5b8b; & # x4f53;

Stfangsong

\ 534e \ 6587 \ 4eff \ 5b8b

& # X534e; & # x6587; & # x4eff; & # x5b8b;

Li pro

Pro lihei pro Medium

\ 534e \ 6587 \ 7ec6 \ 9ed1 pro

& # X4e3d; & # x9ed1; Pro

Lisong pro

Lisong pro light

\ 4e3d \ 5b8b pro

& # X4e3d; & # x5b8b; Pro

Standard entity

Biaukai

\ 6807 \ 6977 \ 4f53

& # X6807; & # x6977; & # x4f53;

Apple Lili black

Apple ligothic Medium

\ 82f9 \ 679c \ 4e3d \ 4e2d \ 9ed1

& # X82f9; & # x679c; & # x4e3d; & # x4e2d; & # x9ed1;

Apple lixisong

Apple lisung light

\ 82f9 \ 679c \ 4e3d \ 7ec6 \ 5b8b

& # X82f9; & # x679c; & # x4e3d; & # x7ec6; & # x5b8b;

Office

 

Shu

Lisu

\ 96b6 \ 4e66

& # X96b6; & # x4e66;

Youyuan

Youyuan

\ 5e7c/5706

& # X5e7c; & # x5706;

Stxihei

\ 534e \ 6587 \ 7ec6 \ 9ed1

& # X534e; & # x6587; & # x7ec6; & # x9ed1;

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.