/* ============================== 自定义字体定义 ============================== */ /* 定义自定义字体 */ @font-face { font-family: "Unitext"; src: url("./assets/font/Unitext-BlackItalic.TTF") format("truetype"); font-style: italic; font-display: swap; /* 优化字体加载性能 */ } /* 如果需要添加更多字体文件,可以继续定义 */ /* @font-face { font-family: 'CustomFont'; src: url('./assets/font/CustomFont-Regular.woff2') format('woff2'), url('./assets/font/CustomFont-Regular.woff') format('woff'), url('./assets/font/CustomFont-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'CustomFont'; src: url('./assets/font/CustomFont-Bold.woff2') format('woff2'), url('./assets/font/CustomFont-Bold.woff') format('woff'), url('./assets/font/CustomFont-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } */ /* ============================== 现代 CSS 重置核心样式 ============================== */ /* 1. 盒模型统一:强制使用 border-box(更符合直觉) */ *, *::before, *::after { box-sizing: border-box; } /* 2. 基础元素边距重置(仅针对易引发问题的元素) */ body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; } /* 3. 列表样式清除(保留语义化结构,仅去符号) */ ul, ol { list-style: none; padding-left: 0; /* 部分浏览器默认有内边距 */ } /* 4. 链接样式标准化 */ a { color: inherit; /* 继承父级颜色,避免默认蓝色 */ text-decoration: none; /* 清除下划线(可根据需求调整) */ background-color: transparent; /* 清除 IE 默认背景色 */ } /* 5. 表单元素标准化(覆盖主流浏览器差异) */ input, button, select, textarea { margin: 0; padding: 0; border: 1px solid #ddd; /* 统一边框 */ border-radius: 0; /* 清除 iOS 圆角 */ font: inherit; /* 继承字体样式 */ color: inherit; background-color: transparent; outline: none; /* 清除默认聚焦轮廓(需自行添加可访问性聚焦样式) */ } /* 特殊处理:单选/复选框、文件上传 */ input[type="checkbox"], input[type="radio"] { width: auto; /* 避免被父级宽度压缩 */ } textarea { resize: vertical; /* 仅允许垂直调整大小 */ } /* 6. 媒体元素标准化 */ img, video, iframe { max-width: 100%; /* 防止溢出容器 */ height: auto; /* 保持宽高比 */ border-style: none; /* 清除 IE 默认边框 */ } /* 7. 标题层级标准化(避免浏览器默认大小差异) */ h1, h2, h3, h4, h5, h6 { font-size: 1em; /* 继承父级字体大小(可根据需求自定义层级) */ font-weight: 500; /* 统一字重(避免浏览器默认过粗) */ } /* 8. 段落与行高优化 */ p { line-height: 1.5; /* 更舒适的阅读行高 */ } /* 9. 引用与代码块标准化 */ blockquote { margin: 1em 0; /* 保留合理边距 */ padding-left: 1em; border-left: 4px solid #eee; /* 左侧装饰线 */ } code, kbd, pre, samp { font-family: monospace, monospace; /* 统一等宽字体 */ font-size: 1em; /* 避免浏览器默认放大 */ } /* 10. 表格边框合并(避免双边框) */ table { border-collapse: collapse; border-spacing: 0; } /* 11. 隐藏滚动条(可选,根据设计需求) */ ::-webkit-scrollbar { display: none; } html { -ms-overflow-style: none; /* IE/Edge */ scrollbar-width: none; /* Firefox */ } /* 12. 可访问性增强:保留聚焦状态 */ :focus-visible { outline: 2px solid #4a90e2; /* 自定义聚焦轮廓 */ outline-offset: 2px; } .arco-icon { font-size: 32; } /* ============================== 自定义字体使用示例 ============================== */ /* 全局字体设置 - 可以设置为默认字体 */ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; }