一、CSS字体样式设置

1.字体样式设置

字体样式大致有如下几种特征：

字体类型（风格）、字体粗细、字体大小、字体系列

(1)字体类型（风格） font-style

用于设置字体风格，可设置以下值：

①normal：普通字体

②italic：斜体

③oblique：倾斜字体

(2)字体粗细 font-weight

用于设置字体粗细，可设置以下值：

①normal：正常粗细

②bold：粗体

③bolder：更粗的字体

④lighter：更细的字体

⑤100~900：步长为100，

400 等同于 normal，而 700 等同于 bold

(3)字体大小 font-size

用于设置字体大小的，可设置任意正整数和浮点数

默认情况下，几乎所有的浏览器的默认字体大小都为16px. 且Chrome等主流浏览器不支持12像素以下的字体。

(4)字体系列 font-family

用于设置字体系列，就是我们通常说的“所用字体”。

设置字体有以下规则：

1.使用中文字体，或带空格的英文字体名，需要用“引号”将该字体名扩起来

2.单个单词的字体名称则无需加上引号。

3.“font-family”可以有多个值，多个值设置的作用是，当浏览用户本地计算机没有找到设置的第一个值所表示的字体时，会去找第二个，以此类推，若找到最后一个值都没有找到匹配的字体，浏览器则会用自己的默认字体。

4.考虑到网页最终显示效果在不同设备上的一致性，我们通常使用的中文字体只有：“宋体”、“微软雅黑”、“黑体”、“楷体”、“幼圆”等，而目前以“微软雅黑”为最常用设计字体。

5.常用的英文字体有：“Arial”、“Helvetica”、“Tahoma”、“Verdana”、“Lucida Grande”、“Times New Roman”、“Georgia”等。

2.组合值写法

(1)给上所有的属性

我们能将“font”的多个值组合起来写，比如我们要设置一个

风格为正常，粗体，20像素大小，“微软雅黑”

和

风格为斜体，正常粗细，字号为22像素，“宋体”

我们可以这样写：

Css代码

(2)省略字体类型或字体风格之一，或都省略

1.所以在写“font”属性组合值的时候可以省略二者之一，以辨识到的值进行设置，另外一个自动为“normal”，

2.甚至还能省略掉第前两个值，只保留“font-size”和“font-family”

即：style,weight可只给上任意一个，或者都给，或者都不给，顺序也可以换，但是要在前两个。

如：

CSS代码

注意：

在“font”组合值的写法中，只有“font-size”和“font-family”这两个的值是不能省略的，而且是缺一不可，顺序也是要先大小后系列不能变，否则浏览器会不认识该值，对该组合值进行报错。

(3)在font内设置文本行高

“font”属性组合值的写法，除了以上所提到的，它还有一种比较不常见，却还比较实用的写法，即可直接在“font”属性内设置文本的行高“line-height”，如下：

3.扩展：字体单位px ,em , rem【必须掌握】

①px（像素，相对于显示器屏幕分辨率而言）

②em（相对当前元素内文本的字体尺寸，会继承父元素大小）

③rem （相对HTML根元素，最常用的单位）

PX

1.像素px是相对于显示器屏幕分辨率而言的。

2.PX特点

1. IE无法调整那些使用px作为单位的字体大小；

2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；

3. Firefox能够调整px和em，rem。大部分中国网民使用IE浏览器(或内核)。

3.当把一个图放大后，看到很多矩形的小方块，那些就是像素。

EM

4.em是相对长度单位。相对于当前标签内font-size的大小而言。

5.如果当前标签字体尺寸未被人为设置，当前标签内font-size的大小会继承父标签的字体大小。

【如果父标签也没设置大小，那么就会找到继承的顶点–>浏览器的默认16px字体大小。所以，默认情况16px==1em 】

6.如果设置了就会以设置font-size大小为准。

7.在主流浏览器中，字体的大小不能小于12px (宽高可以小于12px),如果字体大小小于12px,那么会强制变为12px.

<div style="font-size: 10px;">你好啊</div><div style="font-size: 12px;">你好啊</div><div style="font-size: 14px;">你好啊</div><div>你好啊</div>

8.EM特点

em的值并不是固定的；

em会继承父级元素的字体大小。

REM

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。

9.rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

10.rem单位兼容问题

目前，除了IE8及更早版本外，所有浏览器均已支持rem。

对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：

p {font-size:14px; font-size:.875rem;}

注意：

选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

11.px 与 rem 的选择？

①对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可

②对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

4.扩展：css3大小单位vw、vh、vmin、vmax【必须了解】

①基本概念

先明白一个名词：视窗

视窗(Viewport)是你的浏览器实际显示内容的区域，即不包括工具栏和任务栏的网页可视区域大小。

然后，vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，值为数字n，表示占据视窗大小的n%。

②具体描述

vw：视窗宽度的百分比（1vw 表示视窗宽度的 1%）

vh：视窗高度的百分比 （1vh 表示视窗高度的 1%）

vmin：当前 vw 和 vh 中较小的一个值

vmax：当前 vw 和 vh 中较大的一个值

③代码示例

/* 每个div的大小都为视高的20%/

div {

border: 1px solid red;

height: 20vh;

}

/div为视宽的40%，字体大小为视宽的1%/

.demo {

width: 40vw;

font-size: 1vw;

background-color: #50688B;

color: #FFF;

}

/div为视宽的50%，字体大小为视宽的2%/

.demo1 {

width: 50vw;

font-size: 2vw;

background-color: rgb(53, 108, 190);

color: rgb(170, 111, 111);

}

/div为视宽的60%，字体大小为视宽的3%/

.demo2 {

width: 60vw;

font-size: 3vw;

background-color: #644bd3;

color: rgb(54, 41, 41);

}

/div为视宽的70%，字体大小为视宽的4% */

.demo3 {

width: 70vw;

font-size: 4vw;

background-color: #ff006e;

color: #FFF;

}

所有div的高度为20vw,即视宽的20%

div为40vw即视宽的40%，字体大小为1vw即视宽的1% div为50vw即视宽的50%，字体大小为2vw即视宽的2% div为60vw即视宽的60%，字体大小为3vw即视宽的3% div为60vw即视宽的70%，字体大小为4vw即视宽的4% ```

④vw、vh 与 % 百分比的区别

（1）% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。

（2）vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。

⑤vmin、vmax 用处

做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。

由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。

⑥浏览器兼容性

（1）桌面 PC

Chrome：自 26 版起就完美支持（2月）

Firefox：自 19 版起就完美支持（1月）

Safari：自 6.1 版起就完美支持（10月）

Opera：自 15 版起就完美支持（7月）

IE：自 IE10 起（包括 Edge）到现在还只是部分支持（不支持 vmax，同时 vm 代替 vmin）

（2）移动设备

Android：自 4.4 版起就完美支持（12月）

iOS：自 iOS8 版起就完美支持（9月）

5.扩展：复选框无法与旁边文字对齐的解决方式

解决方式：

给input设置vertical-align: -6px;

.read input{

vertical-align: -6px;

}

6.扩展：两个原本对齐的行内div，其中一个加了内容后就无法对齐的解决方式

解决方式：

方式一： 给div设置超出文本的内容就自动隐藏。

方式二： 给div设置vertical-align: top; ( 有时候为top也可以 )

五、CSS文本样式设置

当许多文字组合到一起就形成了文本，现在我们研究的就是如何设置这些文本的样式。

1.文本的颜色 “color”

在目前的浏览器标准中，要想改变浏览器默认字体的颜色（#000000）唯一的途径就是通过CSS的“color”属性进行设置。颜色。

color属性可以设置4种类型的值

①颜色英文单词

可以通过颜色的英文单词直接设置文本的颜色，如

“red”、“”orange、“yellow”、“green”、“cyan”、“blue”、“purple”、“pink”、“gray”、“black”和“white”

等等。

②HEX（三原色，16进制表示）

通过“#”+16进制表示颜色，

有“#”+“三位”和“#”+“六位”的形式。

若是“三位”的形式，第一位表示“红”，第二位表示“绿”，第三位表示“蓝”，通过取值区间“0-9”,“a-f”(10-16)的组合，如“#26f”，共计能表达4,096个颜色。

若是“六位”的形式，可以表示的颜色数更加细致，第一二为表示“红”，第三四位表示“绿”，第四五位表示“蓝”，同样也是通过取值区间“0-9”,“a-f”的组合，如“#2369fd”，共计能表达16,777,216【一千六百多万】个颜色。

③RGBa（三原色，十进制表示）

和“HEX”表示三原色一样，该模式同样也是采用三元色的值来表现色彩，不过“RGBa”颜色模式采用的是10进制的值，

格式如“rgb(34, 102, 255)”，值之间用英文逗号“,”进行分割，第一个值表示“红”，第二个值表示“绿”，第三个值表示“蓝”，每个值的区间为“0-255”（256个色阶），同样能表示16,777,216【一千六百多万】个颜色。

除此之外，该模式还支持对不透明度的设置，也就是“RGBa”里面的这个“a”（alpha），它表示不透明度，取值区间是“0到1”之间的浮点数（可保留到两位小数），

“0”表示完全透明，“1”表示完全不透明，写法如“rgba(34, 102, 255, 0.55)”、“rgba(34, 102, 255, .9)”或“rgb(34, 102, 255)”。

④HSLa（色调，饱和度，亮度，不透明度）

该模式通过设置

“色调”（Hue）、

“饱和度”（Saturation）、

“亮度”（Lightness）

“不透明度”（Alpha）

来表现色彩的，不透明度的表示和“RGBa”一样，我们主要来看下面三个值的意义：

1)色调

除开“黑色”和“白色”从纯红色过度到纯蓝色再过度到纯红色这一过程的颜色轴的区间，共计360个色调；

2)饱和度

从该色调的纯黑到该色调的纯色区间，越接近黑色，饱和度越低，越接近纯色，饱和度越高；

3)亮度

从“纯黑”到“纯白”这一过程的表示，越接近黑色亮度越低，越接近白色亮度越高。

4)例子

HSL(76, 35%, 45%) ：这是一个色调为76，饱和度35%，亮度45%，不透明的颜色

HSLa(316, 75%, 56%, 0.9)：这是一个色调为316，饱和度75%，亮度56%，不透明度0.9的颜色

⑤Transparent（透明）

只要设置该值，那文本的内容将变为完全透明，即无论背景为什么颜色或图片，都会完全看不到设置的文字元素，只是起到了一个占位作用，除非文本被选中，如下例：

div { color: transparent;}

需要补充的是，“IE 8”浏览器及以下的版本不支持“RGBa”、“HSLa”模式及“Transparent”值，即不支持透明度部分的值，对常规“RGB”和“HSL”模式仍能正常支持。

2.文本的居中方式“text-align”

该属性用于控制“行内块元素”或“块元素”内“行内元素”（文本元素）的居中方式的，包含三个值：

left（默认）

文本左对齐

center

文本居中对齐

right

文本右对齐

3.段落首行缩进“text-indent”

该属性是用于设置 每个段落首行缩进数量值 的属性，

如果是用于中文布局，一般会使用“2em”的数值和单位来为每个段落的首行缩进“两个字符”。

p {

text-indent: 2em;

}

4.文本装饰线“text-decoration”

该属性是为文本上添加一根装饰线，带"href"属性的标签默认会带有一根下划线，就是由该属性的值“underline”设置的。

“text-decoration”属性有以下值：

none（默认）

不显示任何装饰线

underline

在文本下方显示装饰线

overline

在文本上方显示装饰线

line-through

在文本中间显示装饰线，相当于删除线

p {

text-decoration: none;

}

5.英文字母大小写转“text-transform”

该属性能将“行内元素”中的英文文本进行大小写转换，以满足网站对规范性的要求。

特别在一些对项目产品细节要求至严的跨国企业或合资企业，

他们对网站或应用中的文本格式也有相当高的要求。

当网站中的绝大部分英文文本都是由其它地方整理粘贴而来的时候，如果要逐一去修改这些文本，不仅时间成本大大地增加，也容易出现一些难以一时发现的疏漏，这个时候“text-transform”属性就有它的“用武之地”了。

该属性有以下属性值：

none（默认）

保持文本中英文单词的默认大小写

capitalize

将每个英文单词首字母变为大写字母（而不管他原本是大写还是小写），其它字母即便是小写也不管。

uppercase

将所有英文单词转换为大写字母

lowercase

将所有英文单词转换为小写字母

p {

text-transform: capitalize;

}

6.文本的阴影“text-shadow”

该属性的作用是给文本添加阴影效果。

该属性最初是在CSS2.0中被定义的，但在CSS 2.1被删除了，不知道是出于什么考虑，在CSS3.0中又重新被写进了规范。

目前除了IE9及之前版本不支持该属性外，其它主流浏览器钧支持该属性。

p {

text-shadow: 0px 0px 2px black;

}

该属性有4个值，具体如下：

水平方向阴影偏移（h-shadow）

“0”表示维持原位，正数为向右偏移，负数为向左偏移。单位为像素“px”。

垂直方向阴影偏移（v-shadow）

“0”表示维持原位，正数为向上偏移，负数为向下偏移。单位为像素“px”。

阴影模糊距离（blur）

用正数表示阴影模糊的单位距离，距离越大模糊程度越高，单位为像素“px”。

阴影的颜色（color）

支持Web技术中的常用颜色模式：“颜色英文单词”、“HEX”、“RGBa”、“HSLa”。

和“行内块元素”和“块元素”所用的“box-shadow”（以后会学习）有所不同，文本阴影的属性值里没有“inset”（设置为内阴影）和“spread”（阴影的扩展，单位像素“px”），以后在使用中需要加以区分。

7.段落文本行高“line-height”

该属性是用于设置“行内元素”中文本元素在一行中所占据的高度，（可实现单行文本垂直居中的效果）

使用场景如：表格、导航按钮、自定义样式按钮、标题栏等。

值 描述

normal 默认。他会自动设置一个合理的行间距。

number 设置数字，表示字体尺寸的倍数。

length 设置固定的行间距。

% 基于当前字体尺寸的百分比行间距。默认为100%

inherit 规定应该从父元素继承 line-height 属性的值。

8.单词的间距“word-spacing”

该属性用于设置英文单词之间的间距。

注意

他区分单词时是按照单词两边是否含有空格来判断的，所有如果你的内容是中文，

1.当你的文字间没有空格时，整体就会被当做一个单词。

2.当你的每个汉字两边都有空格时，每个汉字才会被当做是一个单词。

3.其值可以为负数，距离会减小

p {

word-spacing: 1em;

}

9.字符的间距“letter-spacing”

和“word-spacing”有所不同，该属性是用于控制字符间的间距。

一个字母，一个汉字，甚至一个空格都是一个字符。

注意：

1.在html中，多个空格最终会变为一个空格的。

2.其值可以为负数，距离会减小

10.空格换行处理“white-space”

该属性设置如何处理元素内的空格符和换行符，它主要有以下值：

normal（默认）

由浏览器处理空格和换行

pre

段落里所有的空格符和换行符都会被保留（类似于

标签）

nowrap

段落内的文本不会换行（类似于没有设置过换行的“notepad”）

pre-wrap

段落里所有的空格符序列和换行符序列都会被保留，这点类似于pre

但是他不会去更改浏览器的默认行为（当内容的宽度小于了窗体的宽度时会出现滚动条的行为）

pre-line

保留换行符，但是多个空格还是会按照浏览器的默认行为处理（多个合并为一个）

注意：

如果你当前的内容是无空格分隔的一连串的英文，那么他会被浏览器当作是一个单词，不会让他换行，只会出现水平滚动条去适应他。

11.设置文本方向“direction”

该属性是由于控制文本显示方向的，即从左往右，或从右向左。

在有些国家，如：“阿拉伯”、“伊朗”、“以色列”，还有古典的“中日韩”文等等，他们的文字显示方向都是从右向左的，为了适应这些文字方向的需求，如果用手工去设置，耗费的时间成本会过高，也非常容易出错，这个时候“direction”属性会帮你克服这个问题。该属性有两个值：

ltr

默认值,文本方向从左到右

rtl

文本方向从右向左