终于看完了<响应式WEB设计:HTML5+CSS3实战>这个书啦,那个高兴.
看完后学了一些东西,在这里记一下如何用CSS3实现自定义的字体效果.
首先去下载些自己想要的字体,放在文件目录下面.
1:在Css中用@font-face定义字体
1 @font-face{ 2 font-family:'myfont'; //你想给你的自定义的文字起一个什么样的名称[请自便] 3 src:url(./yizhuifangxiu.ttf);//你自定义文字文件的路径 4 font-weight:700; 5 font-style:normal; 6 }
以上的定义后就可以在其他的标签中使用我们自定义的字体了.
例如我在一个DIV中的文字实现自定义字体的效果如下:
div{ /* 应用字体样式 */ font-family:'myfont'; font-size:80px; /* 制作文字阴影效果 */ text-shadow:-1px -1px 2px white, -2px -2px 2px white, -3px -3px 2px white, -4px -4px 2px white, -5px -5px 2px white, 1px -1px 2px white, 2px -2px 2px white, 3px -3px 2px white, 4px -4px 2px white, 5px -5px 2px white, 0px 01px 2px white, 0px 02px 2px white, 0px 03px 2px white, 0px 04px 2px white, 0px 05px 2px white; }
HTML代码
1 <body> 2 <div>Hello World</div> 3 </body>
最后的效果显示(灰常漂亮啊)
