CSS3_文本效果&字体_中国风字体 css-CSDN博客

CSS3文本效果

文本阴影 text-shadow

语法为：

text-shadow: h-shadow v-shadow blur color

创建一个白色文本的阴影效果：

<!DOCTYPE html>
<html>
<head>
<style>
h1 
{
    color:white;
    text-shadow:2px 2px 4px #000000;
}
</style>
</head>
<body>

<h1>白色文本的阴影效果！</h1>

</body>
</html>

单词换行 word-wrap

当一个单词过长时，这个属性可将这个单词设置成可换行

<!DOCTYPE html>
<html>
<head>
<style> 
p.test
{
    width:11em; 
    border:1px solid #000000;
    word-wrap:break-word;
}
</style>
</head>
<body>

<!-- 'thisisaveryveryveryveryveryverylongword'将分2行显示 -->
<p class="test">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

</body>
</html>

CSS3字体

Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。
Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。
注释：Internet Explorer 8以及更早的版本不支持新的@font-face规则。
使用自己定义的字体显示文字，并且包含粗体显示：

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face
{
    font-family: myFont;      /* 定义字体的名称 */
    src: url('http://www.w3school.com.cn/example/css3/Sansation_Light.ttf')
        ,url('http://www.w3school.com.cn/example/css3/Sansation_Light.eot'); /* IE9+ */
}

@font-face
{
    font-family: myFont;
    src: url('http://www.w3school.com.cn/example/css3/Sansation_Bold.ttf')
        ,url('http://www.w3school.com.cn/example/css3/Sansation_Bold.eot'); /* IE9+ */
    font-weight:bold;          /* 在粗体时使用该字体 */
}

div
{
    font-family:myFont;
}
</style>
</head>
<body>

<div>
With CSS3, websites can <b>finally</b> use fonts other than the pre-selected "web-safe" fonts.
</div>

<p><b>注释：</b>Internet Explorer 9+ 支持新的 @font-face 规则。Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。</p>

</body>
</html>

更多请参考：W3School