CSS Self-study Note: CSS3 text effects

A number of new text attributes have been added to the CSS3, as well as the same attributes we used to make special effects when dealing with problem effects.

When you used CSS for Web development, you must use the fonts that are installed on your computer, and if some users do not have the fonts installed on their computers, they may not achieve the desired results for the developer. With CSS3, developers can use any font they like, as long as the desired font file is placed on the Web server.

Note: Some of the new properties are not supported by mainstream browsers today.

The simplest text effect is to add a shadow to the text.

You can add a horizontal offset value, a vertical offset value, and a blur radius to the text, or you can define the color of the shadow.

We can define different shadows to achieve a lot of effects, for example we can make a text with three-dimensional sense:

* {color: #FFF; text-shadow:0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba (0,0,0,0.1), 0 0 5px Rgba (0,0,0,0.1), 0 1px 3px Rgba (0,0,0,0.3), 0 3px 5px Rgba (0,0,0,0.2), 0 5px 10px rgba (0,0,0,0.25);}

Similarly, we can also make a special effect with a flame effect:

* {text-align:center;margin:100px auto;font-size:80px;color: #FFF;  text-shadow:0 0 20px #fefcc9, 10px-10px 30px #feec85, -20px-20px 40px #ffae34, 20px-40px 50px #ec760c, -20px-60px 60px #cd4606, 0-80px 70px #973716, 10px-90px 80px #451b0e;}

In CSS3, you also add a property (Word-wrap attribute) that defines the line wrap, allowing us to wrap the text ourselves. However, when you use the Word-wrap property to wrap, a word may be split.

With Css3,web developers no longer have to worry about fonts, you can use any font that we like, as defined by the @font-face.

@font-face{font-family:myfont;src:url (' Sansation_light.ttf ');}} *{font-family:myfont;}

Note: Some Chinese font files are large and should be avoided as much as possible.

CSS3 Font descriptors

CSS3 @font All font descriptors defined in the-face rule:

Descriptor	value	Description	Notes
Font-family	Name	Specifies the name of the font.	Required definition
Src	Url	Defines the URL of the font file.	Required definition
Font-stretch	Normal Condensed Ultra-condensed Extra-condensed semi-condensed Expanded Semi-expanded extra-expanded ultra-expanded	Defines how the font is stretched. The default is "normal".	Options available
Font-style	Ormal Italic Oblique	Defines the style of the font. The default is "normal".	Options available
Font-weight	Normal Bold 100 200 300 400 500 600 700 800 900	Defines the weight of the font. The default is "normal".	Options available
unicode-range	unicode-range	define font support The UNICODE character range. The default is "U+0-10ffff".	optional