版权声明：本文为博主原创文章，如需转载请标明出去。 https://blog.csdn.net/sujin_/article/details/83449835
CSS3其中一个重要变化就是增加了服务器字体功能，这样避免了我们浏览页面时因为字体缺失导致网页效果变差的问题。通过CSS3的服务器字体功能，可以控制浏览器使用服务器包含的字体，这样可以保证即使我们的电脑上没有安装任何字体，也可以呈现出统一的页面。
字体相关属性
CSS为控制文本的字体提供了很多的属性，这些字体相属性关的属性主要用于控制文本的字体、颜色、修饰等外观。字体相关属性如下所示：
| font | 控制文字的样式、字体粗体、大小等属性。为了更好的进行控制，通常不使用该属性。 |
| color | 控制文字的颜色，属性值可以是颜色名、十六进制的颜色值、rgb函数、CSS3提供的HSL颜色值（色相、饱和度、明度） |
| font-family | 设置文字的字体，可以设置多个显示字体（以，号隔开）。 |
| font-size | 设置文字的字体，可以是相对字体，也可以是绝对字体。支持xx-small、x-smallengthl、small、medium、large、length等属性值 |
| font-size-adjust | 用于控制对不同字体的尺寸进行微调，可以指定none（不进行任何调整）。 |
| font-stretch | 改变文字横向的拉伸，默认值为normal（表示不拉申），还有两个属性值，narrower（横向压缩）和wider（横向拉伸） |
| font-style | 设置文字的风格，是否使用斜体等。属性值：normal、itlic、oblique，设置文字正常、斜体、倾斜字体。 |
| font-weight | 设置字体是否加粗，可以用100、200、300、900来控制字体的加粗程度。 |
| text-decoration | 用于控制文字是否有修饰线，如下画线等，属性的值有none、blink、underline、line-through、overline，意思分别为无修饰、闪烁、下画线、中画线和上画线等。 |
| font-variant | 设置文字的大写字母格式。该属性支持normal、small-caps两个属性，分别代表正常字体、小型的大写字母字体。 |
| text-shadow | 设置文字是否有阴影效果。 |
| text-transform | 设置文字的大小写。该属性支持none、small-capitalize、uppercase和lowercase，分别代表不转换、手写字母大写、全部大写。全部小写。 |
| line-height | 设置字体的行高，即字体最底端与字体内部顶端之间的距离，为负值的行高可以实现阴影效果。 |
| letter-spacing | 设置字符之间的间隔，最后一个文字不会受到影响，该属性支持normal和数据+长度单位（如11pt、14px等）两种属性。 |
| word-spacing | 设置单词之间的间隔，该属性支持normal和数据+长度单位（如11pt、14px等）两种属性。 |
下面代码写了对上面各种属性进行了示范，页面左边是设置的属性值，右边则是设置后的效果。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 字体相关属性设置 </title>
</head>
<body>
color:#888888：
<span style="color:#888888">测试文字</span><br />
color:red：
<span style="color:red">测试文字</span><br />
font-family:隶书：
<span style="font-family: '隶书'">测试文字</span><br />
font-size:20pt：
<span style="font-size:20pt">测试文字</span><br />
font-size:xx-large：
<span style="font-size:xx-large">测试文字</span><br />
font-stretch:narrower：
<span style="font-stretch:narrower">测试文字</span><br />
font-stretch:wider：
<span style="font-stretch:wider">测试文字</span><br />
font-style:italic：
<span style="font-style:italic">测试文字</span><br />
font-weight:bold：
<span style="font-weight:bold">测试文字</span><br />
font-weight:900：
<span style="font-weight:900">测试文字</span><br />
text-decoration:blink：
<span style="text-decoration: blink;">测试文字</span><br />
text-decoration:underline：
<span style="text-decoration:underline">测试文字</span><br />
text-decoration:line-through：
<span style="text-decoration:line-through">测试文字</span><br />
font-variant:small-caps ：
<span style="font-variant:small-caps">hello</span><br />
text-transform:uppercase：
<span style="text-transform:uppercase">hello</span><br />
text-transform:capitalize：
<span style="text-transform:capitalize">hello</span><br />
line-height:30pt：
<span style="line-height:30pt">测试文字</span><br />
letter-spacing:5pt：
<span style="letter-spacing:5pt">hello world</span><br />
letter-spacing:15pt：
<span style="letter-spacing:15pt">hello world</span><br />
word-spacing:20pt：
<span style="word-spacing:20pt">hello world</span><br />
word-spacing:60pt：
<span style="word-spacing:60pt">hello world</span><br />
</body>
</html>
1.使用text-shadow添加阴影
字体相关属性提供了一个text-shadow属性，该属性值形如color xoffset yoffset length，或xoffset yoffset radius color。
- color：指定阴影的颜色，如果省略指定阴影颜色，在Firefox、Opera中直接使用字体颜色作为阴影颜色，在IE和谷歌不会显示阴影。
- xoffset ：指定阴影在横向上的偏移。
- yoffset ：指定阴影在纵向上的偏移。
- radius：指定阴影的模糊半径。模糊半径越大，阴影看上去越模糊。
下面页面代码示范了设置阴影的几个参数的意思：
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 阴影 </title>
</head>
<body>
text-shadow:red 5px 5px 2px：
<p style="text-shadow:red 5px 5px 2px">测试文字</p>
text-shadow:5px 5px 2px（省略阴影颜色）：
<p style="text-shadow:5px 5px 2px;color:blue;">测试文字</p>
text-shadow:-5px -5px 2px gray（向左上角投影）：
<p style="text-shadow:-5px -5px 2px gray">测试文字</p>
text-shadow:-5px 5px 2px gray（向左下角投影）：
<p style="text-shadow:-5px 5px 2px gray">测试文字</p>
text-shadow:5px -5px 2px gray（向右上角投影）：
<p style="text-shadow:5px -5px 2px gray">测试文字</p>
text-shadow:5px 5px 2px gray（向右下角投影）：
<p style="text-shadow:5px 5px 2px gray">测试文字</p>
text-shadow:15px 15px 2px gray（向右下角投影、更大偏移距）：
<p style="text-shadow:15px 15px 2px gray">测试文字</p>
text-shadow:5px 5px 10px gray（模糊半径增加，模糊程度加深）：
<p style="text-shadow:5px 5px 10px gray">测试文字</p>
</body>
</html>
2.添加多个阴影
如果希望为文字添加多个阴影，则可以为text-shadow属性设置几组阴影，多组阴影之间用逗号隔开，例如下面代码所示：
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 多个阴影 </title>
<style type="text/css">
span{
display: block;
padding: 8px;
font-size:xx-large;
}
</style>
</head>
<body>
text-shadow:5px 5px 2px #222,<br/>
30px 30px 2px #555 ,<br/>
50px 50px 2px #888（多个阴影）：
<span style="text-shadow:5px 5px 2px #222,30px 30px 2px #555
,50px 50px 2px #888">测试文字</span>
</body>
</html>
3.使用font-size-adjust属性微调字体大小
对于西方文字来说，相同字号、不同字体的字母也是不同的，例如以下代码：
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> text-size-adjust </title>
<style type="text/css">
#div1 {
font-size: 16pt;
font-family: "Courier New";
font-size-adjust: 0.41;
}
#div2 {
font-size: 16pt;
font-family: "Roma";
font-size-adjust: 0.66;
}
#div3 {
font-size: 16pt;
font-family: "Impact";
font-size-adjust: 0.93;
}
</style>
</head>
<body>
<div id="div1">Our domain is www.crazyit.org</div>
<div id="div2">Our domain is www.crazyit.org</div>
<div id="div3">Our domain is www.crazyit.org</div>
</body>
</html>
CSS3支持的颜色表示方法
CSS2已经提供了多种颜色表示的方法，如字符串形式的颜色名、十六进制的颜色值等。但CSS2不允许为颜色设置透明度，因此显得不够完善。CSS则提供了更多的颜色表示方法，总结起来有如下几种：
-
用颜色名表示，例如white（白色）、red（红色）、blue（蓝色）等。
- 用十六进制表示，这是典型的三原色混合原理，例如：#FF0000，其中前两位FF表示红光的值——也就是把红光分成0~255个色阶，其中00表示满意红光，#”开头的6位十六进制数值表示一种颜色。6位数字分为3组，每组两位，依次表示红、绿、蓝三种颜色的强度。
- 用rgb(r，g，b)函数表示，这也是三原色混合原理。例如rgb(255,255,0)，红光的值为255（最大值）、绿光也是255（最大值），蓝光的值为0，混合出来就是黄色。在RGB 颜色模式，颜色由表明红色，绿色，和蓝色各成分强度的三个数值表示。从极小值0到最大值255，当所有颜色,都在最低值被显示的颜色将是黑色，当所有颜色都在他们的最大值被显示的颜色将是白色。但是，一个缠扰不清的方面在RGB 颜色模式是，所有这些颜色可能代表以各种各样的方法。
- 用hsl（Hue，Stauration，Lightness）函数表示，用色调、饱和度、亮度控制的颜色，例如hsl(120,100%,100%)其中色调为120，也就是绿色（色调0代表红色、色调120代表绿色、色调240代表蓝色），饱和度、亮度都是100%，所以就是绿色。
- rgba(r，g，b，a)函数表示，跟rgb函数相似，比它多了个a，就是透明度的意思。a参数可以在0~1之间的任意数，其中0代表完全透明。
- hsla函数跟hsl相比多了个alpha参数，用于指定颜色的透明度，alpha参数可以在0~1之间的任意数，其中0代表完全透明。
下面代码示范了各种颜色表示的方法：
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 颜色表示方式 </title>
<style type="text/css">
div>div{
width: 400px;
height: 40px;
}
</style>
</head>
<body>
<script type="text/javascript">
for (var i = 0; i < 110 ; i++)
{
document.write("测试文字");
}
</script>
<div style="position:absolute;top:0px">
<div style="background-color:gray;">background-color:gray</div>
<div style="background-color:#aaa;">background-color:#aaa;</div>
<div style="background-color:#ffff00;">background-color:#ffff00;</div>
<div style="background-color:rgb(255, 0 , 255);">
background-color:rgb(255, 0 , 255);</div>
<div style="background-color:hsl(120, 80%, 50%);">
background-color:hsl(120, 80%, 50%);</div>
<div style="background-color:rgba(255, 0 , 255 , 0.5);"></div>
<div style="background-color:hsla(120, 80%, 50% , 0.5);"></div>
</div>
</body>
</html>
文本相关属性
文本相关属性用于控制整个段、整个<div>元素内文本的显示效果，包括文本的缩进、段落内文字的对齐等显示方式。
1.text-indent：用于设置段落文本的缩进，默认值为0.被另外一个元素（如br）断开的元素不能应用本属性。
2.text-overflow：用于控制溢出文本的出来方法。该属性支持如下两个属性值。
- clip：如果该元素指定了overflow：hidden属性值，该元素中文本溢出时，clip指定只要简单裁切溢出的文本（不显示超长的部分）。
- ellipsis：如果该元素指定了overflow：hidden属性值，该元素中文本溢出指定，ellipsis指定裁切溢出的文本，并显示溢出标记（...）显示。
3.vertical-align：用于设置目标元素内容的垂直对齐方式，通常有顶端对齐，底对齐等方式。
- auto：对元素的文本内容执行自动对齐。
- baseline：默认值，将支持valign属性的元素的文本内容与基线对齐。
- sub：将元素的内容与文本下标对齐。
- super：将元素的内容与文本上标对齐。
- top：默认值，将支持valigin属性的元素文本内容与元素顶端对齐。
- middle：默认值，将支持valigin属性的元素文本内容对齐到元素的中间。
- bottom：默认值，将支持valigin属性的元素文本内容与元素底端对齐。
- length：指定文本内容相对于基线的偏移距离。
4.text-align：用于设置目标元素中文本的水平对齐方式。该属性支持left、right、center（居中对齐）、justify（两端对齐）。
5.direction：用于设置文本流入的方向，该属性的合法值有ltr（从左向右）和rtl（从右向左）。该属性不会影响拉丁文字母、数字字符，它们总是以ltr值呈现。但此属性会作用于拉丁文的标点符号。
6.white-space：用于设置目标元素对文本内容中空白的处理方式。
7.word-break：用于设置目标元素中文本内容的换行方式。
8.word-wrap：用于设置目标元素中文本内容的换行方式。
下面的代码示范了上面我们常用到的文本相关属性：
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文本相关属性设置</title>
<style type="text/css">
/* 为div元素增加边框 */
div{
border:1px solid #000000;
height: 30px;
width: 200px;
}
</style>
</head>
<body>
<!-- 缩进20pt -->
text-indent:20pt <div style="text-indent:20pt">测试文字</div>
<!-- 缩进20pt -->
text-indent:40pt <div style="text-indent:40pt">测试文字</div>
<!-- 居中对齐 -->
text-align:center <div style="text-align:center">测试文字</div>
<!-- 居右对齐 -->
text-align:right <div style="text-align:right">测试文字</div>
<!-- 文本从右边流入 -->
direction:rtl <div style="direction:rtl">测试文字</div>
<!-- 文本从左边流入 -->
direction:ltr <div style="direction:ltr">测试文字</div>
<!-- 当文字溢出时，只是简单地裁切 -->
text-overflow:clip <div style="overflow:hidden;white-space:nowrap;
text-overflow:clip;">测试文字测试文字测试文字测试文字测试文字测试文字</div>
<!-- 当文字溢出时，裁切之后显示裁切标记 -->
text-overflow:ellipsis <div style="overflow:hidden;white-space:nowrap;
text-overflow:ellipsis;">测试文字测试文字测试文字测试文字测试文字测试文字</div>
</body>
</html>
1.使用white-space控制空白的处理行为
white-space用于控制HTML元素对元素文本中空白的处理方式。该属性支持以下几个属性值：
- normal：默认值，浏览器忽略文本的空白。
- pre：浏览器将保留文本中的所有空白，其行为类似于<pre>标签。
- nowrap：文本不会换行，文本会在同一行上继续，直到遇到<br>标签为止。
- pre-wrap：保留空白符的序列，但可以正常的换行。
- pre-line：合并空白符的序列，但保留换行符。
- inherit：指定从父元素继承white-space属性的值。
下面代码将示范了white-space属性对空白的处理行为：
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> white-space </title>
<style type="text/css">
/* 为div元素增加边框 */
div{
border:1px solid #000000;
height: 80px;
width: 240px;
}
</style>
</head>
<body>
<!-- 忽略文本中的空白、换行符 -->
white-space:normal <div style="white-space:normal">
The root interface in
the collection hierarchy. </div>
<!-- 保留文本中所有空白、换行符 -->
white-space:pre <div style="white-space:pre">
The root interface in
the collection hierarchy. </div>
<!-- 忽略文本中空白，换行符，强制不换行 -->
white-space:nowrap <div style="white-space:nowrap">
The root interface in
the collection hierarchy. </div>
<!-- 保留文本中空白序列，换行符 -->
white-space:pre-wrap <div style="white-space:pre-wrap">
The root interface in
the collection hierarchy. </div>
<!-- 合并文本中空白序列，保留换行符 -->
white-space:pre-line <div style="white-space:pre-line">
The root interface in
the collection hierarchy. </div>
</body>
</html>2.文本自动换行：word-break
当HTML元素不足以显示它里面的文本时，浏览器将会自动换行显示它里面的所有文本。浏览器换行规则：对于西方文字来说，浏览器只会在半角空格、连字符的地方换行；对于中文来说，浏览器可以在任何一个中文字符后换行。如果希望改变浏览器的默认换行行为，自己有需求的话，可以看看如下属性值：
- normal：靠浏览器的默认规则进行换行。（浏览器换行规则）
- keep-all：只能在半角空格或连字符处换行。
- break-all：设置允许在单词中间换行。
如果想要让浏览器在西方文字的单词中间换行，则可将word-break属性设置为break-all。下面代码将示范了word-break属性功能：
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> word-break </title>
<style type="text/css">
/* 为div元素增加边框 */
div{
border:1px solid #000000;
height: 50px;
width: 240px;
}
</style>
</head>
<body>
<!-- 不允许在单词中换行 -->
word-break:keep-all <div style="word-break:keep-all">
The root interface in the collection hierarchy. </div>
<!-- 指定允许在单词中换行 -->
word-break:break-all <div style="word-break:break-all">
The root interface in the collection hierarchy. </div>
</body>
</html>3.用word-wrap控制长单词或URL地址换行。
有时候文本内容包含了特别长的单词或特别长的URL地址——URL地址既不包含半角空格，也不包含连字符，因此当浏览器窗口比较窄时，将会出现滚动条。如果需要改变默认行为，就需要通过word-wrap属性设置，该属性有如下两个值：
- normal：靠浏览器的默认规则进行换行。
- break-word：设置单词允许中间换行。
为了让浏览器控制文本的内容在长单词、URL地址中间换行，可以通过word-wrap属性，设置为brea-word即可，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> word-wrap </title>
<style type="text/css">
/* 为div元素增加边框 */
div{
border:1px solid #000000;
height: 70px;
width:140px;
}
</style>
</head>
<body>
<!-- 不允许在长单词、URL地址中间换行 -->
word-wrap:normal <div style="word-wrap:normal;">
Our domain is http://www.crazyit.org</div>
<!-- 允许在长单词、URL地址中间换行 -->
word-wrap:break-word <div style="word-wrap:break-word;">
Our domain is http://www.crazyit.org</div>
</body>
</html>注意：work-break和work-wrap属性的作用是不同的。work-break设置为break-all，可以让元素内每一行文本最后一个单词自动换行；work-wrap则会尽量让长单词、URL地址不要换行。即使设置为break-word，也会尽量让其单独占一行，只有当一行文本不足以显示这个长单词、URL地址时，才会在其中间换行。
CSS3新增的服务器字体
在CSS3以前，我们只能使用最普通的字体，有些网页甚至根本不会设置字体，这是因为网页上使用某种字体后，除非我们电脑上存在这种字体，否则显示将无效。CSS3的出现改变了这种现状，CSS3允许使用服务器字体，如果客户端没有安装这种字体，客户端将会自动去下载这种字体。
1.使用服务器字体
使用服务器字体很简单，只要使用@font-face定义服务器字体即可。大家是不是感觉很简单，@font-face语法如下：
@font-face {
font-family: name;
src: url(url) format(fontformat);
sRules
}
font-familt：服务器字体的名称，可以随意定义。src：通过URL指定该字体文件的路径，format指的是字体的格式。为了使用服务器字体，步骤如下（需要字体文件的可以网上下载也可以在我的资源库中下载）：
- 下载需要使用服务器字体对应的字体文件（在网上搜一搜，会有大量的字体让我们下载）。
- 使用@font-face定义服务器字体。
- 通过font-family指定服务器字体。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 服务器字体 </title>
<style type="text/css">
/* 定义服务器字体，字体名为CrazyIt
服务器字体对应的字体文件为Blazed.ttf */
@font-face {
font-family: CrazyIt;
src: url("Blazed.ttf") format("TrueType");
}
</style>
</head>
<body>
<!-- 指定CrazyIt字体，这是服务器字体 -->
<div style="font-family:CrazyIt;font-size:36pt">
Our domain is http://www.baidu.com
</div>
</body>
</html>2.定义粗体、斜体字
我们在网页上除了定义字体外，还会定义粗体、斜体。但在使用服务器字体时，需要为粗体、斜体、粗斜体使用不同的字体文件。在@font-face中增加了font-weight，font-style等定义（字体文件需要下载）。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 服务器字体 </title>
<style type="text/css">
/* 定义普通的服务器字体 */
@font-face {
font-family: CrazyIt;
src: url("Delicious-Roman.otf") format("OpenType");
}
/* 定义粗体的服务器字体 */
@font-face {
font-family: CrazyIt;
src: url("Delicious-Bold.otf") format("OpenType");
font-weight: bold;
}
/* 定义斜体的服务器字体 */
@font-face {
font-family: CrazyIt;
src: url("Delicious-Italic.otf") format("OpenType");
font-style: italic;
}
/* 定义粗斜体的服务器字体 */
@font-face {
font-family: CrazyIt;
src: url("Delicious-BoldItalic.otf") format("OpenType");
font-style: italic;
font-weight: bold;
}
</style>
</head>
<body>
<div style="font-family:CrazyIt;font-size:30pt">
Our domain is http://www.baidu.com</div>
<div style="font-family:CrazyIt;font-size:30pt;font-weight:bold">
Our domain is http://www.baidu.com</div>
<div style="font-family:CrazyIt;font-size:30pt;font-style:italic;">
Our domain is http://www.baidu.com</div>
<div style="font-family:CrazyIt;font-size:30pt;font-weight:bold
;font-style:italic;">Our domain is http://www.baidu.com</div>
</body>
</html>3.优先使用客户端字体
虽然CSS3提供了服务器字体功能，但也不能动不动上来就用服务器字体，因为它需要从远处服务器下载字体文件，效率感觉并不好。所以尽量使用客户端字体，当客户端不存在这种字体时，才考虑用服务器字体进行代替(url可以是本地也可以是网页服务器上的文件)。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 优先使用客户端字体 </title>
<style type="text/css">
/* 定义服务器字体：CrazyIt
该字体优先使用客户端字体：Goudy Stout
当客户端字体不存在时，使用Blazed.ttf作为替代字体。
*/
@font-face {
font-family: CrazyIt;
src: local("Goudy Stout"), url("Blazed.ttf") format("TrueType");
}
</style>
</head>
<body>
<div style="font-family:CrazyIt;font-size:24pt">
Our domain is http://www.baidu.com
</div>
</body>
</html>
指定src属性时，优先使用local("Goudy Stout")客户端字体，当不存在时， url("Blazed.ttf")才会去替代它。
CSS3服务字体文件可以在我的资源库中进行 下载：链接地址
--------------------------------------------------学会选择和坚持，就赢得了人生的主动权。--------------------------------------------------