文章目录
- 一、字体的使用
- 二、字体样式
- 2.1 字重定义 font-weight
- 2.2 字号 font-size
- 2.3 行高设置 line-height
- 2.3 字体风格 font-style
- 2.4 组合写法 font
- 2.5 大小写转换 font-variant or text-transform
- 2.6 文本线条控制 text-decoration:
- 2.7 文本阴影 text-shadow
- 2.8 空白处理 pre or white-space
- 2.9 文本溢出处理 white-space overflow text-overflow
- 2.10 文本缩进与对齐
- 2.11 字符间距 letter-spacing | word-spacing
- 2.12 排版方式 writing-mode
一、字体的使用
注意：如果字体是由多个单词构成的，那么必须加上引号
1.1定义字体 @font-face
<style>
@font-face {
/* 自定义字体的名次 */
font-family: 'pengsir';
/* 定义多个字体 当第一个字体不存在或不能识别时，使用第二个字体*/
src: url('font/font.TTF'),
url('font/freescpt.TTF');
}
span{
font-family: pengsir;
}
</style>
<body>
<span>测试文本abc</span>
</body>
效果：
二、字体样式
2.1 字重定义 font-weight
字重指字的粗细定义。取值范围 normal | bold | bolder | lighter | 100 ~900。
400对应 normal,700对应 bold ，一般情况下使用 bold 或 normal 较多。
效果：
2.2 字号 font-size
- 字号用于控制字符的显示大小，包括 xx-small | x-small | small | meidum | large | x-large | xx-large。
- 百分数
- 百分数是子元素相对于父元素的大小，如父元素是20px，子元素设置为 200%即为你元素的两倍(40px)大小。
- em
- em单位等同于百分数单位 (可以理解为一个字的宽度)。
2.3 行高设置 line-height
这里是1.5倍行高，em可以根据字的大小来自动调整行高，所以行高一般设置为 em
<style>
p{
line-height: 1.5em;
}
</style>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis non blanditiis ab
architecto vel nulla cum, id laboriosam, ratione quo at repellendus maiores! Nemo
quis autem, perferendis fugiat vitae asperiores.
</p>
</body>
2.3 字体风格 font-style
italic 和 oblique 都是倾斜
<style>
body>em{
font-style: normal;
}
p:nth-of-type(1){
line-height: 1.5em;
font-style: italic;
}
p:nth-of-type(2){
line-height: 1.5em;
font-style:oblique;
}
</style>
<body>
<em>这是默认倾斜的字体</em>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis non blanditiis ab architecto vel nulla cum, id laboriosam, ratione quo at repellendus maiores! Nemo quis autem, perferendis fugiat vitae asperiores.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis non blanditiis ab architecto vel nulla cum, id laboriosam, ratione quo at repellendus maiores! Nemo quis autem, perferendis fugiat vitae asperiores.
</p>
</body>
效果：
2.4 组合写法 font
font 简写属性在一个声明中设置所有字体属性。
可设置的属性是（按顺序）： “font-style font-variant font-weight font-size/line-height font-family”
font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。
2.5 大小写转换 font-variant or text-transform
font-variant:samll-caps将小写字母转化为大写 将大写字母再放大和加粗text-transform:capitalize单词首字母大写text-transform:lowercase全部小写text-transform:uppercase全部转化为大写
<style>
p:nth-of-type(1) {
font-variant: small-caps;
}
p:nth-of-type(2) {
text-transform: capitalize;
}
p:nth-of-type(3) {
text-transform:lowercase;
}
p:nth-of-type(4) {
text-transform:uppercase;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur cum atque quia harum alias dolorem. Sequi</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto placeat nobis provident eveniet laboriosam</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio quam cupiditate illo corrupti odit dolore vel unde</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio quam cupiditate illo corrupti odit dolore vel unde</p>
</body>
效果：
2.6 文本线条控制 text-decoration:
| 值 | 描述 |
|---|---|
| solid | 默认值。线条将显示为单线。 |
| double | 线条将显示为双线。 |
| dotted | 线条将显示为点状线。 |
| dashed | 线条将显示为虚线。 |
| wavy | 线条将显示为波浪线。 |
不会读？已经帮你填好了：百度翻译
属性定义及使用说明
text-decoration 属性是以下三种属性的简写：
- text-decoration-line
- text-decoration-color
- text-decoration-style
<style>
h3:nth-of-type(1){
/*下划线*/
text-decoration: underline;
}
h3:nth-of-type(2){
/*上划线*/
text-decoration:overline;
}
h3:nth-of-type(3){
/*删除线*/
text-decoration:line-through;
}
/* 组合方式 */
h1 {
text-decoration: underline overline line-through dotted red;
}
h2 {
text-decoration: underline overline wavy blue;
}
</style>
<body>
<h1>测试文本</h1>
<h2>测试文本</h2>
<h3>测试文本</h3>
<h3>测试文本</h3>
<h3>测试文本</h3>
</body>
效果：
2.7 文本阴影 text-shadow
text-shadow: h-shadow v-shadow blur color;
注意： text-shadow属性连接一个或更多的阴影文本。属性是阴影，指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0。
<style>
h3{
text-shadow:rgba(255, 222, 12, .4) 5px 5px 1px,
rgba(0, 0, 255, 0.8) -5px -5px 1px;
}
</style>
<body>
<article>
<h3>测试文本</h3>
</article>
</body>
效果：
2.8 空白处理 pre or white-space
使用 white-space 控制文本空白显示。
| 选项 | 说明 |
|---|---|
| pre | 保留文本中的所有空白，类似使用 pre 标签 |
| nowrap | 禁止文本换行 |
| pre-wrap | 保留空白，保留换行符 |
| pre-line | 空白合并，保留换行符 |
<style>
h3:nth-of-type(1) {
white-space: pre;
}
h3:nth-of-type(2) {
white-space: pre-line;
}
h3:nth-of-type(3) {
white-space:pre-wrap;
}
</style>
<body>
<article>
<h3>测试
文本
</h3>
<h3>测试
文本
</h3>
<h3>测试
文本
</h3>
<pre>测试
文本
</pre>
</article>
</body>
效果;
2.9 文本溢出处理 white-space overflow text-overflow
overflow属性指定如果内容溢出一个元素的框，会发生什么。
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。(会出现浏览器的横向或者纵向滚动条) |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
text-overflow text-overflow属性指定当文本溢出包含它的元素，应该发生什么。
| 值 | 描述 |
|---|---|
| clip | 修剪文本。 |
| ellipsis | 显示省略符号来代表被修剪的文本。 |
| string | 使用给定的字符串来代表被修剪的文本。 |
<style>
div:nth-of-type(1){
width: 20vw;
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
}
</style>
<body>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, cum placeat veniam consequatur eaque inventore nostrum ex, delectus omnis quibusdam illo voluptas quas sed explicabo nisi magni unde? Ullam.</div>
</body>
效果：
2.10 文本缩进与对齐
2.10.1 文本缩进
text-indent:2em文本缩进2个字符
2.10.2 水平对齐
text-align:center 文本水平居中
2.10.3 垂直对齐
参考：CSS vertical-align 属性
vertical-align 属性设置一个元素的垂直对齐方式。
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。
在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
实例：
<style>
article h3{
font-size: 30px;
text-indent: 2em;
}
div img{
vertical-align: middle;
}
article div div{
display: inline-block;
vertical-align: bottom;
}
</style>
<body>
<article>
<h3>
这是一段测试文本。这是一段测试文本,这是一段测试文本。
</h3>
<div>
<img src="https://picsum.photos/200/200" alt="">
<div>测试文本</div>
Laboris dolore cillum exercitation duis aliqua culpa commodo amet eiusmod ullamco sint.
</div>
</article>
</body>
文中用到了 https://picsum.photos 这个网址，他可以随机返回一张图片。有兴趣可以百度看看。
效果：
2.11 字符间距 letter-spacing | word-spacing
字符间距 letter-spacing
单词间距 word-spacing
长单词换行
word-wrap:break-word
<style>
p:nth-of-type(1){
letter-spacing: 15px;
}
p:nth-of-type(2){
word-spacing: 20px;
}
p:nth-of-type(3){
border: 1px solid black;
width: 200px;
}
p:nth-of-type(4){
border: 1px solid black;
width: 200px;
/* 规定长单词换行 */
word-wrap: break-word;
}
</style>
<body>
<p>Nisi et dolore veniam reprehenderit duis ea nisi velit.</p>
<p>Nisi et dolore veniam reprehenderit duis ea nisi velit.</p>
<p>Nisi et dolore veniamveryveryveryveryveryveryveryverylongword reprehenderit duis ea nisi velit.</p>
<!-- 长单词换行 -->
<p>Nisi et dolore veniamveryveryveryveryveryveryveryverylongword reprehenderit duis ea nisi velit.</p>
</body>
效果：
2.12 排版方式 writing-mode
writing-mode:horizontal-tb 默认值，从上到下
默认值就不演示了，都一样的
writing-mode: vertical-lr 垂直方向 从左到右
writing-mode: vertical-rl 垂直方向 从右到左
