CSS3文本属性
文字阴影text-shadow属性
语法：text-shadow:x-offset y-offset blur color;
说明：
x-offset：（水平阴影）表示阴影的水平偏移距离，单位可以是px、em或者百分比等。如果值为正，则阴影向右偏移；如果值为负，则阴影向左偏移；
y-offset：（垂直阴影）表示阴影的垂直偏移距离，单位可以是px、em或者百分比等。如果值为正，则阴影向下偏移；如果值为负，则阴影向上偏移；
blur：（模糊距离）表示阴影的模糊程度，单位可以是px、em或者百分比等。blur值不能为负。如果值越大，则阴影越模糊；如果值越小，则阴影越清晰。当然，如果不需要阴影模糊效果，可以吧blur值设置为0；
color：（阴影的颜色）表示阴影的颜色
- 文字凸起效果与凸起效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
display: inline-block;
padding: 20px;
font-size: 40px;
font-family: Verdana;
font-weight: bold;
background-color: #CCC;
color: #ddd;
text-shadow: -1px 0 #333, /*向左阴影*/
0 -1px #333, /*向上阴影*/
1px 0 #333, /*向右阴影*/
0 1px #333;/*向下阴影*/
}
</style>
</head>
<body>
<div>还有谁</div>
</body>
</html>
- 当然，为了表现更加丰富，每个方向上得阴影的颜色可以有不同的设置。如果将
向左和向上的阴影颜色设置为白色，文字就会有凸起的效果。如果将向右和向下的阴影颜色设置为白色，文字就会有凹陷的效果
文字描边text-stroke属性
- 在
CSS3中，我们可以使用text-stroke属性为文字添加描边效果。这个描边效果，说白了就是给文字添加边框。
语法：text-stroke:宽度值 颜色值;
- 当你用
text-stroke属性配合“color:transparent;”，你还可以创建镂空的文字！具体例子如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
font-family:Verdana;
font-size:50px;
font-weight:bold;
color:transparent; /*设置文字颜色为透明*/
text-stroke:2px red;
}
</style>
</head>
<body>
<div>还有谁</div>
</body>
</html>
文本溢出text-overflow属性
- 我们在浏览网页的时候，经常能看到这样的效果：当文字超出一定范围时会以省略号显示，并隐藏多余的文字，如下图：
省略号效果显示文字
*这也是一个用户体验非常好的设计细节，可以让用户知道还有更详细的内容，在CSS3中，文本溢出text-overflow用于设置是否使用一个省略标记（…）标示对象内文本的溢出。
语法：text-overflow:取值;
说明：text-overflow属性取值只有2个：
ellipsis 当对象内文本溢出时显示省略标记（…）
clip 当对象内文本溢出时不显示省略标记（…），而是将溢出的部分裁切掉
- 单独使用
text-overflow属性是无法得到上面图效果的。因为text-overflow属性只是说明文字溢出时用什么方式显示，要实现溢出时产生省略号效果，还须定义2个内容：这3个属性是必须一起使用才会有效果。
（1）white-space:nowrap;（强制文本在一行内显示）；
（2）overflow:hidden;（溢出内容为隐藏）；
下面是完整语法：
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
强制换行word-wrap属性
- 在
CSS3中，我们可以使用word-wrap属性来设置“长单词”或“URL地址”是否换行到下一行
语法：word-wrap:取值;
说明：word-wrap属性只有2个取值：normal和break-word。
normal 默认值，文本自动换行
break-word “长单词”或“URL地址”强制换行
嵌入字体@font-face
语法：
@font-face
{
font-family : 字体名称;
src :url("字体文件路径");
}
说明：src可以是相对地址，也可以是绝对地址。如果你引用第三方网站的字体文件，那就用绝对路径；如果使用的是你网站目录下的字体，那就使用相对路径。这个跟引用图片是类似的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*定义字体*/
@font-face {
font-family: myfont;
/*定义字体名称为myfont*/
src: url("../font/Horst-Blackletter.ttf");
}
div {
font-family: myfont;
/*使用自定义的myfont字体作为p元素的字体类型*/
font-size: 60px;
background-color: #ECE2D6;
color: #626C3D;
padding: 20px;
}
</style>
</head>
<body>
<div>lvyestudy</div>
</body>
</html>
-
在浏览器预览效果如下：
效果图 - 分析：这里使用
@font-face方法，定义了名为myfont的字体（名字可以随便取），然后在div元素中使用font-family属性来使用这个字体。从上面我们可以知道，如果想要定义字体，需要以下2步：
（1）使用@font-face方法定义字体名称；
（2）使用font-family属性引用该字体；
通过@font-face这种方式就很好地使得所有用户都能展示相同字体效果。
