Android 程序员搞 Web 之 CSS（六）

一、HTML 开发引入图标字体

1、字体下载网站

Fontello - icon fonts generator
IcoMoon
iconfont

2、字体引入

1）、下载后的字体库解压如下：
字体库解压示意图
2）、这里面有用的文件和文件已经标出，将 fonts 文件夹拷贝到自己的项目当中，如图：
添加字体到项目

3）、在 style 标签内添加如下代码，目的是引用字体

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

4）、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东Test</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('../fonts/icomoon.eot?aorssu');
            src: url('../fonts/icomoon.eot?aorssu#iefix')
            format('embedded-opentype'),
            url('../fonts/icomoon.ttf?aorssu') format('truetype'),
            url('../fonts/icomoon.woff?aorssu') format('woff'),
            url('../fonts/icomoon.svg?aorssu#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        span {
            font-family: "icomoon", serif;
            font-size: 20px;
        }
    </style>
</head>
<body>
<span></span>
</body>
</html>

span 标签内虽然只有一个方框但是表示出来的形式如下：
字体银行卡
下载的文件夹内的 .json 文件也不能删除，用于后期追加图标使用。

二、网页标签引入图标

  <link rel="shortcut icon" href="favicon.ico"/>

注意：1、所有的图标均命名为“favicon.ico”；
2、该图标放在根目录下；

三、网页的三大标签

1、网页 title 标题

定义：属于网页的重要标签，是搜索引擎了解网页的入口。
注意：
1）、长度： google 35个中文字、百度 28个中文字
2）、最先出现的词语权重越高；
3）、主要关键词出现3次；辅关键词 1次；
标签：title

2、网站说明

定义：当搜索引擎所说出官网时的说明；
属性：name ：description ；content ：介绍的内容；keyword ：搜索的关键字，搜索引擎关注点。
注意：
1)、内容与正文相关，提供给用户查看，应该负有吸引力；
2）、包含空格不得超过120字；
3）、补充 title 和 keywords 内未能充分表述的说明；
4）、使用英文逗号。
标签：meta

3、零散知识复习

1）、position 属性：默认将控件默认转化为行内块，而行内块没有宽度，是根据内容确定宽度的，所以需要 width 属性：；
2）、控件展示，或者叠加顺序，最底层到最上层：标准流—>浮动---->定位；
3）、只有对于定位控件 z-index 属性才起作用；
4)、图片引用需要添加如下属性
因为图片是与文字基线对齐的，导致父容器被撑大。

img {
    vertical-align: top;
}

附赠京东主体网站搭建 demo ：JD-Demo

Android 程序员搞 Web 之进阶（七）

欢迎关注