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

Editor to share with you what the commonly used CSS font style attributes are, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

1. CSS font style properties 1.1 font-size font size

The font-size property is used to set the font size, and its value can be in either relative or absolute length units.

Font-size: 14px; / / px absolute pixel unit font-size: 1mm; / / relative parent element font size / / Note: each element must have a font size. If it is not stated, the font size of the parent element is directly used / / if there is no parent element (html), the base font size is used. The base font size is the font size set in the browser.

14px+ is now widely used in web pages.

Try to use even numeric font sizes. Older browsers such as ie6 support odd numbers and there will be bug.

Among them, the relative length unit is more commonly used. It is recommended to use the pixel unit px, while the absolute length unit is rarely used. The details are as follows:

1.2 font-family Font Styl

The font-family property is used to set the font. The commonly used fonts in web pages are Song style, Microsoft Yahei, boldface, and so on. For example, if you set the font of all paragraph text in a web page to Microsoft Yahei, you can use the following CSS style code:

P {font-family: "Microsoft Acer";} / Note: you can specify multiple fonts at the same time, separated by commas, indicating that if the browser does not support the first font, it will try the next font until the appropriate font is found.

The various fonts must be separated by commas in English.

Chinese fonts need quotation marks in English, while English fonts generally do not need quotation marks. When you need to set an English font, the English font name must precede the Chinese font name.

If the font name contains symbols such as spaces, #, $, etc., the font must be enclosed in single or double quotes in English, such as font-family: "Times New Roman";.

Try to use the system default font to ensure that it can be displayed correctly in any user's browser.

Generally speaking, the most common font used in web pages is arial, which was developed by Jobs.

1.3 CSS Unicode fonts

It is OK to set the font name in CSS and write it directly in Chinese. However, garbled errors will occur when the file encodings (GB2312, UTF-8, etc.) do not match. Xp system does not support Chinese similar to Microsoft Accor.

Plan 1: you can use English instead. For example, font-family: "Microsoft Yahei".

Scheme 2: using Unicode encoding to write font names directly in CSS can avoid these errors. Use Unicode to write Chinese font names, the browser can correctly parse. Font-family: "\ 5FAE\ 8F6F\ 96C5\ 9ED1", which means that the font is set to "Microsoft Yahei".

You can use escape () to test what font it belongs to.

English name Unicode encodes SimSun\ 5B8B\ 4F53 New Song NSimSun\ 65B0\ 5B8B\ 4F53 boldface SimHei\ 9ED1\ 4F53 Microsoft Yahei Microsoft YaHei\ 5FAE\ 8F6F\ 96C5\ 9ED1 italic GB2312KaiTiGB2312\ 6977\ 4F53_GB2312 official letter LiSu\ 96B6\ 4E66 Young Circle YouYuan\ 5E7C\ 5706 Chinese Black STXihei\ 534E\ 6587\ 7EC6\ 9ED1 detail MingLiU\ 7EC6\ 660E\ 4F53

Note: in order to take care of the font installation of different computers, we try to use only Song style and Microsoft Yahei Chinese fonts.

1.4 font-weight font weight

Font bold can be implemented using CSS in addition to b and strong tags, but CSS has no semantics.

Extension: strong element, bold by default. Strong elements represent important things that cannot be ignored

Attribute values function font-weight:normal (400) No bold bold (700) bold 100mm 900 (integer multiple of 100) the larger the font, the thicker the font.

Note: the css number 400 is equivalent to normal and 700 is equivalent to bold. But we prefer to express it in numbers.

1.5 font-style font style

Font tilting can be achieved using CSS in addition to I and em tags, but CSS has no semantics.

Extension: the language expressed by element I: this piece of text is a special text, which is usually used to represent an icon (icon).

Property values use font-style:normal default values, browsers display standard font styles, italic browsers display italic font styles, oblique browsers display slanted font styles

Note: usually we seldom add italics to the text, but like to change the italics label (em,i) to the normal mode.

1.6 font text attribute Sketch (key)

The font property is used to comprehensively set font styles, and its basic syntax format is as follows:

Selector {font: font-style font-weight font-size/line-height font-family;} / / font:style weight size/ line high font type, size and type cannot be omitted

When using the font attribute, it must be written in the order in the above syntax format, and the order cannot be changed, and the attributes are separated by spaces.

Note: properties that do not need to be set can be omitted (default), but the font-size and font-family properties must be retained, otherwise the font property will not work.

1.7 letter-spacing font spacing

Letter-spacing is the distance between text and text. The value can be negative. The default value is normal.

P {letter-spacing: 2px;} 1.8 text-decoration text modifier: add lines

Line-through: passing through the text to indicate adding a line in the middle

Overline: add a line to it (use less)

Underline: add a line below

None: means there is no line. Remove the line.

Extension: del and s elements default to the middle line; del element represents obsolete and wrong content; s element represents out-of-date content; an element defaults to the following line, indicating hyperlink

1.9 text-indent first line text indentation

Px: how many pixels are indented

Em: indent several fonts (the indentation width values are the same in both Chinese and English)

2.0 line-height text Line height / Vertical Center

The height of each line of text, and the higher the value, the greater the value of each line of text.

Set the line height to the container height, and you can center the single line of text vertically. The container height is as follows: height:50px

The row height can be set to a pure number, indicating the font size relative to the current element. For example, the value is 1.5: the line height is 1.5 times that of the text, so that when the text is enlarged, the line height becomes larger, and there is no text overlap.

2.1 letter-spacing text Gap

Em: several font widths at intervals for each text

Px: a few pixels apart for each text

2.2 horizontal arrangement of text-align text, line boxes and row block boxes

Left: left, default left arrangement

Center: Center

Right: keep right

2.3 minimum and maximum width of the web page

Set in the css of the body element

Min-width: 1000px minimum pixel

Max-width: 1500px maximum pixel

These are all the contents of this article entitled "what are the attributes of commonly used CSS font styles?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more 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.