字体是布局中重要的一个环节。对字体的调整影响到网页的整体效果。我们设置字体时，可以参照word里面对字体的调整，更好地记忆调整内容。

最常见的字体调整

• 字库 font-family

当我们需要对我们的字体类型修改时，需要指定字库。

p {
  font-family: "Trebuchet MS", 微软雅黑, Verdana, sans-serif;
}

按照给定的字库顺序依次寻找，直到找到存在的某一个字库，并且应用。如果给定的字库都在计算机的字体库中查询不到，则会使用默认字库，通常是Time New Roman，中文是宋体。
字库名称有空格时需要用引号引用，以示完整。

定义网络字库 @font-face

当我们需要的字体很大几率在客户机中不存在，则可以使用提供的网络字库，使得网页可以按照期望的样式展示。

@font-face {
    font-family: <字体名>;
    src: <字体路径> [<格式>][,<字体路径> [<格式>]]*;
    [font-weight: <粗细>];
    [font-style: <样式>];
}

例如

@font-face {
  font-family: 'Bungee Inline'; /*定义字体库名称*/
  font-style: normal; /*字体样式*/
  font-weight: 400; /*字体*/
  src: local('Bungee Inline') /* local 表示从本地字库中查找指定字库*/, local('BungeeInline-Regular'), url(https://fonts.gstatic.com/s/bungeeinline/v2/Tb-1914q4rFpjT-F66PLCfn8qdNnd5eCmWXua5W-n7c.woff) format('woff') /*url表示从网络给定链接下载字库  format是字体的格式*/;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; /*字体支持的unicode范围*/
}

h2{
    font-family: 'Bungee Inline';
}

关于format()说明

字体的兼容写法

   @font-face {
    font-family: '字体名';
    src: url('字体名.eot'); /* IE9 兼容模式 */
    src: url('字体名.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('字体名.woff') format('woff'), /* 现代浏览器 */
             url('字体名.ttf')  format('truetype'), /* Safari, Android, iOS */
             url('字体名.svg#grablau') format('svg'); /* Legacy iOS */
   }

但是常规只需要 eot和woff这两种就可以了

 --------当字体准备完成之后，开始正式的字体修饰--------------

• 颜色 color

字体颜色是最常见的修饰方式，不同的字体颜色产生不同的视觉效果

<style>
p {
  color: red;
}
</style>

色值可以从颜色名对照表中查找浏览器设定好的默认值，也可以用任意的色值方案 -- 十六进制 ，rgb ，hsl 提供色值或者带有alpha通道的rgba，hsla设置半透明字体色彩。

在word里，字体有背景色，但是在css里没有针对字体的背景色，因此没有一个属性叫 "font-background-color"，
但是css提供了一个'background-color' 在调整盒模型时说明用途

• 字体尺寸 font-size

可以使用像素单位( px )的字体字号，也可以使用磅值（pt），但是不会使用相对尺寸，em rem，因为在换算成像素时，小数部分将会使字体模糊

<style>
p {
  font-size: 20px;
}
</style>

通常浏览器都有最小字体，在chrome中最小字号为 12px以保证文本内容清晰显示

• 加粗 font-weight

区间为 100 - 900 （100的整数倍）九档，常用的，默认值 normal =400 ，bold =800

• lighter 更细一些，相比父元素字体而言

• bolder 更粗一些，相比父元素字体而言

• 倾斜 font-style

我不知道为什么style叫斜体，但是它就是这么定义的，可能是风格吧倾斜风格。
在这个属性中有两种倾斜方式

• 使用斜体字 italic 。当该字体提供斜体时，可以使用该属性，将常规字体替换为斜体字体，如果字体本身没有携带斜体字，则不会生效

• 使字体倾斜 oblique 。当该字体不提供斜体字时，将由样式渲染字体为斜体。

• normal 这个默认使用常规字体

• 文本装饰线 text-decoration

该属性是一个复合属性，包括：

• text-decoration-color 装饰线颜色
• text-decoration-line text-decoration-line 是一个多值属性，可以同时设定多个值
  • underline 下划线
  • overline上划线
  • line-through 贯穿线
  • blink 文本闪烁 该属性并不是很受支持，并且有了css动画，该属性将被废弃
• text-decoration-style 线条风格
  • solid 实线
  • double 双实线
  • dashed 虚线
  • dotted 点线
  • wavy 波浪线
• text-decoration-skip 这是一个css3的属性，用来跳过不显示装饰线的元素，不过目前支持力度有限
  • objects 跳过内联块
  • spaces 跳过空白符

虽然我们可以同时设定上划线，下划线，贯穿线，但是却没办法单独设置他们的样式颜色，尽管css3标准组织已经提出了 相关解决方案，遗憾的是大多数浏览器都是不支持的。

• 文字描边 text-stroke

当我们想为文字外侧再套一层颜色时，就需要使用到文字描边。
该属性也是复合属性分为 text-stroke-color描边颜色 和 text-stroke-width描边厚度 两部分。
目前IE 和FF (40 以下) 版本不支持，其余浏览器需要添加内核前缀。

• 文本大小写转换 text-transform

决定文字内容(主要是西方字体) 大写（uppercase）还是小写（lowercase）还是首字母大写（capitalize）的方式呈现

• 小型的大写字母 font-variant

当你的大写字母比小写字母高出很多时，使用小型大写字母，将小写的内容转为大写字母来替代原有的大写字母内容。【仅针对小写字母】

<style>
p {
  font-variant : small-caps;
}
</style>
<p>this is small caps</p>

• 文本阴影 text-shadow

这个元素将以内容文本为蓝本，从当前文本的下方产生文字投影。
这个属性一共有四个属性值，分别是

• 水平偏移 相对于原文本的X轴方向上的偏移
• 垂直偏移 相对于原文本的Y轴方向上的偏移
• 模糊半径 如果为0则阴影不会产生模糊效果
• 投影颜色 如果不设置默认是黑色

投影其实就是灯光照射到物体上产生的阴影，当不同角度的灯光照射进来时，产生了不同程度的投影。因此投影也是可以有多个的

<style>
p {
  text-shadow : 1px -1px 2px blue , 1px 5px 0 red;
}
</style>

• 方向 direction

这个属性其作用目的是修改内联块的排列方向，仅针对内联块（inline-block），默认是ltr( LEFT-TO-RIGHT )、rtl(RIGHT-TO-LEFT)

  <style>
    div {
      direction: rtl;
    }
  </style>
  <div>
      <button>内联块1</button>
      <button>内联块2</button>
      <span> 文本内容1 , </span>
      <span> 文本内容2 。 </span>
      <span style="background-color: greenyellow"> 文本内容3 ； </span>
  </div>

看下面的效果

image.png

很神奇的发现，内联块1，2的显示顺序调换了，这是因为该属性修改的是内联块的展示方向，会依次从右向左排列，但是另一部分，三个内联元素排列顺序没有变化，是对的，但是没搞懂，为什么最后一个文本内容末尾的符号会被提升到前面去，不应该跟随在文字后面么这不知道是一个 “BUG” 还是别出心裁的设计。

但是我们想象一下民国时期，从右向左书写方式，这时候需要用到文本的写作方向来调整了

• 文本的方向 unicode-bidi

这个属性需要配合上面的direction一起使用才可以生效

在现代计算机应用中，最常用来处理双向文字的算法是Unicode 双向算法（Unicode Bidirectional Algorithm），简称为 bidi 算法。而unicode字符本身分为强字符、中性字符、弱字符

• 强字符：强字符方向是确定的，但是在bidi算法中会影响到中性字符的书写方向。 比如中文、拉丁文字

• 中性字符：方向是不确定的，上下文与bidi算法无关，但是会受到强字符影响。比如，一般符号

• 弱字符：方向是确定的，但是不会对bidi算法产生影响。比如 阿拉伯数字以及跟数字相关的符号

  一个区域内有总体方向，决定从这个区域的哪边开始书写文字，通常称为基础方向。
  浏览器会根据你的默认语言来设置默认的基础方向，如英语、汉语的基础方向为从左到右，阿拉伯语的基础方向为从右到左。
  

Web中控制文字方向的方式有三种：

• html实体（‎、‏）【隐式转换】 ‎与‏可以用来打断方向串的连续性，影响中性字符的方向。
• bid与bdo标签+dir属性
• css属性（direction + unicode-bidi）

具体关于 字符方向的，这里有解答
但是还是不理解上述所说的，末尾符号问题。

• 书写模式 writing-mode

• horizontal-tb 默认从左向右从上到下
• vertical-rl 垂直方向从右向左 类似古代中文书籍书写方式
• vertical-lr 垂直方向从左往右

当设置为垂直书写方式时，块元素的宽度将会以content的宽度为准，如果需要设置宽度则需要显示的给出。该属性可被继承

• 空白符 white-space

很多时候，我们需要保留文内空白符，通常比较傻的情况就是用 这个html语义字符替代，其实css本身就提供了我们对空白符的处理，何必傻兮兮的去替换。
pre 预先使用等宽字体显示格式化文本，不合并空白，文字超出边界时不换行
pre-wrap 不合并空白，和边界发生碰撞时折行
pre-line 保持文本换行，但是不保留空白，边界碰撞时换行
nowrap 不换行，不保留空白，直到文本结束或者遇到 <br/>

• tab尺寸 tab-size

当我们开启了空白符时，这是可以设定tab-size的尺寸，在一般的编辑器中，一个tab等于4个space，默认也是如此，因此当我们调整tab与space互转时，就可以用到了。

• 文字换行 word-break

对于英文等拉丁文，有时长单词会超出边界。这是因为单词被视为整体，不允许折行。这时候就会产生比较大的问题--布局撑破。尽管很少情况下会遇到，这时，我们使用break-all强制换行，即使单词是整体，也会被折行显示，满足布局需要。
对于中文，如果不想换行可以使用keep-all，就表现的和英文单词一致，是不会折行的。

• 段落折行 overflow-wrap (word-wrap)

IE下定入标准是word-wrap，被W3C组织收编之后修改为overflow-wrap，本质还是不变的。
设定超过边界时换行，以获得更好的展示效果。中英文混排时，会从中英文边界换行。

• break-word 设定折行

• 文本对齐 text-align

比较常用的文本对齐是 left right center，css3中新增justify两端对齐。但是justify不会处理最后一行和第一行。（单独一行是第一行也是最后一行）
新增的start和end 对齐方式依赖于direction设定的方向，即文档的开始方向。start表示向文档开始方向对齐，因此direction:rtl时，表现与left right表现相反。
而match-parent 匹配父级，当匹配父级的start或者end时，基于父级的direction计算得到结果，而inherit则没有限定。
justify-all，同时处理行和行尾的两端对齐，但是并未得到支持。因此还是使用下面的方式最为稳妥。

• 行尾对齐 text-align-last

  上述的text-align不能处理单独行，因此需要使用该属性单独处理

• 两端对齐方式设定 text-justify

当设定了文本的两端对齐后，需要对两端对齐方式进行设定，然而目前并没有浏览器支持。所以先放弃

• 单词间距 word-spacing

说白话就是一个空格有多宽。

• 字母间距 letter-spacing

就是字母跟字母间的间隔，当然中文也可以

• 段落缩进 text-intend

设定段首缩进像素，然而这个属性只针对块元素和行内块。毕竟内联元素的自己也做不了主。
*## 行高 line-height
行高，即字体最底端与字体内部顶端之间的距离

行高和基准线

• 垂直对齐 vertical-align

垂直对齐就是基于行高和基准线的对齐方式。有baseline 基准线 sub 上标 super 下标
top 元素顶端与行内元素最高的顶端对齐
bottom 元素的顶端与行中最低的元素的顶端对齐
middle 把此元素放置在父元素的中部
text-top 把元素的顶端与父元素字体的顶端对齐
text-bottom 把元素的底端与父元素字体的底端对齐