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

This article introduces the knowledge of "how to set fonts to be compatible with all browsers". In the operation of practical cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Set the font (compatible with all browsers)

@ font-face {

Font-family:'iconfont'

Src:url ("fonts/iconfont/iconfont.eot")

Src:url ("fonts/iconfont/iconfont.eot?#iefix") format ("embedded-opentype")

Url ("fonts/iconfont/iconfont.ttf") format ("truetype")

Url ("fonts/iconfont/iconfont.woff") format ("woff")

Url ("fonts/iconfont/iconfont.svg#icomoon") format ("svg")

Font-weight:normal

Font-style:normal;}

@ font-face {font-family:name;src:url (url); sRules}

Description:

Name: font name

Url: specify OpenType fonts with absolute or relative addresses

SRules: style sheet definition

Sets the font embedded in the HTML document.

@ font-face {font-family:dreamy;font-weight:bold;src:url (http://www.example.com/font.eot);}

2. Div [class^ = "test"]

Sets the background color of only all div elements within the div whose class attribute value begins with "test":

Div [class^ = "test"]

{

Background:#ffff00

}

3. [class*= "abc"]

The value of class contains the element of "abc".

Div [class*= "abc"]

Represents only the style of class=abc in div

4. Specify the last p-tag background style

P:last-child {background:#ff0000;}

5. Display abc (CSS3) when the minimum resolution of the display device is 768 and the maximum is 979.

@ media (min-width:768px) and (max-width:979px) {

.abc {}

}

Ie6-ie9 support

@ mediascreenand (min-width:1201px) {

. y-row {

Width:1200px

Border:1pxsolid#333;height:300px

Min-width:1200px;}}

@ mediascreenand (max-width:1200px) {

. y-row {

Width:900px

Border:1pxsolid#333;height:300px

Min-width:900px;}}

6. Div > span (not supported by IE6)

Div > span {Font 12px}

The span style of the son in the div tag is the font 12px. the grandson span in the div does not work and has priority.

7. Font Shadow

.blue {background:#01dbff;text-shadow:2px2px2px#09a5ef;}

Shadow font left distance lower distance shadow distance range shadow color

Font background + font shadow

8. Box Shadow

-moz-border-radius:0px5px5px0px;-webkit-border-radius:0px5px5px0px;border-radius:0px5px5px0px;-moz-box-shadow:0px0px1px#fffinset;-webkit-box-shadow:0px0px1px#fffinset;box-shadow:0px0px1px#fffinset

-moz represents the private properties of the firefox browser

-ms represents the private properties of the IE browser

-webkit represents the private attributes of chrome and safari

-o stands for opera Apple browser

Set up

Border-radius:0px5px5px0px; represents the upper-right and lower-right fillet of the border is 5px

Box-shadow:0px0px1px#fffinset; represents the border spacing 0 to the left, 0 to the top 0 and 1px shadow range shadow color to white

Inset represents shadow within the box without inset representing shadow outside the box

Note: box-shadow:0px0px1px#fff

When the first value is 0, the shadow of the left and right border is in the 1px range.

The first value is a positive integer that represents the shadow of the left border

The first value is a negative integer that represents the shadow of the right border

The same principle

The second value 0 represents the shadow of the upper and lower borders.

The second value is a positive integer indicating how far the 1px shadow is from the upper border.

The first value is a negative integer that represents the shadow setting of the lower border

Border-radius fillet

9 、: first-letter

P:first-letter {font-size:20px}

The size of the first word in the p tag is 20px.

10 、 div:first-line {color:red;font-size:16px;}

Represents the first line of text in DIV is red and the font is 16px

11 、 pa:first-child {color:green}

Represents the green color of the first a hyperlink font in the p box

12. P:before {content: "I'm here"}

On behalf of the p tag object, add a paragraph: "I am here"

13 、 table:after {content:ENDOFTABLE}

Stands for displaying the content "ENDOFTABLE" after the table object

14. Single colon and double colon

A pseudo element consists of a double colon and a pseudo element name. Double colons are introduced in the current specification to distinguish between pseudo-classes and pseudo-elements. However, pseudo-classes are compatible with existing styles, and browsers need to support old pseudo-classes at the same time, such as: first-line,: first-letter,: before,: after and so on.

So now you can fully answer the question in the title, for CSS2 before the pseudo-elements, such as: before, single colon and double colon:: before function is the same.

Therefore, if your site only needs to be compatible with webkit, firefox, opera and other browsers, it is recommended to use double colons for pseudo elements. If you have to be compatible with IE browsers, it is safer to use CSS2 single colons.

15 、 .uploaderinput [type=file] {}

On behalf of class, style the input tag attribute in the uploader box for type=file

This is the end of the content of "how to set fonts for CSS3 to be compatible with all browsers". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.