html / CSS 自定义字体font 自己设置好看的特效字体

这篇文章的主题是CSS3属性 : @font-face

楼主很喜欢CSS3的一些新增属性,给我们前端程序员带来了非常很多福利,我们的页面也可以做的更加的美观。

直接放效果图吧,因为代码较长,放在最下面了;

这里写图片描述


关于浏览器的兼容性问题

这里写图片描述

Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。

Internet Explorer 9+ 支持新的 @font-face 规则,但是仅支持 .eot 类型的字体 (Embedded OpenType)。


在这顺便做个倡导: 全民抵制IE

( 不知道有木有用处 ~~o(>_<)o ~~ )


实用代码:

html

<body>

<div>
    <p class="cat1" style="margin-top: 50px;">个人喜欢的字体:你好啊!每天都要很开心哒!</p>
    <p class="sweet">个人喜欢的字体:你好啊!每天都要很开心哒</p>
    <p class="honey">个人喜欢的字体:你好啊!每天都要很开心哒!</p>
    <p class="flower">个人喜欢的字体:你好啊!每天都要很开心哒!</p>
    <p class="evil">个人喜欢的字体:你好啊!每天都要很开心哒!</p>
    <p class="blank">个人喜欢的字体:你好啊!每天都要很开心哒!</p>
    <p class="wing">个人喜欢的字体:你好啊!每天都要很开心哒!</p>
</div>

</body>

css

body{
    font-size: 18px;
}
div{
    width:650px;
    height:500px;
    margin:50px auto;
    padding:40px 0;
    background: url("bg1.jpg") no-repeat;
    background-size: cover;
}

div>p{
    margin-left:155px;
}
@font-face {
    font-family: myCatF;
    src: url("font/catH.ttf")
}

.cat1{
    font-family: myCatF;
    color:#f00;
}

@font-face {
    font-family: mySweet;
    src: url("font/tiantian.ttf")
}

.sweet{
    font-family: mySweet;
    color:#FF891F;
}

@font-face {
    font-family: myHoney;
    src: url("font/heart.ttf")
}
.honey{
    font-family: myHoney;
    color:#FFE379;
}

@font-face {
    font-family: myFlower;
    src: url("font/tiantian.ttf")
}

.flower{
    font-family: myFlower;
    color:#0f0;
}

@font-face {
    font-family: Evil;
    src: url("font/evil.ttf")
}

.evil{
    font-family: Evil;
    color:#00FFF0;
}

@font-face {
    font-family: blank;
    src: url("font/blank.ttf")
}

.blank{
    font-family: blank;
    color:#1FD1FF;
}

@font-face {
    font-family: wing;
    src: url("font/wing.ttf")
}

.wing{
    font-family: wing;
    color:#AA00FF;
}

(・-・*)
暂定这样,不忙了以后再来补充

楼主还有一篇关于字体设定的博客也作为参考:
http://blog.csdn.net/freedomvenly/article/details/78873712

展开阅读全文

没有更多推荐了,返回首页