字体设置
可以定义多个字体,系统会依次查找,比如 '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>