/* 定义字体图标的字体文件 */ @font-face { /* 定义字体家族名称为 'iconfont' */ font-family: 'iconfont'; /* 指定字体文件路径,使用 eot 格式(IE6-IE8 支持) */ src: url('../fonts/iconfont.eot'); /* 指定其他格式的字体文件,分别为:eot、woff、truetype 和 svg, 这些格式针对不同的浏览器提供支持。 */ src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE Fix for eot 文件 */ url('../fonts/iconfont.woff') format('woff'), /* WOFF 格式,用于大多数现代浏览器 */ url('../fonts/iconfont.ttf') format('truetype'), /* TTF 格式,用于某些旧版浏览器 */ url('../fonts/iconfont.svg#iconfont') format('svg'); /* SVG 格式,用于移动设备和一些现代浏览器 */ } /* 配置图标字体的样式 */ .iconfont{ /* 设置字体家族为 'iconfont',确保所有使用该类的元素应用自定义图标字体 */ font-family: "iconfont" !important; /* 设置字体大小为 16px,可以根据需求调整大小 */ font-size: 16px; /* 设置字体样式为正常,确保图标显示清晰 */ font-style: normal; /* 启用 Webkit 浏览器的字体平滑效果,使得字体显示更加柔和 */ -webkit-font-smoothing: antialiased; /* 设置文本描边宽度,防止在某些浏览器中显示模糊的图标 */ -webkit-text-stroke-width: 0.2px; /* 启用 Firefox OS X 上的字体平滑效果,使字体更加清晰 */ -moz-osx-font-smoothing: grayscale; }