text-shadow:文字阴影效果

Neon Lights Effect

Emboss Effect

Emboss Effect 2

Inset text effect

Stroke text effect

以上五个就是我们常用的几种字体效果,其中第一个的核心是不设置偏移只设置模糊值,第二个的核心是运用两个text-shadow,一个比文字颜色浅一个比文字颜色深,第三个的核心是文字的颜色比背景色浅,投影向上颜色为深色且比背景色还深,第四个的核心是文字颜色比背景色深,投影向下颜色为浅色且比背景色浅,第五个核心是使用两个text-shadow,上下左右各便宜1px,颜色值一样。当然还有更多,但是因为不太常用或者因为有些只有webkit内核支持,在这就不一一列举,如果你感兴趣的话,可以点此查看更多CSS3 制作文字特效

@font-face:使用自定义字体

目前使用@font-face有两种方法,一种是直接调用google在线字体,加载google的css就可以了,另一种是直接下载需要的字体,我们可以通过font squirrel得到很多英文字体,且里面样式都已经写好了,我们拷贝过来应用就可以了,如果没有找到你想要的英文字体,这个网站还支持上传你的字体。注意中文字体目前搞不定呵呵

google font

custom font

css code

@import url(http://fonts.googleapis.com/css?family=Fredericka+the+Great);
.custom-font .demo{
	font-size:40px;
}
#google_font{
	font-family: 'Fredericka the Great', cursive;
	font-weight: 400;
}
@font-face {
    font-family: 'AmerikaRegular';
    src:local("AmerikaRegular"),url('fonts/AMERIKA_-webfont.eot');
    src: url('fonts/AMERIKA_-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/AMERIKA_-webfont.woff') format('woff'),
         url('fonts/AMERIKA_-webfont.ttf') format('truetype'),
         url('fonts/AMERIKA_-webfont.svg#AmerikaRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
#other_font{
	font-family: 'AmerikaRegular';
}

如果你还不知道如何使用google字体,或者你自己摸索下,或者你可以参考这篇文章Google Font的运用,如果你连@font-face都还不熟悉,那么建议你先阅读下这篇文章CSS3 @font-face,至于font squirrel,那就是下载拷贝喽,当然前提是你要了解@font-face

transform:旋转文字

01 Mar 2012

css code

@font-face {
    font-family: 'BitstreamVeraSansMonoRoman';
    src: local("BitstreamVeraSansMonoRoman"),url('fonts/VeraMono-webfont.eot');
    src: url('fonts/VeraMono-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/VeraMono-webfont.woff') format('woff'),
         url('fonts/VeraMono-webfont.ttf') format('truetype'),
         url('fonts/VeraMono-webfont.svg#BitstreamVeraSansMonoRoman') format('svg');
    font-weight: normal;
    font-style: normal;
}
#date_show{
    background-color: #00C5E3;
    padding: 45px 5px 0;
    position: relative;
	display:inline-block;*display:inline;*zoom:1;
	color:#fff;
}
#date_show .day {
    font-size: 40px;
    left: 5px;
    line-height: 45px;
    position: absolute;
    top: 0;
	text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5);
}
#date_show .month {
    font-size: 30px;
    text-transform: uppercase;
	line-height:1;
	font-family: 'BitstreamVeraSansMonoRoman';
	text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.2);
}
#date_show .year {
	-webkit-transform:rotate(-90deg);
	-moz-transform:rotate(-90deg);
	-ms-transform:rotate(-90deg);
	-o-transform:rotate(-90deg);
	transform:rotate(-90deg);
    display: block;
    position: absolute;
    right: -5px;
    top: 15px;
	color:#ededed;
}

注:因为我们的内容宽度实际是由month来撑开的,所以我们选择了一个字母间距相等的字体,不然各个月份的字母不一样,得到的宽度就不一样,那样效果就不一样了。关于ie的兼容可以考虑使用滤镜来实现,具体可参考Text Rotation with CSS

更多资料

小小赞助大大帮助

如果您觉得本文的内容对您的学习有所帮助:

支付鼓励

轻轻一点,是您对我的支持