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

CSS3入门之字体

时间:2018-03-07 16:26:07      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:url   inter   计算机   font   back   opera   int   font-face   type   

在CSS3之前,必须使用已经在用户计算机上安装好的字体,给Web设计带来很大的局限性。现在,通过CSS3,Web设计师可以使用他们喜欢的任意字体。

1、@font-face引入网络字体

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

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

不兼容IE8,IE8-。

示例:

<style>
    @font-face {
        font-family: SentyPaperCut;
        src:url(http://hstarcdn.github.io/fonts/SentyPaperCut.ttf);
    }
    @font-face {
        font-family:SentyCreamPuff;
        src:url(http://hstarcdn.github.io/fonts/SentyCreamPuff.otf);
    }
    .font1,.font2{
      font-size: 50px;
    }
    .font1{
      color: red;
      font-family: SentyTEA-Platinum;
    }
    .font2{
      color: blue;
      font-family: SentyCreamPuff;
    }
</style>

<span class="font1">
  自定义字体演示
</span>
<span class="font2">
  自定义字体演示
</span>

 

CSS3入门之字体

标签:url   inter   计算机   font   back   opera   int   font-face   type   

原文地址:https://www.cnblogs.com/yourName/p/8522641.html

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