前端引用字体

比如引用icomoon.io网上免费的字体:

1.选中需要的免费的字体:

前端引用字体

双击即选中,再次点击即取消

2.下载这些选中的字体:点击最下面的按钮:

前端引用字体

点击即可看到你选中的字体:

前端引用字体

点击Download按钮即下载,等待下载完即下载完成

3.在页面引用,在你的项目创建font文件夹,将下载的资源里面中的fonts文件夹中的文件全部复制到你创建的font文件夹中,将style.css文件夹全部复制到你的全局样式中(记得是style.css文件中全部代码,否则会出现引用失败):
前端引用字体

①使用fontCreator编辑器打开icomoon.woff文件,可以看到具体的图标信息,及图标的名字(这个很重要):

前端引用字体

②在你的全局样式文件中可以看到你添加的代码,(为啥是在全局样式文件中定义,以为你有可能其他页面都要引用)如:(正常的情况下名字都不用修改,直接在页面中引用下面字体的名字即可(如下面代码中字体的名字:icon - close)):

前端引用字体

③页面中引用:

前端引用字体

④完成:

前端引用字体

注意:如果引入的字体太小,可以通过css中的字体属性来改变该引用字体的大小

前端引用字体