Sample code sharing for CSS3 fonts and text effects

CSS3 allows us to use custom fonts

There are also some good text effects

Custom fonts

Using custom fonts requires using @font-face rules
Of course you must first have a custom text file

<p class="demo">Payen S.Tsung</p>

@font-face {    font-family: myDIYfont; /*自定义字体名*/
    src: url('Ginga.ttf'); /*字体文件*/}.demo {    font-family: myDIYfont;}

If we also have a font file in bold format
You can use it like this

@font-face {    font-family: myDIYfont;    src: url('Ginga_bold.ttf');    font-weight: bold;}.demo {    font-family: myDIYfont;}

@font-face Each browser has compatibility issues
We can add format format after the srcattribute like this src: url('Ginga.ttf') format('truetype');
Browser compatibility:

• url('font.eot?#iefix' ) format('embedded-opentype'), /* IE6-IE8 */

• url('ont.woff') format('woff'), /* chr ome、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 they are not commonly used

Introducing two

Text boundary wrap

word-wrap

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

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

The browser thinks this is a word, so there is no line break

For all line breaking rules for non-Chinese, Japanese and Korean text, we can use word-wrap to force line breaks

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

The attribute value also has normal (default) indicating the browser's default rule, and keep-all indicating spaces and hyphens for line breaks

In fact, the two are the same

Text-shadowtext-shadow

This property is very similar to box-shadow but not quite the same

Only it is the shadow of the text rather than the box shadow
It is also very performance consuming and should be used sparingly
Attribute values ​​include horizontal shadow distance, vertical shadow distance, blur radius (optional), color (optional)
You can also define multiple shadows
The difference between box-shadow It has no shadow size and shadow 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 cooler

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

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

Yeah, that’s all~

The above is the detailed content of Sample code sharing for CSS3 fonts and text effects. For more information, please follow other related articles on the PHP Chinese website!