字体样式

1.字体样式设置
字体样式大致有如下几种特征：
字体类型（风格）、字体粗细、字体大小、字体系列
(1)字体类型（风格） font-style
用于设置字体风格，可设置以下值：
①　normal：普通字体
②　italic：斜体
③　oblique：倾斜字体
HTML代码如下：

对应的CSS代码如下：

运行效果：

(2)字体粗细 font-weight
用于设置字体粗细，可设置以下值：
①　normal：正常粗细
②　bold：粗体
③　bolder：更粗的字体
④　lighter：更细的字体
⑤　100~900：步长为100，
400 等同于 normal，而 700 等同于 bold
HTML代码如下：

对应的CSS代码如下：

运行效果：

(3)字体大小 font-size
用于设置字体大小的，可设置任意正整数和浮点数
默认情况下，几乎所有的浏览器的默认字体大小都为16px. 且Chrome等主流浏览器不支持12像素以下的字体。
HTML代码

对应的CSS代码如下：

运行效果：

(4)字体系列 font-family
用于设置字体系列，就是我们通常说的“所用字体”。
设置字体有以下规则：
1.使用中文字体，或带空格的英文字体名，需要用“引号”将该字体名扩起来

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

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

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

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

HTML代码如下：

对应的CSS代码如下：

运行效果：

(5)练习
写四段文本，通过font-style,font-weight,font-size,font-family实现下面四中字体。
1、第一段文本为正常风格，正常粗细，16像素的“宋体”
2、第二段文本为斜体风格，正常粗细，20像素的“微软雅黑”
3、第三段文本为正常风格，加粗，22像素的“幼圆”
4、第四段文本为斜体风格，加粗，22像素的“楷体”

2.组合值写法
(1)给上所有的属性
我们能将“font”的多个值组合起来写，比如我们要设置一个
风格为正常，粗体，20像素大小，“微软雅黑”
和
风格为斜体，正常粗细，字号为22像素，“宋体”
我们可以这样写：

html代码

Css代码

效果

练习

通过组合值得写法实现上一个练习题。

(2)省略字体类型或字体风格之一，或都省略
1.所以在写“font”属性组合值的时候可以省略二者之一，以辨识到的值进行设置，另外一个自动为“normal”，
2.甚至还能省略掉第前两个值，只保留“font-size”和“font-family”
即：style,weight可只给上任意一个，或者都给，或者都不给，顺序也可以换，但是要在前两个。
如：
HTML代码

CSS代码

运行效果：

注意：
在“font”组合值的写法中，只有“font-size”和“font-family”这两个的值是不能省略的，而且是缺一不可，顺序也是要先大小后系列不能变，否则浏览器会不认识该值，对该组合值进行报错。
(3)在font内设置文本行高
“font”属性组合值的写法，除了以上所提到的，它还有一种比较不常见，却还比较实用的写法，即可直接在“font”属性内设置文本的行高“line-height”，如下：

3.扩展：字体单位px ,em , rem【必须掌握】
①　px（像素，相对于显示器屏幕分辨率而言）
②　em（相对当前元素内文本的字体尺寸，会继承父元素大小）
③　rem （相对HTML根元素，最常用的单位）
PX
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
当把一个图放大后，看到很多矩形的小方块，那些就是像素。

PX特点
1. IE无法调整那些使用px作为单位的字体大小；
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3. Firefox能够调整px和em，rem。但是96%以上的中国网民使用IE浏览器(或内核)。
EM
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
EM特点
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。
注意：
1.任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。
2.为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
3.如果当前元素继承的大小 < 12px ,那么在当前元素使用em作为单位时，
1em == 12px
所以我们在写CSS的时候，如果你想把像素单位转换为em单位
需要注意两点：

1. body选择器中声明Font-size=62.5%；
2. 将你的原来的px数值除以10，然后换上em作为单位；
3. 重新计算那些原本就以em作为单位的数值。（原本1em=16px,现在1em=10px,所以需要重新计算）
   REM
   rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。
   这个单位与em有什么区别呢？
   区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：
p {font-size:14px; font-size:.875rem;}
注意：
选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。
如果html字体的大小 < 12px ,那么在当前元素使用rem作为单位时，
1rem == 12px

px 与 rem 的选择？
1.对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可
2.对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

2018.11.27