1、语义化的重要性
扩展：<fieldset><legend></legend></fieldset>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*分割线*/
fieldset{border: none;border-top: 1px dashed #CCCCCC;}
legend{color: #CCCCCC; }
</style>
</head>
<body>
<fieldset>
<legend align="center">
窝窝窝
</legend>
</fieldset>
</body>
</html>
效果：
2、unicode-range:限定字符集字符范围 ，这些字符、这个范围内的字符是XX字体；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
@font-face{
font-family: YH;
src: local('microsoft yahei'),
local('pingfang sc');
}
@font-face{
font-family: quote;
src: local('KaiTi');
unicode-range: u+201c,u+201d;
}
p{ font-family: YH;}
.quote{ font-family:quote,YH;}/*先写小范围 再写大范围*/
</style>
</head>
<body>
<p>微软雅黑“”</p>
<p class="quote">微软雅黑“”</p>
<span>微软雅黑“”</span>
</body>
</html>
第二个P前面是微软雅黑，引号是楷体。
3、css中的换行 A ；回车 D;
使用自定义字体，实现动画效果；每过固定时间，字体上移一行，通过多个字每个一张，快速换行实现动画的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span{
display: inline-block;
overflow: hidden;
vertical-align: -0.20em;
height: 1em;
line-height: 1;
}
span:before{
display: block;
white-space: pre-wrap;
/*content: '...A..A.';*/
content: '/A-A\A|';
animation: change 4s infinite step-start ;
}
@keyframes change{
20%{transform: translateY(-4em);}
40%{transform: translateY(-3em);}
60%{transform: translateY(-2em);}
80%{transform: translateY(-1em);}
}
/*dot {
display: inline-block;
height: 1em; line-height: 1;
vertical-align: -.25em;
overflow: hidden;
}
dot::before {
display: block;
content: '...A..A.';
white-space: pre-wrap;
animation: dot 3s infinite step-start both;
}
@keyframes dot {
33% { transform: translateY(-2em); }
66% { transform: translateY(-1em); }
}*/
</style>
</head>
<body>
<p>正在上传<span>...</span></p>
<a href="javascript:" class="grebtn">订单提交中<dot>...</dot></a>
</body>
</html>