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