steven
4d30803b60
Add static site, shared layout, and Node dev server with standard .gitignore. Co-authored-by: Cursor <cursoragent@cursor.com>
253 lines
7.0 KiB
CSS
253 lines
7.0 KiB
CSS
/* ============================================
|
|
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头部预加载关键字体：
|
|
<link rel="preload" href="font/Inter/Inter-Regular-9.otf" as="font" type="font/otf" crossorigin>
|
|
|
|
2. 对于可变字体，可以只加载 Inter-var-2.ttf 文件，
|
|
它包含了所有字重，文件大小可能比多个静态字体文件更小
|
|
|
|
3. 如果不需要所有字重，可以只引入需要的字体变体
|
|
*/ |