、CSS字体样式

定义字体系列，大小，粗细和文字样式

（一）字体系列（font-family）

（二）字体大小（font-size）

（三）字体粗细（font-weight）

（四）字体样式（font-style）

（五）字体复合属性（font）

 p {
    font: font-style font-weight font-size/line-height font-family;
  }

不能更换顺序，必须保留font-size和font-family

二、CSS文本属性

定义文本外观，如：文本颜色，对齐文本，装饰文本，文本缩进，行间距等

（一）文本颜色（color）

（二）对齐文本（text-align）

(三）装饰文本（text-decoration）

（四）文本缩进（text-indent）

（五）行间距（line-height）

三、格式化代码

1. Emmet语法
   前身为Zen coding,它使用缩写来提高html/css的编写速度，VSCode内部已经集成该语法，快速生成HTML结构语法和CSS样式语法

2. 快速生成HTML结构语法

• 生成标签，直接输入标签按Tab键即可
• 生成多个相同的标签，标签加星号*键按Tab键
• 父子级关系的标签，可以用大于号>和enter键
• 兄弟关系的标签，可以用加号+和enter键
• 生成带有类名或id名字，可写成标签加.类名/#名加Tab键（p.one生成
• ）
• 生成.div类名是有顺序的，可用自增符号￥
• 生成标签的内部写内容，可用{}表示

3.快速生成CSS样式语法

• CSS基本采取简写形式即可（w 200 加Tab生成width: 200px;）
• 单词首字母加Tab键

4.快速格式化代码

• Shift+Alt+F/右键-格式化代码
• 保存页面时自动格式化代码（在设置中的文本编辑器中找到格式，勾选Format On Save即可，也可把Format On Type勾选上）

5.去掉li前面的项目符号

1、使用CSS属性指定和改变字体外观，常见的属性有：

font-style: italic; 定义字体的风格

font-weight: bold; 定义字体粗细

font-size: 20px; 定义字体大小

line-height: 30px; 定义一段文字的行高

还可以使用简写形式，把所有属性值放到font属性中，如：

p {

 font: italic bold 20px/30px 微软黑体;

}

2、Font-family 属性可以设置文字字体样式，比如常用的中文字体有：微软雅黑，黑体，宋体等；常用的英文字体有：Verdana，arial，Times New Roman等。Font-family 后面可以定义一个字体，也可以定义一个字体列表。为什么需要使用字体列表呢？因为我们无法控制用户计算机上安装什么字体，不仅如此，往往操作系统也不一样，比如在苹果的Mac电脑上有的字体，在微软的Windows上就不一定有，所以最好为字体指定一个可选的字体列表。字体列表实际上就是一个字体有限列表，如下，第一个微软雅黑是我希望使用的，浏览器会尽力加载这个字体，如果用户电脑上没有这个字体就使用第二个备用字体，依次类推，字体列表最后面应该制定一个通用字体系列。

p{

 font-family: 微软雅黑, 黑体, Arial, Helvetica, sans-serif;

}

3、什么是通用字体系列？在CSS中定义了5个通用字体系列：

· Sans-serif字体系列：无衬线字体，笔画粗细一致，在计算机屏幕上更容易阅读

· Serif字体系列：有衬线字体，笔画末端有装饰性的线条或凸起，报纸正文中使用的字体

· Monospace字体系列：等宽字体，每个字母宽度一致，用于显示软件代码示例

· Cursive字体系列：手写体

· Fantasy字体系列：装饰性字体，设计感较强

所以，候选字体列表中的字体通常来自于同一个字体系列，这样当浏览器找不到优先定义的字体使用备用字体时，页面展示的效果不会有太大的变化。如果前面指定的特定字体都没有找到，浏览器就从sans-serif字体系列中找一个默认的字体。

4、font-size 调整字体大小的方法有三种：

1）使用像素px，如：

注意：20和单位px之间不能有空格，文字的大小就是文字的最低部分和最高部分之间时20像素

2）使用%定义字体大小就是相对于父元素的字体大小，如：p标签时body的子标签，body定义的字体大小是20px，所以子标签p的字体大小是父标签的150%即30px。

3）使用em调整字体大小，类似于百分数，也是一个相对的度量单位，使用em的时候要指定一个比例因子，p标签是父标签字体大小的1.2倍即24px。

5、font-weight 属性可以改变字体的粗细，bold为粗体，normal为去掉粗体的样式。

字体的粗细还有lighter为稍细，bolder稍粗，或者使用数字100、200-900，但是这些都没有得到字体和浏览器的广泛支持，通常并不适用，了解即可。

6、font-style为字体增加风格

有三个可能的值：normal（正常），italic（斜体字符），oblique（倾斜文本）；其中italic是专门为正常字体设计的斜体字符，oblique没有专门的斜体字符，由浏览器负责把正常的字体倾斜显示，因为不是所有的字体定义了斜体字符，所以使用italic定义字体风格时，浏览器找不到这个字体的斜体字符，就通过oblique把正常的字体倾斜显示，有时候看着是一样的，有时候则不同，除非非要区分斜体和倾斜文本，不然可以选择一种使用。

7、line-height 调整行高，定义一个盒子内每一行文字之间的距离。

每天进步一点点，跟着教头学开发。

.什么是字体图标

可以看作一种特殊字体，其展示的是图标，而不再是文字，其拥有字体的特性，比如大小、颜色、透明效果、阴影等，字体图标加载快、不变形。也可以看作是矢量格式的图标。

2.字体图标常用免费资源

（1）iconmoon字体图标库：https://icomoon.io/app

（2）阿里iconfont字体图标库：https://www.iconfont.cn/

（3）font-awesome字体图标库：

3.字体图标使用步骤

以iconmoon为例

（1）选择需要的图标并下载

1）在fonts文件夹下有四种类型的字体文件，每种字体文件兼容浏览器的种类不同

a）.tff格式（TrueTypeFont），美国苹果公司和微软公司共同开发的，在Windows和Mac操作系统中为默认字体；IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile中的Safari4.2+等浏览器支持该字体。

b）.woff格式（Web Open Font Format-Web开放字体格式），是一种网页所采用的字体格式标准，使用zlib压缩，文件大小一般比TTF小40%；IE9+、FireFox3.6+、Chrome6+、Safari5.1+、Opera11.1+等浏览器支持该字体。

c）.eot格式（Embedded Open Type-嵌入式OpenType ）,微软设计用来在网页使用的字体格式，是OpenType字体的压缩格式，IE专用，IE4+支持该字体。

d）.svg格式（Scalable Vector Graphics-可缩放的矢量图形），它是一种用XML定义的语言，用来描述二维矢量及矢量/栅格图形；Chrome4+、Safari3.1+、Opera10+、IOS Mobile中Safari3.2+等浏览器支持该字体。

其他字体

e）.otf格式（Open Type Font），Microsoft和Adobe公司开发的，.otf格式比.ttf更为强大，可以把PostScript字体嵌入到TrueType中。

2）字体转换

https://www.fontke.com/tool/convfont/

（2）字体图标的引入

1）把字体放到项目的相应位置

将下载解压后的fonts文件夹放到项目路径下

2）在html页面中引入字体

利用CSS的@font-face属性，引入外部字体；

在style.css文件中有如下代码，为固定用法，注意url中字体路径，其它可以不变。

在html的style标签中引入如下代码：

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

3）为元素用该字体

span {
        font-family: "icomoon";
    }

4）为元素添加内容

复制demo.html中需要的图标，如下，将其作为元素的内容。

<span></span> 

（3）新增字体图标的引入

当利用iconmoon选用字体图标时，如果有新增的字体图标需要加入，则需要用到.json文件，如下，在原先选择的基础上，再选择新选择的字体图标，然后再下载使用。