首页 > Web开发 > 详细

CSS3入门之字体

时间:2018-03-07 15:55:24      阅读:178      评论:0      收藏:0      [点我收藏+]

在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入门之字体

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!