/* ============================================ Inter font family - CSS font definition file ============================================ */ /** * Font description: * All font files are stored in font/Inter directory * * Font weight mapping: * 100 - Thin * 200 - ExtraLight * 300 - Light * 400 - Regular (Normal) * 500 - Medium * 600 - SemiBold * 700 - Bold * 800 - ExtraBold * 900 - Black */ /* -------------------------------------------------- 1. Define Inter static fonts -------------------------------------------------- */ /* Thin (weight: 100) */ @font-face { font-family: 'Inter'; src: url('./font/Inter/Inter-Thin-11.otf') format('opentype'); font-weight: 100; font-style: normal; font-display: swap; font-stretch: normal; } /* ExtraLight (weight: 200) */ @font-face { font-family: 'Inter'; src: url('./font/Inter/Inter-ExtraLight-6.otf') format('opentype'); font-weight: 200; font-style: normal; font-display: swap; font-stretch: normal; } /* Light (weight: 300) */ @font-face { font-family: 'Inter'; src: url('./font/Inter/Inter-Light-7.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; font-stretch: normal; } /* Regular (weight: 400) - default weight */ @font-face { font-family: 'Inter'; src: url('./font/Inter/Inter-Regular-9.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; font-stretch: normal; } /* Medium (weight: 500) */ @font-face { font-family: 'Inter'; src: url('./font/Inter/Inter-Medium-8.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; font-stretch: normal; } /* SemiBold (weight: 600) */ @font-face { font-family: 'Inter'; src: url('./font/Inter/Inter-SemiBold-10.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; font-stretch: normal; } /* Bold (weight: 700) */ @font-face { font-family: 'Inter'; src: url('./font/Inter/Inter-Bold-4.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; font-stretch: normal; } /* ExtraBold (weight: 800) */ @font-face { font-family: 'Inter'; src: url('./font/Inter/Inter-ExtraBold-5.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; font-stretch: normal; } /* Black (weight: 900) */ @font-face { font-family: 'Inter'; src: url('./font/Inter/Inter-Black-3.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; font-stretch: normal; } /* -------------------------------------------------- 2. Define Inter variable font (Variable Font) -------------------------------------------------- */ @font-face { font-family: 'Inter Variable'; src: url('./font/Inter/Inter-var-2.ttf') format('truetype'); font-weight: 100 900; /* Variable weight range */ font-style: normal; font-display: swap; font-stretch: 75% 100%; /* Variable width range */ font-variation-settings: 'wght' 400; /* Default weight */ } /* -------------------------------------------------- 3. Define italic fonts (if needed, can be added based on actual files) -------------------------------------------------- */ /* @font-face { font-family: 'Inter'; src: url('../font/Inter/Inter-Italic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; } */ /* -------------------------------------------------- 4. 实用工具类和全局样式 -------------------------------------------------- */ /* Inter 字体族类 */ .font-inter { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } .font-inter-variable { font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* 字重实用类 */ .font-weight-thin { font-weight: 100 !important; } .font-weight-extralight { font-weight: 200 !important; } .font-weight-light { font-weight: 300 !important; } .font-weight-normal { font-weight: 400 !important; } .font-weight-medium { font-weight: 500 !important; } .font-weight-semibold { font-weight: 600 !important; } .font-weight-bold { font-weight: 700 !important; } .font-weight-extrabold { font-weight: 800 !important; } .font-weight-black { font-weight: 900 !important; } /* 字体平滑处理 */ .font-smooth { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* 可变字体工具类 */ .font-variable-wght { font-family: 'Inter Variable', sans-serif; font-variation-settings: 'wght' var(--font-weight, 400); } /* -------------------------------------------------- 5. 响应式字体设置示例 -------------------------------------------------- */ /* 基础字体设置 */ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; font-weight: 300; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 标题字重示例 */ h1, .h1 { font-weight: 900; } /* Black */ h2, .h2 { font-weight: 800; } /* ExtraBold */ h3, .h3 { font-weight: 700; } /* Bold */ h4, .h4 { font-weight: 600; } /* SemiBold */ h5, .h5 { font-weight: 500; } /* Medium */ h6, .h6 { font-weight: 400; } /* Regular */ /* 小屏幕标题调整 */ @media (max-width: 768px) { h1, .h1 { font-weight: 800; } h2, .h2 { font-weight: 700; } h3, .h3 { font-weight: 600; } } /* -------------------------------------------------- 6. 变量字体动画示例(可选) -------------------------------------------------- */ .variable-font-animation { font-family: 'Inter Variable', sans-serif; transition: font-variation-settings 0.3s ease; } .variable-font-animation:hover { font-variation-settings: 'wght' 700; } /* -------------------------------------------------- 7. 打印样式优化 -------------------------------------------------- */ @media print { .font-inter, .font-inter-variable, body { font-family: 'Inter', 'Times New Roman', serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* -------------------------------------------------- 8. 高对比度模式支持 -------------------------------------------------- */ @media (prefers-contrast: high) { body { font-weight: 500; /* 中等字重,提高可读性 */ } } /* -------------------------------------------------- 9. 性能优化提示 -------------------------------------------------- */ /* 使用建议: 1. 在HTML头部预加载关键字体: 2. 对于可变字体,可以只加载 Inter-var-2.ttf 文件, 它包含了所有字重,文件大小可能比多个静态字体文件更小 3. 如果不需要所有字重,可以只引入需要的字体变体 */