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

r囧r小猫 2022-06-03 09:43 1022阅读 0赞

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

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

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

![这里写图片描述][format_png]

--------------------

### 关于浏览器的兼容性问题 ###

!\[这里写图片描述\](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>
 个人喜欢的字体：你好啊！每天都要很开心哒！
 个人喜欢的字体：你好啊！每天都要很开心哒
 个人喜欢的字体：你好啊！每天都要很开心哒！
 个人喜欢的字体：你好啊！每天都要很开心哒！
 个人喜欢的字体：你好啊！每天都要很开心哒！
 个人喜欢的字体：你好啊！每天都要很开心哒！
 个人喜欢的字体：你好啊！每天都要很开心哒！
 </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

[format_png]: /images/20220603/c11452b03e7a40859351ca520b01d4af.png