初识CSS-字体图标

大有学问# #头条创作挑战赛#

什么是字体图标？

在html代码中是以文字元素的形式出现，但在网页渲染时却以图片的形式显示的小图标就叫做字体图标。

常见形式：地址、电话、登录窗口的头像等。

字体图标与精灵图对比

字体图标比精灵图更为轻量化，在网页中加载速度更快；

精灵图在实际使用中，图片放大或缩小时图片会失真。

精灵图是一张多个图标整合的一个大图片，后续添加或修改图标不方便。

注：

虽然字体图标好处多多，但是它并不能替代精灵图。

当小图标形式简单且个数较少时适合使用字体图标；

当小图标形式复杂且个数较多时适合使用精灵图。

字体图标哪里来？

icomoon网站：https://icomoon.io/。

阿里iconfont字库：https://www.iconfont.cn/。

字体图标使用方法

以icomoon网站为例。

从网站中下载图标压缩包：点击右上角“IcoMoon App”按钮，进入字体图标选择页面。

icomoon网站首页

选中需要的图标（选中状态的图标，背景颜色会变白且出现黄色边框）后，个数可以选择1个，也可以选择多个。选好图标后，点击右下角“Generate Font ”按钮进入下载页面。

字体图标选择页面

点击右下角“download”按钮进行下载。

icomoon网站图标下载页面

解压下载好的压缩包。

字体图标下载文件解压后的文件夹

将解压好的文件夹整体添加到项目文件夹中，我没有单独设置字体文件夹，直接放在素材图片文件夹了。

项目文件夹目录

打开字体图标文件夹中style.css，

复制字体声明到html文件的style样式中，改变url的图标文件存放位置。

span标签中字体样式需要与字体声明中样式保持一致。

字体图标调用

在html文件中，span标签的内容是需要从网站中直接粘贴复制过来使用。在网站下载页面，鼠标点击就是选中状态，直接ctrl+c复制即可。

字体图标的代码样式调用

如此就是完整的字体图标使用过程。另外有阿里iconfont也可以使用，也是免费的。有兴趣可自行了解。

字体图标代码示例

<style>
  /* 字体声明 ：从下载字体图标的文件夹中style.css文件上复制过来的*/
  @font-face {
    font-family: 'icomoon';
    src:  url('../images/icomoon/fonts/icomoon.eot?49yzcu');
    src:  url('../images/icomoon/fonts/icomoon.eot?49yzcu#iefix') format('embedded-opentype'),
          url('../images/icomoon/fonts/icomoon.ttf?49yzcu') format('truetype'),
          url('../images/icomoon/fonts/icomoon.woff?49yzcu') format('woff'),
          url('../images/icomoon/fonts/icomoon.svg?49yzcu#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  span {
    font-family: 'icomoon';
    font-size: 100px;
    color: antiquewhite;
  }
</style>

span标签的内容就是从字体图标上粘贴下来的

代码运行效果图

好了，今天的学习就到这里了，下回学习CSS三角~

天说了CSS字体属性的大小，font-family, 今天我们来一起学习下字体属性的字体粗细 font-weight

还是使用昨天的那首诗，让诗句中的最后一句显示粗体，看下效果:

可以看到最后一句显示粗体了，我们来查看下对应的代码:

<!DOCTYPE html>

<head>

<title>CSS字体属性之字体粗细和样式</title>

<style>

.bold {

font-weight:bold;

}

</style>

</head>

<body>

<h2>明月几时有</h2>

<p>明月几时有，把酒问青天</p>

<p>不知天上宫阙，今夕是何年</p>

<p>我欲乘风归去，又恐琼楼玉宇</p>

<p>高处不胜寒，起舞弄清影，何似在人间。</p>

<p>人有悲欢离合，月有阴晴圆缺，此事古难全</p>

<p class="bold">但愿人长久，千里共婵娟。</p>

</body>

</html>

字体粗细中的参数包括: normal | bold | bolder | lighter | number(自定义)

我们来试试lighter和number自定义吧

可以看到红框的字体都已经设置好了，对应的代码为:

<!DOCTYPE html>

<head>

<title>CSS字体属性之字体粗细和样式</title>

<style>

.bold {

font-weight:bold;

}

.lighter {

font-weight:lighter;

}

.number {

font-weight: 900;

}

</style>

</head>

<body>

<h2>明月几时有</h2>

<p class="lighter">明月几时有，把酒问青天</p>

<p>不知天上宫阙，今夕是何年</p>

<p class="number">我欲乘风归去，又恐琼楼玉宇</p>

<p>高处不胜寒，起舞弄清影，何似在人间。</p>

<p>人有悲欢离合，月有阴晴圆缺，此事古难全</p>

<p class="bold">但愿人长久，千里共婵娟。</p>

</body>

</html>

这里需要记住的一点，number自定义数字后不需要加上px

那么是否可以对标题的字体进行粗细设置呢？

答案是可以的，一起来看下

可以看到标题中的字体变为正常的了，对应的代码如下:

<!DOCTYPE html>

<head>

<title>CSS字体属性之字体粗细和样式</title>

<style>

.bold {

font-weight:bold;

}

.lighter {

font-weight:lighter;

}

.number {

font-weight: 900;

}

h2 {

font-weight: normal;

}

</style>

</head>

<body>

<h2>明月几时有</h2>

<p class="lighter">明月几时有，把酒问青天</p>

<p>不知天上宫阙，今夕是何年</p>

<p class="number">我欲乘风归去，又恐琼楼玉宇</p>

<p>高处不胜寒，起舞弄清影，何似在人间。</p>

<p>人有悲欢离合，月有阴晴圆缺，此事古难全</p>

<p class="bold">但愿人长久，千里共婵娟。</p>

</body>

</html>

加上了对h2的字体设置

好的，今天就是我们对字体粗细的学习，大家加油，十一马上就要结束了，88

午说了CSS字体的颜色属性，下午来说下字体的文本对齐text-align和文本装饰text-decoration

text-align属性用于设置元素内文本内容的水平对齐方式。语法规则如下:

div {

text-align:center;

}

除了有center属性外，还有另外两个属性:

left 左对齐(默认值)

right 右对齐

先看下居中效果:

对应代码为:

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

text-align: center;

}

</style>

</head>

<body>

<div>人保好，还是平安好呢？一个是央企，一个是巨头</div>

</body>

</html>

然后是文案左对齐，看下效果:

对应代码为:

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

text-align: left;

}

</style>

</head>

<body>

<div>人保好，还是平安好呢？一个是央企，一个是巨头</div>

</body>

</html>

最后是右对齐，看下效果:

对应的代码为:

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

text-align: right;

}

</style>

</head>

<body>

<div>人保好，还是平安好呢？一个是央企，一个是巨头</div>

</body>

</html>

如果不写文字对齐的属性，看下默认应该都是左对齐，效果如下:

对应代码为:

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/* div {

text-align: right;

} */

</style>

</head>

<body>

<div>人保好，还是平安好呢？一个是央企，一个是巨头</div>

</body>

</html>

可以看到已经将text-align代码注释掉了，默认展示就是左对齐

今天先到这里，大家学习工作辛苦了~

在线咨询

上一篇：详细解析html字体属性
下一篇：前端 - HTML基础（2）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

初识CSS-字体图标

什么是字体图标？

字体图标与精灵图对比

字体图标哪里来？

字体图标使用方法

字体图标代码示例

您的项目需求