CSS（十七）——Web字体和图标（内含at-rule）

前言

本篇笔记主要记录的是Web字体和图标，在此之前会先记录两个at-rule的相关知识点。具体解释如下：

标题中的at-rule是官方原文，不是特别好翻译，所以国内一般音译为：@规则。由此根据音译以及其概念的本身含义衍生出的叫法为：@语句、CSS语句以及CSS指令，一般文章或者教程中这些概念都指同一个概念。

文章目录

• CSS（十七）——Web字体和图标（内含at-rule）
• • 前言
  • 概述
  • CSS指令详细说明
  • • @import
    • @charset
    • @font-face
  • Web字体和字体图标的详解
  • • 字体图标
• 总结

概述

• 对于at-rule（以下简称为CSS指令）来说，其概念就是CSS的规则，该规则并非用户自定义的，有点类似于JAVA语言中对于项目中某些功能使用什么样子的工具（引入JAR包）或者对编译器中某些方面设定一个外部的样式（规则）。

以上仅为个人的判断，如有纰漏，恳请指正。

• Web字体的作用是解决在用户电脑上没有下载安装相应字体的前提下的样式统一。其工作原理是：强制用户电脑下载改字体。——用户无法察觉。

CSS指令详细说明

CSS指令的书写方式为：@xxx，其中“xxx”表示CSS指令中的关键字。本篇笔记将会记录两个最常用（简单）的CSS指令，后续笔记会有补充。

@import

对于Java语言的程序员对import很熟悉，Java语言中是引入相关类文件的作用。在CSS中也是类似的含义。表示引入一个外部CSS文件。标准语法如下：

该指令写在外部文件里，浏览器在读取到包含该指令的样式表时，遇到该指令会先读取该指令所引入的外部样式表。

@charset

该指令的含义与单词含义一致，表示当前文件的字符编码集。具体写法如下：

• “xxx”表示字符编码集，常见的有：gb2312、utf-8等；
• 该指令必须写在外部文件的第一行。
• 该指令主要是为了解决文件中的中文字符，如果文件中没有中文字符的话可以省略掉。

@font-face

该指令表示制作一个新字体。

@font-face{
	font-family:"字体名字";
	src:url("字体文件的位置");
}
           

• font-family：这是给字体起名字，后续元素中使用该文字的话应使用该属性值。
• src：中表示字体资源的位置，可以也是站外资源。

如果在页面中，使用了这个字体，那么浏览器会通过字体所制定的文件位置，强制客户端浏览器下载改字体

【注】：关于上述字体文件的下载是一种临时下载，可以理解为缓存，关闭浏览器后就清除，直到在此打开该网页的时候才会重新下载。

Web字体和字体图标的详解

Web使用过多的话会造成网页响应速度较慢，而且大部分用户使用浏览网页的时候并不会太过于关心字体的样式。所以，Web字体在网页中使用的并不多，不过有Web字体的概念引出了一个字体图标的概念。

字体图标

字体图标的作用一般是用来制作页面中美美的图标，例如：购物车、订单、用户信息按钮等。本篇笔记不记录如何制作美美的字体图标（未来记录的可能性也比较渺茫），仅记录如何使用字体图标。

目前国内最大的字体图标网站是：iconfont.cn。是阿里旗下的网站。简单介绍一下如何使用网站：

• 进入网站后，选择登陆。——目前只有两种我们可以使用的登陆方式（GitHub、微博），另外一种是阿里内部使用的。
• 登陆之后可以找到自己需要的字体图标加入购物车；
• 在购物车中将所有添加后的图标添加至项目（可以新建项目）；
• 然后在项目中选择下图中红色方框选中的位置

• 点击生成代码，然后就可以复制当前选中的所有字体图标的css文件的路径地址了；
• 接下来将复制的路径地址在html页面中用引入css文件的方式引入；

• 然后在页面中书写以下代码：

【注】：iconfont是引入该字体图标必须具备的类（感兴趣的看引入的css文件源代码）；icon-yonghu表示使用的是哪个图标。一切都是从第五步中网站为我们生成的css文件中设置的。

我们在网站中使用的字体图标都属于字体，即我们可以使用修改字体的样式来修改字体图标。自己可以试试。

另：也可以选择下载至本地使用。具体使用方法一样，仅需要将引入的css文件地址换为本地下载的地址即可。这样就可以简单的制作一些稍微精美的页面了。

【注】：一切下载的本地的字体图标文件，都要考虑字体文件互相能否读取的问题（源码中默认在当前文件下读取，放在不同的位置后需要修改css文件中读取字体图标的路径）。

• 以上说明了一种使用方法，即：font-class的方式，剩下的方式大同小异，自己尝试。个人建议使用font-class（考虑语义化和代码可读性）。

总结

本篇笔记仅记录了两个最常用的CSS指令，CSS指令本身并不多，后续会有相关的补充（我承认，因为懒，不想写了）。

关于字体图标需要记住，本质上属于字体，效率上要比图片更好。但不代表雪碧图不会使用，毕竟不是所有的图标都可以在网站上找到（你也可以自己做），所以如果有雪碧图的话，还是用雪碧图来操作吧，别让UI设计师心碎。