CSS3自定义字体.

最新推荐文章于 2024-05-06 10:28:14 发布

alisa6655

最新推荐文章于 2024-05-06 10:28:14 发布

阅读量127

点赞数

原文链接：http://www.cnblogs.com/hellome/p/3996963.html

版权

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

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

转载于:https://www.cnblogs.com/hellome/p/3996963.html

alisa6655

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3自定义字体.

终于看完了<响应式WEB设计:HTML5+CSS3实战>这个书啦,那个高兴.看完后学了一些东西,在这里记一下如何用CSS3实现自定义的字体效果.首先去下载些自己想要的字体,放在文件目录下面.1:在Css中用@font-face定义字体1 @font-face{2 font-family:'myfont'; //你想给你的自...
复制链接

扫一扫