From 0629b731f39febd68dbeff88d037e0632121fe55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=A9=AC=E6=B5=B7=E9=A6=A8?= <2094472715@qq.com>
Date: Mon, 16 Dec 2024 19:36:53 +0800
Subject: [PATCH] mhx

---
 src/assets/fonts/demo_fontclass.html | 140 +++++++++++++++------------
 src/assets/fonts/demo_symbol.html    |  14 +++
 src/assets/fonts/iconfont.svg        |  41 +++++++-
 3 files changed, 133 insertions(+), 62 deletions(-)
diff --git a/src/assets/fonts/demo_fontclass.html b/src/assets/fonts/demo_fontclass.html
index a4cab35..009a7a7 100644
--- a/src/assets/fonts/demo_fontclass.html
+++ b/src/assets/fonts/demo_fontclass.html
@@ -1,100 +1,120 @@
-
 <!DOCTYPE html>
 <html>
 <head>
-    <meta charset="utf-8"/>
-    <title>IconFont</title>
-    <link rel="stylesheet" href="demo.css">
-    <link rel="stylesheet" href="iconfont.css">
+    <meta charset="utf-8"/> <!-- 设置文档的字符编码为UTF-8 -->
+    <title>IconFont</title> <!-- 设置网页的标题为IconFont -->
+    <link rel="stylesheet" href="demo.css"> <!-- 引入demo.css样式文件，用于页面的样式设计 -->
+    <link rel="stylesheet" href="iconfont.css"> <!-- 引入iconfont.css样式文件，包含图标字体的样式定义 -->
 </head>
 <body>
-    <div class="main markdown">
-        <h1>IconFont 图标</h1>
-        <ul class="icon_lists clear">
+    <div class="main markdown"> <!-- 定义一个主容器，使用main和markdown类进行样式设置 -->
+        <h1>IconFont 图标</h1> <!-- 设置一个一级标题，显示“IconFont 图标” -->
+        <ul class="icon_lists clear"> <!-- 定义一个无序列表，用于展示图标，同时添加clear类清除浮动 -->
             
-                <li>
-                <i class="icon iconfont icon-showpassword"></i>
-                    <div class="name">show-password </div>
-                    <div class="fontclass">.icon-showpassword</div>
+                <li> <!-- 列表项开始 -->
+                <i class="icon iconfont icon-showpassword"></i> <!-- 使用icon、iconfont和icon-showpassword类显示一个显示密码的图标 -->
+                    <!-- 图标显示区域 -->
+                    <div class="name">show-password </div> <!-- 显示图标的名称 -->
+                    <!-- 图标名称显示区域 -->
+                    <div class="fontclass">.icon-showpassword</div> <!-- 显示图标字体类名，用于开发者引用 -->
+                    <!-- 图标字体类名显示区域 -->
                 </li>
+                <!-- 列表项结束 -->
             
-                <li>
-                <i class="icon iconfont icon-user"></i>
-                    <div class="name">user</div>
-                    <div class="fontclass">.icon-user</div>
+                <li> <!-- 另一个列表项开始 -->
+                <i class="icon iconfont icon-user"></i> <!-- 使用icon、iconfont和icon-user类显示一个用户图标 -->
+                    <!-- 图标显示区域 -->
+                    <div class="name">user</div> <!-- 显示图标的名称 -->
+                    <!-- 图标名称显示区域 -->
+                    <div class="fontclass">.icon-user</div> <!-- 显示图标字体类名 -->
+                    <!-- 图标字体类名显示区域 -->
                 </li>
+                <!-- 列表项结束 -->
             
-                <li>
+                <!-- 后续列表项省略，格式与上述类似 -->
+                
+                <li> <!-- 列表项开始，展示“用户们”图标 -->
                 <i class="icon iconfont icon-users"></i>
                     <div class="name">users</div>
                     <div class="fontclass">.icon-users</div>
                 </li>
-            
-                <li>
+                <!-- 列表项结束 -->
+                
+                <li> <!-- 列表项开始，展示“密码-b”图标 -->
                 <i class="icon iconfont icon-3702mima"></i>
                     <div class="name">password-b</div>
                     <div class="fontclass">.icon-3702mima</div>
                 </li>
-            
-                <li>
+                <!-- 列表项结束 -->
+                
+                <li> <!-- 列表项开始，展示“06商品”图标 -->
                 <i class="icon iconfont icon-shangpin"></i>
                     <div class="name">06商品</div>
                     <div class="fontclass">.icon-shangpin</div>
                 </li>
-            
-                <li>
+                <!-- 列表项结束 -->
+                
+                <li> <!-- 列表项开始，展示“25单据”图标 -->
                 <i class="icon iconfont icon-danju"></i>
                     <div class="name">25单据</div>
                     <div class="fontclass">.icon-danju</div>
                 </li>
-            
-                <li>
+                <!-- 列表项结束 -->
+                
+                <li> <!-- 列表项开始，展示“28体积、空间”图标 -->
                 <i class="icon iconfont icon-tijikongjian"></i>
                     <div class="name">28体积、空间</div>
                     <div class="fontclass">.icon-tijikongjian</div>
                 </li>
-            
+              
                 <li>
-                <i class="icon iconfont icon-morentouxiang"></i>
-                    <div class="name">225默认头像</div>
-                    <div class="fontclass">.icon-morentouxiang</div>
-                </li>
+    <i class="icon iconfont icon-morentouxiang"></i> <!-- 图标元素，使用iconfont图标库中的“默认头像”图标 -->
+        <div class="name">225默认头像</div> <!-- 图标名称，显示该图标的描述 -->
+        <div class="fontclass">.icon-morentouxiang</div> <!-- 图标类名，用于在CSS或JavaScript中引用该图标 -->
+</li>
             
-                <li>
-                <i class="icon iconfont icon-baobiao"></i>
-                    <div class="name">406报表</div>
-                    <div class="fontclass">.icon-baobiao</div>
-                </li>
+<li>
+    <i class="icon iconfont icon-baobiao"></i> <!-- 图标元素，使用iconfont图标库中的“报表”图标 -->
+        <div class="name">406报表</div> <!-- 图标名称，显示该图标的描述 -->
+        <div class="fontclass">.icon-baobiao</div> <!-- 图标类名，用于在CSS或JavaScript中引用该图标 -->
+</li>
             
-                <li>
-                <i class="icon iconfont icon-lock_fill"></i>
-                    <div class="name">lock_fill</div>
-                    <div class="fontclass">.icon-lock_fill</div>
-                </li>
+<li>
+    <i class="icon iconfont icon-lock_fill"></i> <!-- 图标元素，使用iconfont图标库中的“lock_fill”图标 -->
+        <div class="name">lock_fill</div> <!-- 图标名称，显示该图标的描述 -->
+        <div class="fontclass">.icon-lock_fill</div> <!-- 图标类名，用于在CSS或JavaScript中引用该图标 -->
+</li>
             
-        </ul>
+</ul>
 
-        <h2 id="font-class-">font-class引用</h2>
-        <hr>
+<!-- 标题，说明接下来要介绍font-class引用方式 -->
+<h2 id="font-class-">font-class引用</h2>
+<hr>
 
-        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
-        <p>与unicode使用方式相比，具有如下特点：</p>
-        <ul>
-        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
-        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
-        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
-        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
-        </ul>
-        <p>使用步骤如下：</p>
-        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>
+<!-- 介绍font-class引用方式的优点 -->
+<p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
+<p>与unicode使用方式相比，具有如下特点：</p>
+<ul>
+<li>兼容性良好，支持ie8+，及所有现代浏览器。</li> <!-- 兼容性说明 -->
+<li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li> <!-- 语意明确性说明 -->
+<li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li> <!-- 替换图标方便性说明 -->
+<li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li> <!-- 多色图标不支持说明 -->
+</ul>
+<p>使用步骤如下：</p>
+<!-- 第一步：引入fontclass代码 -->
+<h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>
 
+<pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
+<!-- 注释说明：引入iconfont.css文件，该文件包含了图标字体的定义 -->
 
-        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
-        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
-        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
-        <blockquote>
-        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
-        </blockquote>
-    </div>
+<!-- 第二步：挑选相应图标并获取类名，应用于页面 -->
+<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
+<!-- 注释说明：使用<i>标签，并添加iconfont和具体的图标类名（如icon-xxx），来在页面上显示图标 -->
+<blockquote>
+<p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
+<!-- 注释说明：iconfont是CSS中定义的字体族名，用于指定图标字体 -->
+</blockquote>
+</div>
 </body>
 </html>
diff --git a/src/assets/fonts/demo_symbol.html b/src/assets/fonts/demo_symbol.html
index f390e7f..f701b52 100644
--- a/src/assets/fonts/demo_symbol.html
+++ b/src/assets/fonts/demo_symbol.html
@@ -1,27 +1,41 @@
 
 <!DOCTYPE html>
+<!-- 声明文档类型为HTML5 -->
 <html>
+<!-- HTML文档的根元素 -->
 <head>
+    <!-- 头部元素，包含文档的元数据 -->
     <meta charset="utf-8"/>
+    <!-- 指定文档使用的字符编码为UTF-8 -->
     <title>IconFont</title>
+    <!-- 设置文档的标题，显示在浏览器的标签页上 -->
     <link rel="stylesheet" href="demo.css">
+    <!-- 链接外部样式表demo.css，用于定义页面的样式 -->
     <script src="iconfont.js"></script>
+    <!-- 引入外部JavaScript文件iconfont.js，可能包含图标字体的初始化代码或功能 -->
 
     <style type="text/css">
+        <!-- 内部样式表，定义具体的CSS规则 -->
         .icon {
+          /* 图标类的基本样式定义 */
           /* 通过设置 font-size 来改变图标大小 */
           width: 1em; height: 1em;
+          /* 使用em单位设置图标的宽度和高度，em单位相对于当前元素的字体大小 */
           /* 图标和文字相邻时，垂直对齐 */
           vertical-align: -0.15em;
+          /* 通过微调vertical-align属性，使图标与文本垂直对齐 */
           /* 通过设置 color 来改变 SVG 的颜色/fill */
           fill: currentColor;
+          /* 使用currentColor关键字，使图标的填充颜色与父元素的文本颜色一致 */
           /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
              normalize.css 中也包含这行 */
           overflow: hidden;
+          /* 隐藏超出SVG viewBox边界的内容，解决IE浏览器的显示问题 */
         }
 
     </style>
 </head>
+
 <body>
     <div class="main markdown">
         <h1>IconFont 图标</h1>
diff --git a/src/assets/fonts/iconfont.svg b/src/assets/fonts/iconfont.svg
index 1384321..65b38b9 100644
--- a/src/assets/fonts/iconfont.svg
+++ b/src/assets/fonts/iconfont.svg
@@ -1,15 +1,40 @@
-<?xml version="1.0" standalone="no"?>
+<?xml version="1.0" standalone="no"?> <!-- 声明XML版本为1.0，且不是独立文档 -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+    文档类型定义（DTD），指定这是一个SVG 1.1文档，并链接到SVG 1.1的DTD。
+    DTD定义了SVG文档的结构和允许的元素。
+-->
 <!--
 2013-9-30: Created.
 -->
+<!--
+    注释：该SVG文件是在2013年9月30日创建的。
+-->
 <svg>
+<!--
+    SVG根元素，所有SVG内容都包含在此元素内。
+-->
 <metadata>
+<!--
+    元数据元素，用于存储有关SVG文件的额外信息。
+-->
 Created by iconfont
+<!--
+    元数据内容，说明该SVG文件是由iconfont创建的。
+-->
 </metadata>
 <defs>
+<!--
+    定义元素，用于存储SVG文档中可重复使用的元素定义。
+    例如，可以在这里定义渐变、滤镜、字体等。
+-->
 
 <font id="iconfont" horiz-adv-x="1024" >
+<!--
+    字体元素，定义一个SVG字体。
+    id属性为字体指定一个唯一标识符。
+    horiz-adv-x属性指定水平高级宽度，即字体中字符的水平间距。
+-->
   <font-face
     font-family="iconfont"
     font-weight="500"
@@ -18,8 +43,20 @@ Created by iconfont
     ascent="896"
     descent="-128"
   />
+  <!--
+    font-face元素，定义字体的外观属性。
+    font-family属性指定字体的名称。
+    font-weight属性指定字体的粗细。
+    font-stretch属性指定字体的拉伸程度。
+    units-per-em属性指定em单位的尺寸，em是相对于字体大小的单位。
+    ascent属性指定字符的上升部分的高度。
+    descent属性指定字符的下降部分的高度（负值表示下降）。
+  -->
     <missing-glyph />
-    
+    <!--
+    missing-glyph元素，定义当字符在字体中找不到时显示的默认图形。
+    在这个例子中，没有指定missing-glyph的内容，所以它可能是一个空图形或默认的回退图形。
+  -->
     <glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
 d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
 t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
