From 9466ccd817727fc8bdc0e844bd6967a11dc22ff5 Mon Sep 17 00:00:00 2001 From: wang ziting <3165305859@qq.com> Date: Sat, 14 Dec 2024 00:07:42 +0800 Subject: [PATCH] wang --- src/main/webapp/css/font.css | 55 +++++++++++++++++++++++++++++++++--- 1 file changed, 51 insertions(+), 4 deletions(-) diff --git a/src/main/webapp/css/font.css b/src/main/webapp/css/font.css index b83e5b4..fc3316a 100644 --- a/src/main/webapp/css/font.css +++ b/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; -} - +} \ No newline at end of file