|
|
|
|
@ -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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
