关于网站优化三大标签和字体图标的引入

网站优化的三大标签

01 标题 : <title>品优购</title>
02 网站关键词:<meta name="keywords" content="IT培训,Java培训,人工智能培训,Python培训,PHP培训,C++培训,大数据培训,UI设计培训,移动开发培训,网络营销培训,web前端培训,全栈工程师培训,产品经理培训" />
03 网站描述: <meta name="description" content="传智播客专注IT培训,Java培训,人工智能培训,Python培训,PHP培训,C++培训,大数据培训,UI设计培训,移动开发培训,网络营销培训,web前端培训,全栈工程师培训,产品经理培训。" />
关于网站优化三大标签和字体图标的引入


字体图标下载

http://icomoon.io
http://www.iconfont.cn/

icomoon字体图标的引入

第一步 下载
第二步 复制fonts文件夹到项目文件夹
关于网站优化三大标签和字体图标的引入       关于网站优化三大标签和字体图标的引入
第三部 声明字体  拷贝代码(注意路径)
注意src后面url的路径选择
一般加到公用样式
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?w0bxb9');
  src:  url('../fonts/icomoon.eot?w0bxb9#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?w0bxb9') format('truetype'),
    url('../fonts/icomoon.woff?w0bxb9') format('woff'),
    url('../fonts/icomoon.svg?w0bxb9#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

第四步 调用和样式设置
打开demo.html选择对应的图标,复制后面的小框
关于网站优化三大标签和字体图标的引入
复制以后的小框直接给想要调用的标签到内容一般会显示什么都没有和空格一样或者显示一个带框的?
样式设置给调用的标签设置值font-family: 'icomoon';

关于网站优化三大标签和字体图标的引入iComoon图标的追加

之前现在的Icomoon压缩包不能删除要留着,方便我们后期开发
关于网站优化三大标签和字体图标的引入
关于网站优化三大标签和字体图标的引入

Iconfont阿里巴巴字体库

http://www.iconfont.cn/

下载图标

01 选择自己想要的图标添加到购物车
02 点击购物车--- 添加到项目
关于网站优化三大标签和字体图标的引入
03 如果咩有项目可以新建一个自己的项目
关于网站优化三大标签和字体图标的引入
关于网站优化三大标签和字体图标的引入
04 点击确定  --- 跳转到我发布的项目
关于网站优化三大标签和字体图标的引入
05 下载图标 ---- 下载至本地 --- 解压
关于网站优化三大标签和字体图标的引入
06 复制需要7个文件 到项目的fonts文件夹里面
关于网站优化三大标签和字体图标的引入
07 字体引入
在demo_index.html里面有步骤
关于网站优化三大标签和字体图标的引入

如何追加阿里巴巴字体?

直接在阿里巴巴字体库将需要的字体加到购物车,然后添加到我们想要添加的项目,然后下载将之前文件替换掉;
注意:我们下载的压缩包或者解压后的文件夹千万不能删除;