css的@font-face和box-shadow、text-shadow属性
1.@font-face属性（引入字体）
@font-face {
font-family: Economica-Bold-OTF;
src: url("font/Economica-Bold-OTF.otf") format("OpenType");
}
@font-face {
font-family: DroidSans-Bold;
src: url("font/DroidSans-Bold.ttf") format("TrueType");
}
注意：在当本地字体文件格式不同时，同时也需要修改后面的format。如下：
TureTpe(.ttf)、Web Open Font Format(.woff)、Embedded Open Type(.eot)、SVG(.svg)、OpenType字体（压缩的TrueType字体）
考虑兼容性
@font-face {
font-family: 'droidSans';
src: url('droidSans.eot'); /* IE9+ */
src: url('droidSans.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('droidSans.woff') format('woff'), /* chrome、firefox */
url('droidSans.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('droidSans.svg#fontname') format('svg'); /* iOS 4.1- */
}
（图片来源：@font-face - CSS @font-face详解-CSS教程 (caibaojian.com)）
2.box-shadow
box-shadow : h-shadow v-shadow blur spread color inset;
| 值 | 说明 |
|---|---|
| h-shadow | 水平阴影，即左右侧阴影（为负值时，阴影在左侧） |
| v-shadow | 垂直阴影，即上下阴影（为负值时，阴影在上侧） |
| blur | 模糊距离 |
| spread | 阴影大小 |
| color | 阴影颜色 |
| inset | 添加时，阴影转为内侧阴影 |
.box{
box-shadow:0px 1px 2px grey; //阴影在正下方
box-shadow:1px 1px 2px grey; //阴影在右下方
box-shadow:-1px 1px 2px grey; //阴影在左下方
box-shadow:1px -1px 2px grey; //阴影在右上方
box-shadow:inset 0px 0px 2px grey;
}
3.text-shadow
text-shadow:inset 0px 0px 2px grey;同上
