css的@font-face和box-shadow、text-shadow属性

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;同上