css字体和文本

最新推荐文章于 2024-08-26 17:02:51 发布

Machoul

最新推荐文章于 2024-08-26 17:02:51 发布

阅读量120

点赞数

分类专栏： css 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/qq_34932086/article/details/125498645

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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">&#xf0f3;</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">&#xe61c;</i>
    <i class="iconfont">&#xe622;</i>
    <i class="iconfont">&#xe623;</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>

Machoul

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css字体和文本

font-face可以将服务器中的字体直接提供给用户去使用,问题：字体相关的样式color 用来设置字体颜色font-size 字体的大小和font-size相关的单位font-family 字体族（字体的格式）可选值：指定字体的类别，浏览器会自动使用该类别下的字体font-family 可以同时指定多个字体，多个字体间使用,隔开字体生效时优先使用第一个，第一个无法使用则使用第二个以此类推font样式在CSS中还为我们提供了一个样式叫font，使用该样式可以同时设置字体相关的所有样式,可以将字体的样
复制链接

扫一扫

专栏目录