【CSS】字体文本

news2024/12/24 9:09:37

  • 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.coloradmin.cn/o/2170394.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Uptime Kuma运维监控服务本地部署结合内网穿透实现远程在线监控

目录 前言 主要功能 一、前期准备 本教程环境为&#xff1a;Centos7&#xff0c;可以跑Docker的系统都可以使用本教程安装。 本教程使用Docker部署服务&#xff0c;如何安装Docker详见&#xff1a; 二、Docker部署Uptime Kuma 三、实现公网查看网站监控 四、使用固定公…

一文看懂英伟达系列显卡特点及性能参数对比

英伟达介绍 英伟达(NVIDIA)是美国一家专业的计算机图形芯片制造商&#xff0c;作为全球领先的GPU生产商&#xff0c;英伟达显卡产品系列涵盖GeForce、Quadro、Tesla、NVS、GRID等消费级、专业级和企业级市场。并被广泛应用于游戏、深度学习、科学计算和图形处理等领域。 NVID…

建筑智能,推动智慧社区发展

建筑智能已经成为现代城市建设的热门词汇。它不仅是提高城市建筑现代化水平的必由之路&#xff0c;也是未来城市智能化的重要标志。其中&#xff0c;智能社区是建筑智能化的重要环节之一。 智能社区是指以信息技术为基础&#xff0c;通过信息技术实现社区设施设备网络化、监管…

JS设计模式之模板方法模式:打破束缚,解密代码复用的精髓

一. 前言 在前端开发中&#xff0c;模板方法模式是一种常用的设计模式&#xff0c;它能够有效地提高代码的复用性和扩展性。在 JavaScript 中&#xff0c;模板方法模式的应用广泛&#xff0c;常被用于组件的生命周期管理、请求封装和拦截器设计、表单验证等多个场景。 本篇文…

数据结构和算法之树形结构(3)

文章出处&#xff1a;数据结构和算法之树形结构(3) 关注码农爱刷题&#xff0c;看更多技术文章&#xff01;&#xff01; 四、平衡二叉树(接前篇) 上一章节讲到为了避免二叉查找树退化成链表后的极度不平衡带来的低效率而衍生出了平衡二叉树&#xff0c;平衡二叉树的严格定义…

CDGA|数据治理:策略与价值的深度融合

在当今这个数据驱动的时代&#xff0c;企业数据治理的重要性日益凸显。数据不仅是企业的核心资产&#xff0c;更是驱动业务决策、优化运营流程、创新产品服务的关键力量。然而&#xff0c;要让数据治理真正发挥价值&#xff0c;企业需要采取一系列策略来确保数据的准确性、完整…

Unity 资源 之 PoseAI 基于肌肉的姿势创作工具

Unity 资源 之 PoseAI 基于肌肉的姿势创作工具 一&#xff0c;前言二&#xff0c;资源包内容三&#xff0c;免费获取资源包 一&#xff0c;前言 Unity 开发者们&#xff0c;今天要为大家介绍一款极具创新性的工具 ——PoseAI。 PoseAI 是一种最先进的基于肌肉的姿势创作工具&…

Flink基本概念和算子使用

基础概念 Flink是一个框架和分布式处理引擎&#xff0c;用于对无界数据流和有界数据流进行有状态计算&#xff0c;它的核心目标是“数据流上的有状态计算”。 有界流和无界流 有界流&#xff1a;具有明确的开始和结束时间&#xff0c;数据量有限。适合使用批处理技术&#xf…

Elasticsearch实战宝典:从日志分析到实时数据监控,全方位解锁搜索与分析的无限可能!

Elasticsearch 是一个开源的分布式搜索和分析引擎&#xff0c;常用于处理大规模数据。它提供了强大的全文搜索、结构化搜索、实时统计分析等功能。以下是一些 Elasticsearch 的实战应用案例。 1. 日志分析系统 Elasticsearch 经常被用于集中式日志管理&#xff08;Centralized…

使用SSE流式输出(Javaweb前后端实战)

目录 一.什么是SSE&#xff1f; 主要特点&#xff1a; 二.SSE的实现过程&#xff1a; 三.SSE的前端实现&#xff1a; 1.创建 EventSource 对象&#xff1a; 2.处理接收到的信息&#xff1a; 3.处理特定事件&#xff1a; 4.处理连接错误问题&#xff1a; 5.关闭连接&am…

网络安全的方方面面

目录 一、网络安全概述二、数据加密三、消息完整性与数字签名四、身份认证五、密钥分发中心(KDC)与证书认证(CA)六、防火墙与入侵检测系统七、网络安全协议八、网络安全攻防 -- 黑客攻击简要流程九、网络安全常用术语 一、网络安全概述 网络安全的基本特征&#xff1a;相对性、…

ArcGIS Desktop使用入门(三)常用工具条——拓扑(上篇:地图拓扑)

系列文章目录 ArcGIS Desktop使用入门&#xff08;一&#xff09;软件初认识 ArcGIS Desktop使用入门&#xff08;二&#xff09;常用工具条——标准工具 ArcGIS Desktop使用入门&#xff08;二&#xff09;常用工具条——编辑器 ArcGIS Desktop使用入门&#xff08;二&#x…

基于Java的学生档案管理系统

基于springbootvue实现的学生档案管理系统 &#xff08;源码L文ppt&#xff09;4-065 第4章 系统设计 4.1 总体功能设计 学生档案管理系统的总体功能设计包括学生信息管理、课程管理、教师信息管理、成绩管理和系统配置管理。系统将提供用户友好的界面&#xff0c;支…

【Linux】图解详谈HTTPS的安全传输

文章目录 1.前置知识2.只使用对称加密3.只使用非对称加密 因为私钥加密只能公钥解开&#xff0c;公钥加密只能私钥解开4.双方都是使用非对称加密5.非对称加密 对称加密6.非对称加密对称加密CA认证&#xff08;一&#xff09;CA认证&#xff08;二&#xff09;https &#xff0…

耳夹式耳机哪个牌子好?主流耳夹式耳机推荐,多维度耳夹式耳机测评

耳夹式耳机哪个牌子好&#xff1f;耳机已经逐渐走进了众多消费者的生活&#xff0c;可以非常便捷地满足人们的对声音的需求&#xff0c;无论是在享受音乐还是接听电话方面都非常方便&#xff0c;极大地提升了生活的便利性。然而&#xff0c;随着耳夹式耳机的热度不断攀升&#…

IDEA插件开发入门

前置条件: Java17、Gradle8 1. 安装插件 Plugin DevKit 2. 新建项目 File → New → Project 3. 项目结构 &#x1f4e2; 新建一个XxxAction 4. 插件入口 XxxAction 继承 AnAction &#xff0c;实现 actionPerformed 方法&#xff0c;这是一个插件的入口 5. 插件配置 …

裸辞后勇闯AI领域:我的AGI产品经理之路

2021 年&#xff0c;我开始接触生成式 AI。2023 年 8 月&#xff0c;我按捺不住内心对 AI 技术浪潮的热情&#xff0c;从外企裸辞投身 AI。2023 年&#xff0c;我们团队先后入围由百度和阿里组织的 AGI 黑客马拉松活动&#xff0c;并在阿里第三季 AI 创客松中获得“从 0 到 1 奖…

远程唤醒局域网主机技术Wake On LAN

WOL用途 如果你在开发一个计算机管理软件&#xff08;利旧现有主机&#xff0c;实现统一运维管理&#xff09;&#xff0c;例如电脑课开课前老师一键开启电教室的电脑 。 魔法原理 Wake-on-LAN 的原理其实很简单。我们发送一个特殊的网络包&#xff08;俗称"魔术包&quo…

学生党头戴式蓝牙耳机怎么选?平价学生党头戴式蓝牙耳机排行推荐

在选择适合学生党的头戴式蓝牙耳机时&#xff0c;我们不仅要考虑价格因素&#xff0c;还要兼顾音质、舒适度、降噪效果、续航能力以及是否具备实用的功能等多个方面&#xff0c;那么学生党头戴式蓝牙耳机怎么选&#xff1f;作为学生群体&#xff0c;我们既追求性价比&#xff0…

微软推出GRIN-MoE:开创专家路由新范式

前沿科技速递&#x1f680; 在人工智能领域&#xff0c;模型的性能和可扩展性一直是研究的热点。微软最近推出的GRIN-MoE&#xff08;Gradient-Informed Mixture-of-Experts&#xff09;模型&#xff0c;以其独特的架构和显著的性能表现&#xff0c;正引领着AI技术的前沿&#…