码迷,mamicode.com
首页 > Web开发 > 详细

CSS3自定义字体.

时间:2014-09-27 18:59:40      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   使用   strong   文件   sp   div   

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

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

bubuko.com,布布扣

 

CSS3自定义字体.

标签:style   blog   http   color   使用   strong   文件   sp   div   

原文地址:http://www.cnblogs.com/hellome/p/3996963.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!