品优购项目（HTML CSS）

一、网站图标favicon.ico

1.首先把favicon.ico 这个图标放到根目录下。

2.再html里面，  head 之间 引入 代码。

  > <link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>

注意：对ico文件的大小有一定的要求，一般情况下设置成32*32即可，如果设置过大，可能会无法显示

如果有了一张过大的ico文件，将其转换为较小尺寸即可

下面的网站即可实现这种转化：

https://www.aconvert.com/cn/image/ico-to-png/ 

二、网站优化三大标签

 2.1 网页title标题

 

建议：

首页标题：网站名（产品名）- 网站的介绍    

例如：

品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！

小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站

2.2 Description  网站说明

<meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />

注意点：

1. 描述中出现关键词，与正文内容相关，这部分内容是给人看的，所以要写的很详细，让人感兴趣， 吸引用户点击。

2. 同样遵循简短原则，字符数含空格在内不要超过 120  个汉字。

3. 补充在 title  和 keywords  中未能充分表述的说明.

4. 用英文逗号 关键词1,关键词2

2.3 Keywords 关键字

Keywords是页面关键词，是搜索引擎关注点之一。Keywords应该限制在6～8个关键词左右，电商类网站可以多 少许。

2.4 总结 

1. 我们的网页要做的优秀，符合搜索引擎的要求，才可以让搜索引擎优先显示我们的网页。  

所以我们的网站要做很多的优化， 其中就有这三大标签。 

2. 一般情况下，三大标签里面的优化词，都是专门的优化人员写的，我们大概了解一下规范就可以了。

3. 我们的主要任务是，能写出这三大标签， 然后把优化人员给我们的内容，添加到里面。

三、字体图标

图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。 我们后面会学习移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出现了，额不是出现了，是以前就有，是被从新"宠幸"啦。。 这就是字体图标（iconfont).

3.1  字体图标优点

• 可以做出跟图片一样可以做的事情,改变透明度、旋转度，等..
• 但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等...
• 本身体积更小，但携带的信息并没有削减。
• 几乎支持所有的浏览器
• 移动端设备必备良药...

3.2   字体图标使用流程

 

3.2.1 设计字体图标

假如图标是我们公司单独设计，那就需要第一步了，这个属于UI设计人员的工作， 他们在 illustrator 或 Sketch 这类矢量图形软件里创建 icon图标， 比如下图：

 

 

  之后保存为svg格式，然后给我们前端人员就好了。 

  其实第一步，我们不需要关心，只需要给我们这些图标就可以了，如果图标是大众的，网上本来就有的，可以直接跳过第一步，进入第三步。

3.2.2 上传生成字体包

   当UI设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件， 而且需要生成的是兼容性的适合各个浏览器的。

​    推荐网站： http://icomoon.io

* icomoon字库

IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。 内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。

* 阿里icon font字库

http://www.iconfont.cn/

这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。 一个字，免费，免费！！ 

3.2.3 下载兼容字体包

刚才上传完毕， 网站会给我们把UI做的svg图片转换为我们的字体格式， 然后下载下来就好了

当然，我们不需要自己专门的图标，是想网上找几个图标使用，以上2步可以直接省略了， 直接到刚才的网站上找喜欢的下载使用吧。

<img src="media/fontt1.png" />

<img src="media/fontt2.png" />

3.2.4 字体引入到HTML

得到压缩包之后，我们得知字体图标 本质就是 字体文件。 注意这个压缩包不要删掉，我们后面还有用的。

最后一步，是最重要的一步了， 就是字体文件已经有了，我们需要引入到我们页面中。

3.2.4.1 首先把 fonts文件夹放入我们 根目录下  

 

3.2.4.2 html标签内里面添加结构

 

 <span></span>  

3.2.4.3 在样式里面声明字体： 告诉别人我们自己定义的字体(一定注意字体文件路径的问题)

@font-face {
     font-family: 'icomoon';
     src:  url('fonts/icomoon.eot?7kkyc2');
     src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
       url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
       url('fonts/icomoon.woff?7kkyc2') format('woff'),
       url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
     font-weight: normal;
     font-style: normal;
   }

3.2.4.4 给盒子使用字体 

span {
   font-family: "icomoon";
   }

 

3.2.5 追加字体图标

   如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标，但是原来的不能删除，继续使用，此时我们需要这样做

   把压缩包里面的selection.json 从新上传，然后，选中自己想要新的图标，从新下载压缩包，替换原来文件即可。