【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>

效果:

相关推荐
humors2217 分钟前
Deepseek工具：H5+Vue 项目转微信小程序报告生成工具
前端·vue.js·微信小程序·h5·工具·报告
方安乐7 分钟前
ESLint代码规范（二）
前端·javascript·代码规范
zzginfo14 分钟前
var、let、const、无申明 四种变量在赋值前，使用的情况
开发语言·前端·javascript
贺小涛17 分钟前
Vue介绍
前端·javascript·vue.js
cch891841 分钟前
React Hooks的支持
前端·javascript·react.js
鹏程十八少1 小时前
9. Android Shadow插件化如何解决资源冲突问题和实现tinker热修复资源（源码分析4）
android·前端·面试
蜡台1 小时前
vue.config.js 配置
前端·javascript·vue.js·webpack
qq_381338501 小时前
微前端架构下的状态管理与通信机制深度解析：从 qiankun 源码到性能优化实战
前端·状态模式
han_1 小时前
JavaScript设计模式（六）：职责链模式实现与应用
前端·javascript·设计模式
热门推荐
012026年3月AI领域大事件：DeepSeek引领开源风暴02GitHub 镜像站点03围棋-html版本04纯 HTML/CSS/JS 实现的高颜值登录页，还会眨眼睛！少女心爆棚！05班级宠物园部署指南06安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）07OpenClaw 使用和管理 MCP 完全指南08Mac 本地部署 OMLX + 通义千问 Qwen3.5-27B 保姆级教程09“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）10UV安装并设置国内源