CSS3自定义字体.

终于看完了<响应式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>

最后的效果显示(灰常漂亮啊)