关于html5:字体图标的使用

1 进入网站 https://icomoon.io/app/#/sele… 下载字体

2 将下载下来的文件解压,将fonts文件夹放入我的项目根目录



3 拷贝style.css文件中的”@font-face”对象拷贝进style,援用字体

@font-face {

    font-family: "icomoon";
    src: url("fonts/icomoon.eot?25srv6");
    src: url("fonts/icomoon.eot?25srv6#iefix") format("embedded-opentype"),
      url("fonts/icomoon.ttf?25srv6") format("truetype"),
      url("fonts/icomoon.woff?25srv6") format("woff"),
      url("fonts/icomoon.svg?25srv6#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }

4 拷贝字体的特殊符号即可应用,并且特殊字符就是字体,能够设置font相干的属性

详情代码如下:

<!DOCTYPE html>
<html lang=”en”>
<head>

<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>字体图标的应用</title>
<style>
  /* 1 进入网站 https://icomoon.io/app/#/select/font 下载字体
  2 将下载下来的文件解压,将fonts文件夹放入我的项目根目录
  3 拷贝style.css文件中的"@font-face"对象拷贝进style,援用字体
  4 拷贝字体的特殊符号即可应用,并且特殊字符就是字体,能够设置font相干的属性 */
  @font-face {
    font-family: "icomoon";
    src: url("fonts/icomoon.eot?25srv6");
    src: url("fonts/icomoon.eot?25srv6#iefix") format("embedded-opentype"),
      url("fonts/icomoon.ttf?25srv6") format("truetype"),
      url("fonts/icomoon.woff?25srv6") format("woff"),
      url("fonts/icomoon.svg?25srv6#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }

  span {
    font-family: "icomoon";
    font-size: 100px;
    color: pink;
  }
</style>

</head>
<body>

<span></span>

</body>
</html>

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据