CSS3 sample code sharing for font and text effects

CSS3 allows us to use a custom font

And some nice text effects too.

Custom Fonts

Using custom fonts requires the use of @font-face rules
First of all, you have to have a custom text file.

<p class= "Demo" >payen s.tsung</p>

@font-face {    font-family:mydiyfont;/* Custom font name *    /Src:url (' Ginga.ttf ');/* font file */}.demo {    font-family: Mydiyfont;}

If we still have bold font files,
You can use that.

@font-face {    font-family:mydiyfont;    Src:url (' Ginga_bold.ttf ');    Font-weight:bold;}. Demo {    Font-family:mydiyfont;}

@font-face compatibility issues with each browser
We can add format formatting after the SRC attribute like this src: url('Ginga.ttf') format('truetype');
Browser compatibility:

• URL (' font.eot #iefix ') format (' Embedded-opentype '),/* IE6-IE8 */

• URL (' ont.woff ') format (' Woff '),/* Chrome, Firefox */

• URL (' Font.ttf ') format (' TrueType '),/* Chrome, Firefox, Opera, Safari, Android, IOS 4.2+*/

• URL (' font.svg#fontname ') format (' SVG '); /* IOS 4.1-* *

Text effects

CSS3 adds a lot of text effects, but it's not used.
Introduction of two

Text Boundary Wrap Word-wrap

<p class= "Demo" >honorificabilitudinitatibus</p>

. demo {    width:100px;    height:100px;    BORDER:1PX solid black;}

The browser thinks it's a word, so there's no line break.
For all non-CJK text break rules We can use word-wrap to force a newline

. demo {    width:100px;    height:100px;    border:1px solid black;    Word-break:keep-all;}

The property value also has normal (default), which represents the browser default rule, and Keep-all indicates that spaces and hyphens are wrapped.
Actually, the two are the same.

Text Shadow Text-shadow

This property is much like Box-shadow, but it's not quite the same.
It's just a shadow of the text, not a box shadow.
It also consumes less performance.
Attribute values are horizontal shadow distance, vertical shadow distance, blur radius (optional), color (optional)
You can also define multiple shadows
Difference with Box-shadow It has no shadow size and projection mode

. demo {    width:100px;    height:100px;    border:1px solid black;    Word-break:break-all;    text-shadow:10px 10px 2px Red,                 20px 20px 3px blue;    }

With this property we can make the text look more cool

<p class= "Demo" >this is a text</p>

. demo {    text-shadow:2px 2px 5px;}

Well, no, that's all.