wang

src/main/webapp/css/font.css

@@ -1,16 +1,63 @@
+/* 
+ * @font-face是CSS中的一个规则，用于定义自定义字体。通过这个规则，可以将外部字体文件引入到网页中，使得网页能够使用这些特殊的字体来显示文本内容。
+ * 下面这段代码就是定义了一个名为'iconfont'的自定义字体，并指定了其对应的字体文件来源。
+ */
 @font-face {
+  /*
+   * 定义字体的名称，后续在使用这个自定义字体时，就可以通过这个名称来引用它，这里将字体名称定义为'iconfont'。
+   */
   font-family: 'iconfont';
+  /*
+   * 指定字体文件的路径，这里使用相对路径（相对于当前CSS文件的位置）指向了.eot格式的字体文件。
+   *.eot格式是一种在早期Internet Explorer浏览器中使用的字体格式。
+   */
   src: url('../fonts/iconfont.eot');
+  /*
+   * 这是一个针对Internet Explorer浏览器的特殊处理，用于解决在IE中加载.eot字体文件时可能出现的兼容性问题。
+   * 通过添加?#iefix后缀，可以让IE正确解析和加载字体文件。同时，也指定了该字体文件的格式为'embedded-opentype'，这是.eot字体对应的标准格式描述。
+   */
   src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),
+    /*
+     * 定义了.woff格式字体文件的路径及格式声明，.woff格式是一种网页字体格式，它在保持较好字体显示效果的同时，文件体积相对较小，被广泛支持。
+     */
   url('../fonts/iconfont.woff') format('woff'),
+    /*
+     * 定义了.ttf格式字体文件的路径及格式声明，.ttf格式是TrueType字体格式，很多操作系统和软件都支持这种格式的字体，通用性较强。
+     */
   url('../fonts/iconfont.ttf') format('truetype'),
+    /*
+     * 定义了.svg格式字体文件的路径及格式声明，.svg格式的字体是基于可缩放矢量图形（SVG）技术的，不过在实际使用中相对较少，但对于一些特定场景或旧浏览器支持有一定作用。
+     * 这里在路径后面添加了#iconfont，是为了在SVG文件中准确指向对应的字体元素（SVG字体可以包含多个字体元素，通过这种方式指定具体使用哪一个）。
+     */
   url('../fonts/iconfont.svg#iconfont') format('svg');
 }
+
+/* 
+ * 下面这段CSS规则是针对使用了'iconfont'字体的元素进行样式设置。
+ */
 .iconfont{
-  font-family:"iconfont" !important;
+  /*
-  font-size:16px;font-style:normal;
+   * 强制将元素的字体设置为之前定义的'iconfont'字体，通过!important关键字确保这个字体设置具有最高优先级，不容易被其他样式规则覆盖。
+   */
+  font-family:"iconfont"!important;
+  /*
+   * 设置字体的大小为16像素，用于控制使用该字体的文本显示的大小情况。
+   */
+  font-size:16px;
+  /*
+   * 将字体的样式设置为正常（normal），也就是不使用斜体等特殊样式，保持字体的常规显示效果。
+   */
+  font-style:normal;
+  /*
+   * 在WebKit内核的浏览器（如Chrome、Safari等）中启用抗锯齿效果，使字体显示更加平滑、清晰，提升视觉效果。
+   */
   -webkit-font-smoothing: antialiased;
+  /*
+   * 在WebKit内核浏览器中设置文本笔画的宽度，这里设置为0.2像素，不过这个属性在实际应用中可能效果因浏览器和具体场景而异，不是所有浏览器都完全支持。
+   */
   -webkit-text-stroke-width: 0.2px;
+  /*
+   * 在基于Mozilla的Firefox浏览器（使用Gecko内核，后来也支持部分WebKit属性的兼容模式，通过 -moz-osx- 前缀等方式）中启用字体平滑效果，使其字体显示更清晰美观，主要针对Mac系统下的显示优化。
+   */
   -moz-osx-font-smoothing: grayscale;
-}
+}
-