【CSS】字体文本

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

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

color 颜色

html 复制代码 
<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；可设置为 绝对大小，也可设置为 相对大小

html 复制代码 
<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 字体

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

html 复制代码 
<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 样式

html 复制代码 
<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更粗

html 复制代码 
<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 下划线

html 复制代码 
<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 阴影

html 复制代码 
<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 大小写变换

html 复制代码 
<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 缩进

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

html 复制代码 
<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垂直对齐

html 复制代码 
<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 溢出

html 复制代码 
<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 换行

html 复制代码 
<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 截断

html 复制代码 
<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 空白符

html 复制代码 
<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 字母间隔

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

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

效果:

line-height 行高

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

效果:

writing-mode 排布

html 复制代码 
<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 字体引入

html 复制代码 
<!-- 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>

效果:

相关推荐
web150850966414 分钟前
在uniapp Vue3版本中如何解决webH5网页浏览器跨域的问题
前端·uni-app
Yvemil77 分钟前
《开启微服务之旅：Spring Boot Web开发举例》（一）
前端·spring boot·微服务
少年姜太公1 小时前
从零开始详解js中的this(下)
前端·javascript·程序员
哑巴语天雨1 小时前
React+Vite项目框架
前端·react.js·前端框架
初遇你时动了情1 小时前
react 项目打包二级目 使用BrowserRouter 解决页面刷新404 找不到路由
前端·javascript·react.js
乔峰不是张无忌3301 小时前
【HTML】动态闪烁圣诞树+雪花+音效
前端·javascript·html·圣诞树
鸿蒙自习室2 小时前
鸿蒙UI开发——组件滤镜效果
开发语言·前端·javascript
m0_748250742 小时前
高性能Web网关：OpenResty 基础讲解
前端·openresty
前端没钱2 小时前
从 Vue 迈向 React：平滑过渡与关键注意点全解析
前端·vue.js·react.js
NoneCoder2 小时前
CSS系列（29）-- Scroll Snap详解
前端·css
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04机器人编程怎么入门？05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问07SQL 主从数据库实时备份08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10VSCode插件 —— Cody AI （免费AI助手！）