1、给文字添加阴影
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
/*text-shadow: 5px 5px 5px red;*/
/*可指定多个阴影*/
text-shadow: 5px 5px 5px red,
15px 15px 5px red;
color:black;
font-size: 40px;
font-weight:bold;
font-family: 宋体;
background-image: url("1.jpg");
height:200px;
width:100px;
padding:30px;
text-align:center;
}
</style>
</head>
<body>
<!--text-shadow:length length length color-->
<!--阴影离开文字的横向方向距离(可为正负)、阴影离开文字的纵向方向距离（可为正负）、模糊的程度、背景颜色-->
<div>你好！</div>
</body>
</html>
2、使用服务器端字体
当客户端没有想要字体的样式时，可以使用服务端的字体。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*引入服务端的字体*/
@font-face {
font-family: WebFont;
/*ttf:o otf:t*/
src:url('1.ttf')format("truetype");
font-weight: normal;
}
div{
font-family: WebFont;
}
/*引入客户端的字体*/
@font-face {
font-family: Arial;
src:local("Arial");
}
div{
font-family: Arial;
}
</style>
</head>
<body>
<!--word-break:normal, keep-all, break-all>
<!--使用浏览器的默认换行规则，在半角/空格/连字符处换行，允许在单词间换行-->
<div>
This is my Page.
</div>
</body>
</html>
3、修改文字种类而保持字体尺寸不变
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*font-size-adjust 这个值需要计算得出
需要x-height=59 font-size=100,则这个值应设为0.58*/
/*不同的字体，font-size相同，但大小看起来还是不同，可以通过添加以上的属性来设置*/
#div1{
font-family: Menlo;
font-size: 18px;
font-size-adjust: 0.60;
}
#div2{
font-family: cursive;
font-size: 18px;
font-size-adjust: 0.57;
}
#div3{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-size-adjust: 0.57;
}
</style>
</head>
<body>
<div id="div1">test example</div>
<div id="div2">test example</div>
<div id="div3">test example</div>
</body>
</html>