当前位置： 首页 > article >正文

【CSS】字体文本

article 2024/11/15 11:54:06

  • color 颜色
  • font-size 大小
  • font-family 字体
  • font-style 样式
  • font-weight 加粗
  • text-decoration 下划线
  • text-shadow 阴影
  • text-transform 大小写变换
  • text-indent 缩进
  • text-align 水平对齐 、vertical-align垂直对齐
  • text-overflow 溢出
  • word-wrap 换行
  • word-break 截断
  • white-space 空白符
  • word-spacing 单词间隔 、letter-spacing 字母间隔
  • line-height 行高
  • writing-mode 排布
  • iconfont 字体图标 、font-family 字体引入

继承性：子级继承父级样式控制属性（子级拥有自己的样式则不会继承父级）；层叠性：相同的属性后面覆盖前面，不同的属性叠加；优先级：选择器优先级高的样式生效

color 颜色

<style>
	div{
		color: red; /* 命名颜色 */
		color: #48ff00; /* 十六进制 */
		color: rgb(6, 140, 250); /* RGB（红,绿,蓝）  取值范围 0-255 */
		color: rgba(252, 0, 197,0.8); /* RGB（红,绿,蓝,透明度）  透明度取值范围 0-1*/
	}
</style>
<div>颜色颜色颜色</div>

效果:
在这里插入图片描述

font-size 大小

默认为16px；可设置为 绝对大小，也可设置为 相对大小

<style>
	div{
	font-size: 30px;
	}
	div:nth-of-type(1) span{
		font-size: 40px;  /* px：绝对单位，不会随父元素字体大小改变 */
	}
	div:nth-of-type(2) span{
		font-size: 2em;  /* em：相对于父元素的字体大小的n倍 */
	}
	div:nth-of-type(3) span{
		font-size:200%;  /* %：相对于父元素的字体大小的%多少 */
	}
	div:nth-of-type(4) span{
		font-size:2rem;  /* rem：相对于根元素（即html元素）的字体大小（16px）的2倍 */
	}
</style>
<div>绝对<span>px</span>单位</div>
<div>相对<span>em</span>单位</div>
<div>相对<span>%</span>单位</div>
<div>相对<span>rem</span>单位</div>

效果:
在这里插入图片描述

font-family 字体

可同时指定多个字体，中间以逗号隔开；表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体；如果都没有，则以我们电脑默认的字体为准。若要给英文设置另一个字体，则英文字体需写在中文字体前面

<style>
	div:nth-of-type(1){
		font-family: "隶书";
	}
	div:nth-of-type(2){
		font-family: "SimSun","微软雅黑";
	}
	div:nth-of-type(3){
		font-family: "Times New Roman","SimSun","微软雅黑";
	}
</style>
<div>文字文字文字hello happy</div>
<div>文字文字文字hello happy</div>
<div>文字文字文字hello happy</div>

效果:
在这里插入图片描述

font-style 样式

<style>
	div:nth-of-type(1){
		font-style: normal; /* normal 默认正常文本 */
	}
	div:nth-of-type(2){
		font-style: italic; /* italic 斜体 */
	}
	div:nth-of-type(3){
		font-style: oblique; /* oblique 正常文本的倾斜显示 */
	}
</style>
<div>文字文字hello文字happy文字</div>
<div>文字文字hello文字happy文字</div>
<div>文字文字hello文字happy文字</div>

效果:
在这里插入图片描述

font-weight 加粗

关键字:normal默认，bold粗体；具体数值:100 200 300 400等同于normal 500 600 700等同于bold 800 900（有时候看不到粗细变化，是因为所使用的字体不支持。比如"微软雅黑"，只支持400和700这两种粗细；而Mac的"苹方"字体，支持100到900之间的各种粗细）；相对值:lighter更细，bolder更粗

<style>
	div:nth-of-type(1) span:nth-of-type(1){
		font-weight: bold;
	}
	div:nth-of-type(1) span:nth-of-type(2){
		font-weight: 900;
	}
	div:nth-of-type(2) span:nth-of-type(1){
		font-weight: lighter;
	}
	div:nth-of-type(2) span:nth-of-type(2){
		font-weight: bolder;
	}
</style>
<div><span>加粗</span> normal <span>900</span></div>
<div><span>更细</span> normal <span>更粗</span></div>

效果:
在这里插入图片描述

text-decoration 下划线

<style>
	div{
		margin: 10px;
	}
	div:nth-of-type(1){
		/* none：默认属性，没有装饰；underline：下划线；overline：上划线；line-through：中划线，有一条贯穿文本中间的修饰线 */
		text-decoration-line: underline;
		/* 颜色 */
		text-decoration-color: #0022ff;
		/* solid：实线；double：双实线；dotted：点划线；dashed：虚线；wavy：波浪线 */
		text-decoration-style: wavy;
		/* auto：由浏览器为文本装饰线选择合适的厚度；from-font：字体文件中包含的首选的厚度值；其它： em  px  % */
		text-decoration-thickness: 2px;
	}
	div:nth-of-type(2){
		/* 四个参数可以写在 text-decoration 的任意位置 */
		text-decoration: #00be16 6px dotted line-through;
	}
	div:nth-of-type(3){
		text-decoration: #ff2222 from-font dashed underline;
	}
	div:nth-of-type(4){
		text-decoration: #d122ff 2px double underline;
	}
</style>
<div>文字hello文字happy文字</div>
<div>文字hello文字happy文字</div>
<div>文字hello文字happy文字</div>
<div>文字hello文字happy文字</div>

效果:
在这里插入图片描述

text-shadow 阴影

<style>
	*{
		font-size: 30px;
		margin: 10px;
	}
	.one{
		/*
			h-shadow	必需的；水平偏移量；正数-向右偏移，负数-向左偏移。
			v-shadow	必需的；垂直偏移量；正数-向下偏移，负数-向上偏移
			blur-radius	 可选；模糊半径；数值越大越模糊；若不指定则无模糊效果。
			color	必需的；颜色；
		*/
		text-shadow: 3px 10px 2px red;
	}
	.more{
		/* 使用多个阴影效果时，用逗号隔开；后面的阴影会叠加在前面的阴影之上 */
		text-shadow: -3px -10px 2px red,
		-1px -16px 2px rgb(5, 173, 104),
		2px -20px 2px #ffb700,
		5px -24px 2px rgba(163, 7, 225,0.5);
	}
	.loukong{
		color: white;
		text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
	}
	.jianbian{
		/* 线性渐变 */
		background: linear-gradient(to right,red,green 40%,orange 60%,plum 80%,blue);
		/* 控制背景的裁剪区域，决定背景在元素中的显示范围 */
		-webkit-background-clip: text;
		/* 文字的填充颜色  transparent透明，text-fill-color会覆盖color */
		-webkit-text-fill-color: transparent;

		/* 阴影 */
		text-shadow: 0 5px 20px #cdff88;
	}
</style>
<span class="one">文字文字</span>
<span  class="more">文字文字</span>
<span class="loukong">文字</span>
<p class="jianbian">文字文字文字文字文字文字</p>

效果:
在这里插入图片描述

text-transform 大小写变换

<style>
	/* none：默认不做任何处理 */

	p:nth-of-type(1){
		text-transform: capitalize; /* capitalize：单词的首字母大写，通过空格来识别单词 */
	}
	p:nth-of-type(2){
		 text-transform: lowercase; /* lowercase：所有的字母都小写 */
	 }
	p:nth-of-type(3){
		text-transform: uppercase; /* uppercase：所有的字母都大写 */
	}
</style>
<p>designers and developers</p>
<p>designers and developers</p>
<p>designers and developers</p>

效果:
在这里插入图片描述

text-indent 缩进

仅适用于块级元素，对行内元素无效

<style>
	p:nth-of-type(1){
		/* 可以设置为负值，但是会出现显示不全的问题，需要提前预留出位置（padding）即可 */
		text-indent: 70px;
	}
	p:nth-of-type(2){
		padding: 0 20px;
		text-indent: -20px;
	}
	p:nth-of-type(3){
		text-indent: 2em; /* 2em即两个中文的宽度 */
	}
	p:nth-of-type(4){
		text-indent: 30%; /* 相对于父元素宽度的百分比 */
	}
</style>
<p>文字文字文字hello文字文字happy文字文字我，是卖报的小行家捡到一分钱。文字文字happy文字文字我，是卖报的小行家捡到一分钱</p>
<p>文字文字文字hello文字文字happy文字文字我，是卖报的小行家捡到一分钱。文字文字happy文字文字我，是卖报的小行家捡到一分钱</p>
<p>文字文字文字hello文字文字happy文字文字我，是卖报的小行家捡到一分钱。文字文字happy文字文字我，是卖报的小行家捡到一分钱</p>
<p>文字文字文字hello文字文字happy文字文字我，是卖报的小行家捡到一分钱。文字文字happy文字文字我，是卖报的小行家捡到一分钱</p>

效果:
在这里插入图片描述

text-align 水平对齐 、vertical-align垂直对齐

<style>
	p{
		border: 1px solid red;
	}
	p:nth-of-type(1){
		text-align: center; /* left:默认值；right：右对齐；center：居中对齐 */
	}
	p:nth-of-type(2) span{
		/* 不同大小的文字的垂直对齐，使用vertical-align（top默认 middle  bottom  baseline基线）*/
		vertical-align: middle;
	}
</style>
<p>文字文字文字</p>
<p>
	<span style="font-size: 25px;">Second</span>
	<span style="font-size: 16px;">First</span>
</p>

效果:
在这里插入图片描述

text-overflow 溢出

<style>
	/*
		clip：不显示溢出文本     ellipsis：用省略标记"..."溢出文本

		需要与 overflow: hidden;和 white-space: nowrap;一起使用    若依旧不生效常见于容器被设置了display: flex;
   */
	ul{
		list-style: none;margin: 20px 0;padding: 0;
		border: 1px solid #727272;
		width: 200px;
	}
	li{
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	table{
		width: 200px;
		/* 但是在 table 中不起作用，百度说要想起作用需给 table元素设定 table-layout: fixed 单元格固定 */
		table-layout: fixed;
	}
	td{
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
</style>
<ul>
	<li>骄傲了单精度第四集外拉倒大垃圾袋</li>
	<li>骄傲了单精度第四集外拉倒大垃圾袋</li>
</ul>
<table border="1">
	<tr>
		<td>骄傲大垃圾袋大大垃圾袋垃圾袋</td>
		<td>骄傲了大垃圾袋骄傲大垃圾了单</td>
	</tr>
</table>

效果:
在这里插入图片描述

word-wrap 换行

<style>
	/*
		normal：（浏览器默认处理）仅仅在同意的断字点换行
		break-word：允许在长单词或URL地址内部进行换行；即在容器末端有长单词不能完全显示时，不会截断单词，而是作为整体自动换行
	*/
	div{
		width: 200px;height: 120px;border: 1px solid red;
	}
	#div2{
		overflow-wrap: break-word;
		word-wrap: break-word;
		/* CSS3中将 word-warp 改名为 overflow-wrap，同时使用提高兼容性 */
	}
</style>
<div id="div1">
	Lorem ipsum dolor sit amet, ipsum amet-consectetur elit. https://blog.csdn.net/wei_xin_30667649
</div>
<div id="div2">
	Lorem ipsum dolor sit amet, ipsum amet-consectetur elit. https://blog.csdn.net/wei_xin_30667649
</div>

效果:
在这里插入图片描述

word-break 截断

<style>
	div{
		width: 200px;height: 80px;border: 1px solid red;
	}
	#div2{
		/*
			keep-all：默认，不允许在单词内换行，仅能在半角空格或连字符"-"处换行
			break-all：在单词内换行，即在容器末端有长单词不能全然显示，会截断单词
					 （弥补了 word-wrap:break-word 对于长串英文不起作用的缺陷）
		*/
		word-break: break-all;
	}
</style>
<div id="div1">
	Lorem ipsum dolor sit amet, ipsum amet-consectetur elit
</div>
<div id="div2">
	Lorem ipsum dolor sit amet, ipsum amet-consectetur elit
</div>

效果:
在这里插入图片描述

white-space 空白符

<style>
	div{
		width: 200px;height: 100px;border: 1px solid red;
	}
	#div2{
		/*
			空白字符包括空格，制表符等

			normal：合并空格（换行符转化为一个空格），换行
			nowrap：合并空格（换行符转化为一个空格），不换行
			pre-wrap：保留空格、换行符，换行
			pre：保留空格、换行符，不换行
			pre-line：合并空格，保留换行符，换行
		*/
		white-space: pre-wrap;
	}
</style>
<div id="div1">
	Lorem ipsum dolor sit amet, ipsum amet-consectetur elit
</div>
<div id="div2">
	Lorem ipsum dolor sit amet, ipsum amet-consectetur elit
</div>

效果:
在这里插入图片描述

word-spacing 单词间隔 、letter-spacing 字母间隔

<p style="letter-spacing: 2em">Hello Word 你好，世界！</p>

<p style="word-spacing: 2em">Hello Word 你好，世 界！</p> <!-- 仅仅作用于空格隔开的单词、字-->

效果:
在这里插入图片描述

line-height 行高

<style>
	p{
		border: 1px solid red;
		height: 40px;
		/* 让单行文本垂直居中，设置 line-height 与文字父元素的高度相同 */
		line-height: 40px;
		/* 行高：行与行之间的基线到基线的距离 */
	}
</style>
<p>First</p>
<p>Second</p>

效果:
在这里插入图片描述

writing-mode 排布

<style>
	p{
		width: 150px;height: 150px;border: 1px solid red;
		margin: 0px;float: left;
	}

	/* 定义了文本水平或垂直排布以及在块元素中文本的行进方向，不是所有的浏览器都兼容 */
	p:nth-of-type(1){
		writing-mode: vertical-rl;
	}
	p:nth-of-type(2){
		writing-mode: vertical-lr;
	}
	p:nth-of-type(3){
		writing-mode: horizontal-tb;
	}
</style>
<p>海上生明月，天涯共此时。情人怨遥夜，竟夕起相思。</p>
<p>灭烛怜光满，披衣觉露滋。不堪盈手赠，还寝梦佳期。</p>
<p>灭烛怜光满，披衣觉露滋。不堪盈手赠，还寝梦佳期。</p>

效果:
在这里插入图片描述

iconfont 字体图标 、font-family 字体引入

<!-- font-class引用方式 1：引入项目下面生成的 fontclass 代码 -->
<link rel="stylesheet" href="./day5/font/iconfont.css">

<style>
	/* font-class引用方式 3：可以单独修改某一个的样式*/
	.icon-img_home_tag_classify_1_bg_color{
		color: red;
		font-size: 100px;
	}

	/* Symbol引入方式 2：加入通用 CSS 代码（引入一次就行） */
	.icon {
		width: 1em;
		height: 1em;
		vertical-align: -0.15em;
		fill: currentColor;
		overflow: hidden;
	}

	/* Symbol引入方式 4：可以单独修改某一个的样式 */
	.dd{
		width: 100px;
		height: 100px;
	}

	/* 使用 @font-face规则来定义字体名称和字体文件路径 */
	@font-face {
		font-family: "阿里妈妈刀隶体"; /* 自定义字体名称 */
		src: url("./day5/阿里妈妈刀隶体/AlimamaDaoLiTi.ttf") format("truetype"), /* 字体文件的路径 */
			 url("./day5/阿里妈妈刀隶体/AlimamaDaoLiTi.woff") format("woff");
			 url("./day5/阿里妈妈刀隶体/AlimamaDaoLiTi.woff2") format("woff2"); /* 为了提高兼容性，可提供多种格式的字体文件 */
	}
	p {
		font-family: "阿里妈妈刀隶体", "fangsong"; /* fangsong是备用字体 */
		font-size: 50px;
	}
</style>

<!-- font-class引用方式 2：挑选相应图标并获取类名，应用于页面 -->
<span class="iconfont icon-img_home_tag_classify_1_bg_color"></span>

<!-- Symbol引入方式 3：挑选相应图标并获取类名，应用于页面（浏览器渲染 SVG 的性能一般，还不如 png） -->
<svg class="icon dd" aria-hidden="true">
	<use xlink:href="#icon-pencil-01"></use>
</svg>

<!-- Symbol引入方式 1：引入项目下面生成的 symbol 代码 -->
<script src="./day5/font/iconfont.js"></script>

<!-- 使用 @font-face规则中的外部下载的字体 -->
<p>中秋节快乐</p>

效果:
在这里插入图片描述


http://www.kler.cn/a/317529.html

相关文章：

  • 【Visual Studio】使用VS调试(Debug)
  • git配置远程仓库的认证信息
  • RabbitMQ高效的消息队列中间件原理及实践
  • Android Studio 将项目打包成apk文件
  • quartz
  • Axure网络短剧APP端原型图，竖屏微剧视频模版40页
  • SQL_UNION
  • 【Linux】系统字符集无法修改，单独修改vim后的文件字符集
  • 爬虫技术初步自学
  • FreeRTOS学习——Systick中断、SVC中断、PendSV中断
  • 反转字符串 II--力扣541
  • k8s介绍-搭建k8s
  • Redis数据结构之哈希表
  • 【QT】QSS基础
  • Qt-qmake语言
  • 【网络基础知识】详解TCP/IP协议栈
  • golang调用163邮箱发送邮件
  • Spring Data Rest 远程命令执⾏命令(CVE-2017-8046) 靶场攻略
  • phpword读取word docx文档文本及图片转html格式
  • ElasticSearch分页查询性能及封装实现
  • 为什么推荐使用英文版LabVIEW
  • linux-网络管理-网络配置
  • 直播美颜工具的开发详解：基于视频美颜SDK的解决方案
  • java项目之基于springboot的医院资源管理系统源码
  • 【Linux 从基础到进阶】 Xen 虚拟化技术应用
  • 【实践功能7】前端实现截屏