css系列-font文本

字体设置

可以定义多个字体，系统会依次查找，比如 'Courier New' 字体不存在将使用 Courier 以此类推。

font-family: 'Courier New', Courier, monospace;

自定义字体

可以声明自定义字体，如果客户端不存在将下载该字体，使用方式也是通过 font-family 引入。

<style>
  @font-face {
  	font-family: "houdunren";
  	src: 	url("SourceHanSansSC-Light.otf") format("opentype"),
  				url("SourceHanSansSC-Heavy.otf") format("opentype");
  }

  span {
  	font-family: 'myfont';
  }
</style>

字体	格式
.otf	opentype
.woff	woff
.ttf	truetype
.eot	Embedded-opentype

不建议使用中文字体，因为文件太大且大部分是商业字体。

字重定义

字重指字的粗细定义。取值范围 normal | bold | bolder | lighter | 100 ~900。

400对应 normal,700对应 bold ，一般情况下使用 bold （加粗）或 normal（正常） 较多。

<style>
span {
	font-weight: bold;
}

strong:last-child {
	font-weight: normal;
}
</style>
...

<span>字重</span>
<strong>改变默认字重</strong>

文本字号

字号用于控制字符的显示大小，包括 xx-small | x-small | small | meidum | large | x-large | xx-large。

百分数

百分数是子元素相对于父元素的大小，如父元素是20px，子元素设置为 200%即为你元素的两倍大小。

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

  span {
  	font-size: 500%;
  }
</style>
...

<article>
	<span>相对弗雷字号百分比</span>
</article>

em

em单位等同于百分数单位。

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

  span {
  	font-size: 5em;
  }
</style>
...

<article>
	<span>相对于父类比例</span>
</article>

rem

rem是相对于根html的比例。r即":root"。我们做响应式时就会使用em和rem。后面css-响应式会详细讲解。

<style>
 :root{
    font-size: 14px;/*设置html字号*/
}
span{
    font-size: 2rem;/*即14*2=28px*/
}
</style>
...

<article>
	<span>相对于根html</span>
</article>

文本颜色

字符串颜色

可以使用如 red | green 等字符颜色声明

color:red;

使用十六进制网页颜色

color:#ddffde

如果颜色字符相同如 #dddddd 可以简写为 #ddd

使用RGB颜色

color:rgb(38, 149, 162);

透明颜色

透明色从 0~1 间，表示透明到不透明

color:rgba(38, 149, 162,.2);

行高定义

div {
	line-height: 2em;
}

倾斜风格

字符的倾斜样式控制

<style>
  span {
  	font-style: italic;
  }

  em {
  	font-style: normal;
  }
</style>
...

<span>斜体</span>
<hr>
<em>em标签斜体</em>

组合定义

可以使用 font 一次将字符样式定义，但要注意必须存在以下几点：

• 必须有字体规则
• 必须有字符大小规则

span {
	font: bold italic 20px/1.5 'Courier New', Courier, monospace;
}
...

<span>组合使用</span>

文本样式

大小转换

小号大写字母

span {
	font-variant: small-caps;
}
...

<span>daxie小号字体</span>

字母大小写转换

<style>
h2 {
  /* 首字母大小 */
  text-transform: capitalize;

  /* 全部大小 */
  text-transform: uppercase;

  /* 全部小写 */
  text-transform: lowercase;
  }
</style>

文本线条

添加隐藏删除线

a {
	text-decoration: none;
}

span.underline {
	text-decoration: underline;
}

span.through {
	text-decoration: line-through;
}

span.overline {
	text-decoration: overline;
}
...

<a href="">www.baidu.com</a>
<hr>
<span class="underline">下划线</span>
<hr>
<span class="through">删除线</span>
<hr>
<span class="overline">上划线</span>

阴影控制

参数顺序为：颜色，水平偏移，垂直偏移，模糊度。

<style>
  h2 {
  	text-shadow: rgba(13, 6, 89, 0.8) 3px 3px 5px;
  }
</style>

<h2>文字阴影</h2>

空白处理

使用 white-space 控制文本空白显示。

选项	说明
pre	保留文本中的所有空白，类似使用 pre 标签，（注意pre不会自动换行）
nowrap	禁止文本换行，清除空白，清除换行
pre-wrap	保留空白，保留换行符（会自动换行）
pre-line	空白合并，保留换行符（会自动换行）

h2 {
	white-space: pre;
	width: 100px;
	border: solid 1px #ddd;
}
...

<h2>大    家    好   ！</h2>

pre-wrap效果： 

pre效果：不换行产生滚动条

文本溢出

溢出文本容器后换行处理：

h2 {
  overflow-wrap: break-word;
  width: 170px;
  border: solid 1px #ddd;
}
...

<h2>如果文本太长，则换行</h2>

溢出添加 ...，需要将overflow 设置在 text-overflow 前面。（仅适用于单行）

h2 {
  width: 100px;
  border: solid 1px #ddd;
  /*必须设这置三个属性*/
  white-space: nowrap;/*不换行*/
  overflow: hidden;/*溢出部分隐藏*/
  text-overflow: ellipsis;/*溢出部分用...代替*/
}
...

<h2>如果文本太长用...代替</h2>

多行文本溢出显示省略号：（仅适用于webkit内核）

p {
 /*1用来限制在一个块元素显示的文本的行数,2表示最多显示2行。 为了实现该效果，它需要组合其他的WebKit属性*/
  -webkit-line-clamp: 2;
/*和1结合使用，将对象作为弹性伸缩盒子模型显示*/
   display: -webkit-box;
 /*和1结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
   -webkit-box-orient: vertical;
 /*义超出限定的宽度就隐藏内容*/
    overflow: hidden;
 /* 规定当文本溢出时显示省略符号来代表被修剪的文本 */
    text-overflow: ellipsis;
}


  <p>
    多行文本溢出，显示省略号；多行文本溢出，显示省略号；多行文本溢出，显示省略号；
    多行文本溢出，显示省略号；多行文本溢出，显示省略号；多行文本溢出，显示省略号；
    多行文本溢出，显示省略号；多行文本溢出，显示省略号；多行文本溢出，显示省略号；
  </p>

段落控制

 文本缩进

控制元素部的文本、图片进行缩进操作

<style>
  p {
	  text-indent: 2em;
  }
</style>
<p>
当我们写文章，或是一大段文字的时候，我们会在每个段落的开始缩进2个字符。
当我们写文章，或是一大段文字的时候，我们会在每个段落的开始缩进2个字符。
</p>

水平对齐

使用 left|right|center 对文本进行对齐操作

        

h2 {
	text-align: center;
}
...
<h2文本左右居中显示，设置行高后可以让文字上下也居中</h2>

为了让段落内容看得舒服，需要设置合适的行高

p {
	text-indent: 2em;
	line-height: 1.5em;
}
...
<p>
一段文字我们会设置行高，让文字上下居中，一般设置行高是文字的1.5倍即1.5em，一般不要使用px做单位，因为一旦更改字号，就要更改行高
</p>

垂直对齐

使用 vertical-align 用于定义内容的垂直对齐风格，包括middle | baseline | sub | super 等。

图像在段落中居中对齐

img {
	height: 50px;
	width: 50px;
	vertical-align: middle;
}
...

<p>
  <img src="2.png" alt="" />图像在段落中居中对齐
</p>

顶部与底部对齐

bottom | top 相对于行框底部或顶部对齐。

能实现类似sub标签效果

h2>span {
	vertical-align: bottom;
	font-size: 12px;
}
...

<h2>H<span>2</span>O</h2>

使用单位对齐

可以使用具体数值设置对齐的位置。

h2>span {
	vertical-align: -20px;
	font-size: 12px;
}

字符间隔

单词与字符间距

使用 word-spacing 与 letter-spacing 控制单词与字符间距。

word-spacing效果：

letter-spacing效果：

h2 {
	word-spacing: 2em;
	letter-spacing: 3em;
}

排版模式

模式	说明
horizontal-tb	水平方向自上而下的书写方式
vertical-rl	垂直方向自右而左的书写方式
vertical-lr	垂直方向内内容从上到下，水平方向从左到右

div {
  height: 100px;
  border: solid 1px #ddd;
  writing-mode: vertical-rl;
}
...

<div>锄禾日当午，汗滴禾下土；谁知盘中餐，粒粒皆辛苦。</div>