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

最新推荐文章于 2024-08-14 10:42:14 发布

freedom_文

最新推荐文章于 2024-08-14 10:42:14 发布

阅读量3w

点赞数 7

分类专栏： CSS font 文章标签： css html 字体 ttf CSS3

本文链接：https://blog.csdn.net/freedomVenly/article/details/78893957

版权

CSS 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

font

2 篇文章 0 订阅

订阅专栏

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

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

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

这里写图片描述

关于浏览器的兼容性问题

![这里写图片描述](https://imgconvert.csdnimg.cn/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcxMjI1MTU1NzI1Mjg1?x-oss-process=image/format,png)

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