以前CSS3的版本,网页设计师不得不使用用户计算机上已经安装的字体。
使用CSS3,网页设计师可以使用他/她喜欢的任何字体。
当你发现您要使用的字体文件时,只需简单的将字体文件包含在网站中,它会自动下载给需要的用户。
-----以上内容摘抄自RUNOOB.COM
我由此想到了以前接触过一种技术,即由美工用一些矢量绘图工具,绘制一些ICON,然后通过一个网站(https://icomoon.io/app/#/select),帮助我们生成一堆文件,生成完成后,这个ICON已经变成了一种字体,也就是说,我们可以改变它的字体大小,字体颜色,hover事件等等。
值得一提的是,上面提到的网站,本身已经提供了许多现成的ICON,供一些没有美工帮助的前端人员去寻找自己需要的字体图标。
今天在看CSS3字体的时候,想到这个知识点,原因是当初了解的不是很深,只是知道它的一个流程,原理并不清楚。
CSS3中,支持任何字体,以前的前端人员,在写页面的时候,字体基本上就是用微软雅黑,宋体,仿宋等常见的字体,最重要的原因就是担心如果用了一些不常见的字体,然后用户电脑没有安装这种字体就会出现异常情况。
但CSS3弥补了这个缺陷。
我们可以通过以下方式,使用任何我们想用的字体,都不会出现异常:
@font-face{
font-family:'字体名称(可自己定义)';
src:url(字体文件路径)
}
以上代码就帮助我们增加了一种新的字体,这个时候即使用户电脑中没有这种字体,我们也可以放心的使用
div{
font-family:'上面font-face中定义的font-family的名字';
}
那么现在问题来了,为什么会把这两件事联系起来?我还记得当时问那个教我这个知识点的那个同事一个问题,引入了这个文件,所有的字体都会变成ICON形式的吗,相当于发明了一种新的字体吗(现在想起来真是愚蠢)。
当然不是。
这两者的区别是,我上面写的这个例子,是引入了一个完整的字体文件,它里面是包含了对所有已知汉字的对该字体的风格化处理的,所以引入了这个字体文件,就可以保证网页中用到的所有文字都是这个字体的风格,但前面说到的图标字体,其实硬要说的话,也可以理解成一个字体文字(或者说本质上就是),但它里面只有一个文字,就是我们用到的那个ICON,我们只是通过某种技术,把它变成文字的格式了。