- 给文字添加阴影
- 文字换行
- 客户端文字
- font-size-adjust属性
给文字添加阴影-text-shadow属性
text-shadow:length length length color
前三个length分别指阴影离开文字横向距离、纵向距离（这两个参数允许值为负）和模糊半径（值越大模糊范围越大，默认为0，不模糊），color指定阴影的颜色
div {
text-shadow:5px 5px 10px gray;
}
让文本换行
很多浏览器本身自带换行功能，在css3中可以使用word-break来决定换行的处理方式
div {
word-break:keep-all;
}
| 值 | 换行规则 |
|---|---|
| normal | 使用浏览器的默认换行规则 |
| keep-all | 只能在半角空格或连字符处换行 |
| break-all | 允许在单词内换行 |
使用word-wrap属性来实现长单词与url地址的自动换行
word-wrap:break-word/normal;
//normal为默认处理
使用服务器端字体
在CSS3中，使用@font-face来利用服务器端的默认字体。
@font-face {
font-family: WebFont;
src:url('font/Fontin_Sans_R_45b.otf') format("opentype");
font-weight: normal;
}
src指定服务器端字体的字体文件所在路径
- TrueType字体：.ttf
- OpenType字体：.otf
- Embedded OpenType字体：.eot(EOT是OpenType的一种压缩形式。这种格式是专用的（Microsoft），仅IE提供支持。)
- SVG字体：.svg（Scalable Vector Graphics或SVG是一种通用图像格式，SVG字体使用这种格式表示字符。）
- Web开放字体格式：.woff（Web开放字体格式建立在TrueType基础之上，已经发展为Web字体的一个标准。大多数现代浏览器都对这种格式提供了很好的支持。）
先引用客户端上的字体，没有再引用服务器端上的字体
@font-face {
font-family: MyArial;
src:local("Arial"),
url("KaushanScript-Regular.otf");
}
font-size-adjust属性
aspect的计算方法：x-height:58 font-size:100px aspect:0.58
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1{
font-family: Menlo;
font-size: 16px;
font-size-adjust: 0.60;
}
#div2{
font-family: cursive;
font-size: 16px;
font-size-adjust: 0.57;
}
#div3{
font-family: "Lantinghei SC";
font-size: 16px;
font-size-adjust: 0.57;
}
</style>
</head>
<body>
<div id="div1">Text sample</div>
<div id="div2">Text sample</div>
<div id="div3">Text sample</div>
</body>
</html>