「这是我参与2022首次更文挑战的12天，活动详情查看：2022首次更文挑战」
CSS3中增加的常用的文本样式如下：
- text-shadow 文本阴影
- text-overflow 文本溢出
- word-wrap 和 word-break 强制换行
- @font-face 嵌入字体
一、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： 阴影的颜色
- 定义多个阴影： 定义多个阴影时，text-shadow以逗号分开，阴影效果会按照从左到右的顺序展示
- 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>06-文本样式之text-shadow</title>
<style>
/*一般阴影效果*/
#test1 {
font-size: 40px;
text-shadow: 4px 4px 2px gray;
}
/*描边阴影效果：阴影都是黑色*/
#test2 {
background-color: #ccc;
font-size: 40px;
font-weight: bold;
color: #ddd;
text-shadow: -1px 0 0 #333, /*向左阴影*/
0 -1px 0 #333, /*向上阴影*/
1px 0 0 #333, /*向右阴影*/
0 1px 0 #333; /*向下阴影*/
}
/*凸阴影效果：左与上阴影设置为白色*/
#test3 {
background-color:thistle;
font-size: 40px;
font-weight: bold;
color: #ddd;
text-shadow: -1px 0 0 white, /*向左阴影*/
0 -1px 0 white, /*向上阴影*/
1px 0 0 #333, /*向右阴影*/
0 1px 0 #333; /*向下阴影*/
}
/*凹陷阴影效果：右与下阴影设置为白色*/
#test4 {
background-color: #ccc;
font-size: 40px;
font-weight: bold;
color: #ddd;
text-shadow: -1px 0 0 #333, /*x轴偏移量为负数是向左阴影*/
0 -1px 0 #333, /*y轴偏移量是负数是向上阴影*/
1px 0 0 white, /*x轴偏移量是正数是向右阴影*/
0 1px 0 white; /*y轴偏移量是正数是向下阴影*/
}
/*火焰字效果*/
#test5{
text-align: center;
color: #45B823;
padding: 20px 0 0 20px;
background-color: #FFF;
font-size: 60px;
font-weight: bold;
text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #ffdd33, -2px -15px 11px #ff8800, 2px -25px 18px #ff2200;
}
</style>
</head>
<body>
<div id="test1">我是一般阴影效果</div>
<div id="test2">我是描边阴影效果</div>
<div id="test3">我是凸阴影效果</div>
<div id="test4">我是凹陷阴影效果</div>
<div id="test5">我是火焰字效果</div>
</body>
</html>
二、text-overflow
- 语法：text-overflow: 取值；
- 取值有两个：
- ellipsis： 当文本溢出时，显示省略号，并且隐藏多余文字
- clip： 当文本溢出时，不显示省略号，而是将溢出的文字才切掉（默认值）
！注意： 实际上，text-overflow是无法实现省略号效果的，要想实现需要结合white-space和overflow
完整语法：
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
- 单行文本省略效果&多行文本省略效果：
- 单行文本省略效果为以上固定搭配
- 多行文本的省略效果使用CSS无法实现，必须借助JS
- 代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>08-文本样式之text-overflow</title>
<style>
div {
width: 200px;
height: 100px;
border: 1px solid silver;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。
予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣</div>
</body>
</html>
三、word-wrap 和 word-break
3-1、word-wrap
语法：word-wrap: 取值;
- 取值有两个：
- normal：自动换行（默认）
- break-word：强制换行
3-2、word-break
语法：word-break: 取值;
- 取值有三个：
- normal：自动换行（默认）
- break-all：允许在单词内换行
- keep-all：只能在半角空格或连字符处换行
3-3、word-wrap & word-break区别
这俩的区别是针对英文而言的：
- word-wrap: break-word;是用来决定是否允许单词内短句的，它会首先尝试将单词挪到下一行看能不能放下，放不下的话进行单词内断句
- word-break: break-all;是直接换行的，直接进行单词内断句
3-4、代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>09-文本样式之word-wrap&word-break</title>
<style>
div {
width: 200px;
height: 120px;
border: 1px solid silver;
/*会尝试把完整的单词放到下一行*/
word-wrap: break-word;
/*粗暴换行，不考虑是否为完整的单词 */
/* word-break: break-all; */
}
</style>
</head>
<body>
<div>Welcome, everyone! Please remember our homepage website is: http://www.123123123.com/index.html</div>
</body>
</html>
- word-wrap: break-word;的效果：
- word-break: break-all;的效果：
四、@font-face
如果想要所有用户的电脑上都能正常显示一种字体，此时就需要嵌入字体了。
即：将服务器中的字体文件下载到本地电脑，然后让浏览器可以显示用户电脑没有安装的字体了。
- 语法：
@font-face {
font-family: myfont;
src: url("..");
}
div {
font-family: myfont;
}
- 第一步使用@font-face定义字体
- 第二步使用font-family引用字体
- 注意事项
不建议使用@font-face来实现嵌入中文字体，因为文件大多10M以上！会严重影响页面的加载速度
而英文字体只有几十千字节（因为只有26个字母）
- @font-face不仅可以用于嵌入字体，还可以用于实现字体图标技术，即iconfont
