在有些网站我们可以看到很酷炫的文字, 在CSS3之前只能使用图片来替换, 在CSS3中我们就可以使用自定义字体.

自定义字体也叫web字体图标

一. 自定义字体语法


@font-face {
    font-family: myFont; /*自定义字体的名字*/
    src: url("");  /*自定义字体的路径, 可以是相对路径,也可以是绝对路径*/
}

注意:

  • 还可以在其中添加font-weight, font-style属性.

  • web字体需要设计师提前把字体设计好, 我们才可以使用.


二. 自定义字体实战

先从网站下载一些免费的字体.

阿里妈妈字体库 有字库


@font-face {
    font-family: my_font;
    src: url('font/iconfont.eot?t=1523759983215'); /* IE9*/
    src: url('font/iconfont.eot?t=1523759983215#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('font/data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
    url('font/iconfont.ttf?t=1523759983215') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('font/iconfont.svg?t=1523759983215#iconfont') format('svg'); /* iOS 4.1- */
}

i {
    font-family: my_font;
    font-size: 60px;
    font-style: normal;
}

<i>&#xe624;</i><i>&#xe625</i>

Copyright © 李振超 2018 all right reserved,powered by Gitbook
该文件最后修订时间: 2018-10-18 03:21:02

results matching ""

    No results matching ""