css字体和文本
css字体
font-face可以将服务器中的字体直接提供给用户去使用,问题:
- 加载速度
- 版权
- 字体格式 format(“truetype”)
- 默认情况下可以不用写, 告诉浏览器 按照 truetype(ttf) 来格式化
字体相关的样式
-
color 用来设置字体颜色
-
font-size 字体的大小
-
和font-size相关的单位
- em 相当于当前元素的一个font-size
- rem 相对于根元素的一个font-size
-
font-family 字体族(字体的格式)可选值:
- serif 衬线字体
- sans-serif 非衬线字体
- monospace 等宽字体
-
指定字体的类别,浏览器会自动使用该类别下的字体
-
font-family 可以同时指定多个字体,多个字体间使用,隔开字体生效时优先使用第一个,第一个无法使用则使用第二个 以此类推
Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
@font-face {
/* 指定字体的名字 */
font-family:'myfont' ;
/* 服务器中字体的路径 */
src: url('font/ZCOOLKuaiLe-Regular.ttf') format("truetype");
}
p{
color: blue;
font-size: 40px;
/* font-family: 'Courier New', Courier, monospace; */
font-family: myfont;
}
</style>
</head>
<body>
<p>
今天天气真不错,Hello Hello How are you!
</p>
</body>
</html>
font样式
在CSS中还为我们提供了一个样式叫font,使用该样式可以同时设置字体相关的所有样式,可以将字体的样式的值,统一写在font样式中,不同的值之间使用空格隔开
使用font设置字体样式时,斜体 加粗 小大字母,没有顺序要求,甚至可写可不写,如果不写则使用默认值,但是要求文字的大小和字体必须写,而且字体必须是最后一个样式 大小必须是倒数第二个样式,实际上使用简写属性也会有一个比较好的性能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1 {
color: red;
font-size: 30px;
font-family: arial, 微软雅黑;
font-style: italic;
}
.p2 {
/*设置一个文字大小*/
font-size: 50px;
/*设置一个字体*/
font-family: 华文彩云;
/*设置文字斜体*/
font-style: italic;
/*设置文字的加粗*/
font-weight: bold;
/*设置一个小型大写字母*/
font-variant: small-caps;
}
</style>
</head>
<body>
<p class="p1">
我是一个p标签,ABCDEFGabcdefg
</p>
<p class="p2">我是一段文字,ABCDEFGabcdefg</p>
</body>
</html>
图标字体
图标字体(iconfont)
- 在网页中经常需要使用一些图标,可以通过图片来引入图标,但是图片大小本身比较大,并且非常的不灵活
- 所以在使用图标时,我们还可以将图标直接设置为字体,然后通过font-face的形式来对字体进行引入
- 这样我们就可以通过使用字体的形式来使用图标
fontawesome 使用步骤
- 下载 https://fontawesome.com/
- 解压
- 将css和webfonts移动到项目中
- 将all.css引入到网页中
- 使用图标字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--引入下载的图标文字-->
<link rel="stylesheet" href="fa/css/all.css">
</head>
<body>
<i class="fas fa-bell" style="font-size:80px; color:red;"></i>
<i class="fas fa-bell-slash"></i>
<i class="fab fa-accessible-icon"></i>
<i class="fas fa-otter" style="font-size: 160px; color:green;"></i>
</body>
</html>
使用伪元素
通过伪元素来设置图标字体
- 找到要设置图标的元素通过before或after选中
- 在content中设置字体的编码
- 设置字体的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="fa/css/all.css">
<style>
li{
list-style: none;
}
li::before{
/* content 中的 \f1b0 是图标的编码 */
content: '\f1b0';
/* font-family: 'Font Awesome 5 Brands';
从 all.css 中的@font-face 查找过来的
*/
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: blue;
margin-right: 10px;
}
</style>
</head>
<body>
<!-- <i class="fas fa-cat"></i> -->
<ul>
<li>锄禾日当午</li>
<li>汗滴禾下土</li>
<li>谁知盘中餐</li>
<li>粒粒皆辛苦</li>
</ul>
<!--
通过实体来使用图标字体:
&#x图标的编码;
-->
<span class="fas"></span>
</body>
</html>
阿里的字体库
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="iconfont/iconfont.css">
<!--
www.iconfont.cn
阿里图标字体库
1. 引入iconfont/iconfont.css css样式
-->
<style>
i.iconfont{
font-size: 100px;
}
p::before{
content: '\e625';
font-family: 'iconfont';
font-size: 100px;
}
</style>
</head>
<body>
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="iconfont icon-qitalaji"></i>
<p>Hello</p>
</body>
</html>
css文本
在CSS并没有为我们提供一个直接设置行间距的方式,我们只能通过设置行高来间接的设置行间距,行高越大行间距越大 使用line-height来设置行高 行高类似于我们上学单线本,单线本是一行一行,线与线之间的距离就是行高,网页中的文字实际上也是写在一个看不见的线中的,而文字会默认在行高中垂直居中显示 行间距 = 行高 - 字体大小
line-height:设置行高
- 直接接收一个大小
- 指定一个百分数,相对于字体去计算行高
- 直接指定一个数值,则行高会设置为字体大小相应的倍数
- 对于单行文本来说,可以将行高设置为和父元素的高度一致,这样可以是单行文本在父元素中垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: #bfa;
line-height: 200px;
}
</style>
</head>
<body>
<div class="box">
<a href="#">我是一个超链接</a>
</div>
</body>
</html>
text-transform
可以用来设置文本的大小写
- none 默认值,该怎么显示就怎么显示,不做任何处理
- capitalize 单词的首字母大写,通过空格来识别单词
- uppercase 所有的字母都大写
- lowercase 所有的字母都小写
text-decoration
可以用来设置文本的修饰
- none:默认值,不添加任何修饰,正常显示
- underline 为文本添加下划线
- overline 为文本添加上划线
- line-through 为文本添加删除线
letter-spacing
可以指定字符间距
letter-spacing: 10px;
word-spacing
可以设置单词之间的距离,实际上就是设置词与词之间空格的大小
word-spacing: 120px;
text-align
用于设置文本的对齐方式
- left 默认值,文本靠左对齐
- right , 文本靠右对齐
- center , 文本居中对齐
- justify , 两端对齐
- 通过调整文本之间的空格的大小,来达到一个两端对齐的目的
text-indent
用来设置首行缩进
- 当给它指定一个正值时,会自动向右侧缩进指定的像素
- 如果为它指定一个负值,则会向左移动指定的像素
- 通过这种方式可以将一些不想显示的文字隐藏起来,这个值一般都会使用em作为单位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.p1 {
text-transform: uppercase;
}
.p2 {
text-decoration: line-through;
}
a {
/*超链接会默认添加下划线,也就是超链接的text-decoration的默认值是underline
如果需要去除超链接的下划线则需要将该样式设置为none */
text-decoration: none;
}
.p3 {
word-spacing: 120px;
}
.p4{
text-align: justify ;
}
.p5{
font-size: 20px;
text-indent: -99999px;
}
</style>
</head>
<body>
<p class="p5">
在我的后园,可以看见墙外有两株树,一株是枣树,还有一株也是枣树。 这上面的夜的天空,奇怪而高,我生平没有见过这样奇怪而高的天空。
</p>
<h1 class="p4">我是一个h1</h1>
<p class="p4">
在我的后园,可以看见墙外有两株树,一株是枣树,还有一株也是枣树。 这上面的夜的天空,奇怪而高,我生平没有见过这样奇怪而高的天空。
</p>
<p class="p4">
“We should start back,” Gared urged as the woods began to grow dark around them. “The wildlings are dead.”
</p>
<p class="p3">
在我的后园,可以看见墙外有两株树,一株是枣树,还有一株也是枣树。 这上面的夜的天空,奇怪而高,我生平没有见过这样奇怪而高的天空。
</p>
<p class="p3">
“We should start back,” Gared urged as the woods began to grow dark around them. “The wildlings are dead.”
</p>
<a href="#">我是超链接</a>
<p class="p2">
“We should start back,” Gared urged as the woods began to grow dark around them. “The wildlings are dead.”
</p>
<p class="p1">
“We should start back,” Gared urged as the woods began to grow dark around them. “The wildlings are dead.”
</p>
</body>
</html>