前言#

CSS3的文本与字体属性算是CSS中基础中的基础，学习文本与字体属性可以修改网页中字体形式和样式，这里的文本与字体是有区别，虽然看着意思差不多，都是在描述文字的样式，它们区别如下：

字体属性 = 字长什么样。 文本属性 = 文字怎么排列、怎么表现。

常用文本样式属性#

color属性

• color 属性可设置文本内容的前景色
• color 属性主要可以用英语单词、十六进制、rgb()、rgba() 等表示法
• 英语单词表示法，比如 color: red;仅仅用于学习时临时设 置一下颜色，工作时基本不用这样的形式，因为追求精确

color属性 - 十六进制表示法

• 十六进制表示法是所有设计软件中都通用的颜色表示法，设 计师给我们的设计图上面标注的颜色，通常为十六进制表示
• 比如十六进制ff就是十进制的255，每种颜色分量都是0~255 的数字
• 如果颜色值是#aabbcc的形式，可以简写为#abc
• 黑色是#000，白色是#fff，常见的灰色有#ccc、#333、 #2f2f2f等

color属性 - rgb()表示法

• 颜色也可以用rgb()表示法
• 颜色也可以用rgba()表示法，最后一个参数表示透明度，介 于0到1之间，0表示纯透明，1表示纯实心
• rgba()表示法从IE9开始兼容

text-decoration属性

• text-decoration属性用于设置文本的修饰线外观的（下划 线、删除线）

  值	含义
  none	没有装饰线
  underline	下划线
  line-through	删除线
  overline	上划线

text-indent属性

• text-indent属性定义首行文本内容之前的缩进量，缩进两个 字符应该写作

1
text-indent: 2em;

line-height属性

• line-height属性用于定义行高
• line-heigh属性的单位可以是以px为单位的数值
• line-heigh属性也可以是没有单位的数值，表示字号的倍数 ，这是最推荐的写法
• line-heigh属性也可以是百分数，表示字号的倍数

1
line-height: 1;
2
line-height: 1px;
3
line-height: 50%;

text-align属性

• text-align 用来设置行内内容在水平方向上的对齐方式。文字在盒子居中的样式：设置行高=盒子高度，即可实现单行文本垂直居中；设置text-align: center，即可实现文本水平居中

  值	含义
  left	左对齐
  center	居中对齐
  right	右对齐
  justify	两端对齐
  start	按书写方向的起始侧对齐
  end	按书写方向的结束侧对齐

text-shadow属性

• text-shadow 用来给文字添加阴影。

  1
   /* text-shadow: 水平偏移 垂直偏移 模糊半径 阴影颜色; */
  2
  p {
  3
    text-shadow: 2px 2px 4px #999;
  4
  }

常用字体属性#

font-style属性

• font-style属性设置字体的倾斜

  值	含义
  normal	正常字体，不倾斜
  italic	使用字体自带的斜体样式；优先使用这个字体专门设计好的“斜体字形”
  oblique	把正常字体倾斜显示；把正常字体直接倾斜。

font-size属性

• font-size属性用来设置字号，单位通常为px。还有em、rem单位。
• 网页文字正文字号通常是16px，浏览器最小支持10px字号

font-weight属性

• font-weight属性设置字体的粗细程度，通常就用normal和 bold两个值

  值	含义	常见对应
  normal	正常粗细	400
  bold	粗体	700
  100	很细	Thin
  200	较细	Extra Light
  300	细	Light
  400	正常	Normal
  500	中等	Medium
  600	半粗	Semi Bold
  700	粗体	Bold
  800	很粗	Extra Bold
  900	最粗	Black

font-family属性

• font-family属性用于设置字体

• 字体可以是列表形式，一般英语字体放到前面，后面的字体 是前面的字体的“后备”字体（字体名称中有空格，必须用引号包裹）

• 中文字体也可以称呼它们的英语名字

• 字体通常必须是用户计算机中已经安装好的字体，所以一般 来说设置为微软雅黑和宋体较多，设置成其他字体较少

• 如何设置为用户电脑中没有的字体呢？那就必须自己定义新 字体，这就需要我们有字体文件，用户加载网页的时候，会 同时下载这些字体文件

  1
  font-family: "微软雅黑";
  2
  font-family: serif, "Times New Roman", "微软雅黑";

• 定义字体：字体文件根据操作系统和浏览器不同，有eot、woff2、 woff、ttf、svg文件格式，需要同时有这5种文件；当我们拥有字体文件之后，就可以用@font-face定义字体

  1
  @font-face {
  2
    font-family: '字体名称';
  3
    font-display: swap;
  4
    src: url('eot字体文件地址');
  5
    src: url('eot字体文件地址') format('embedded-opentype'),
  6
    url('woff2字体文件地址') format('woff2'),
  7
    url('woff字体文件地址') format('woff'),
  8
    url('ttf字体文件地址') format('truetype'),
  9
    url('svg字体文件地址') format('svg');
  10
  }

• 阿里巴巴普惠体：阿里巴巴提供了一套免费商用授权的普惠字体，网址 https://www.iconfont.cn/webfont ；使用阿里巴巴普惠字体也省去了下载字体的麻烦

font合写属性

• font属性可以用来作为font-style, font-weight, font-size, line-height和font-family属性的合写

  1
  font: italic bold 20px/1.5 Arial,"微软雅黑";

font-variant 属性

• font-variant 用来设置字体的变体形式。

  属性	效果
  font-variant: small-caps	小写字母显示为较小的大写字形
  text-transform: uppercase	所有字母直接转换成普通大写