更多操作
小 |
小 |
||
第1行: | 第1行: | ||
/* | /* ===== 字体定义 ===== */ | ||
@font-face { | @font-face { | ||
font-family: 'LXGWWenKaiLite'; | font-family: 'LXGWWenKaiLite'; | ||
src: url('https://www.guohao.asia/cdn/font/lxgw-wenkai-lite/LXGWWenKaiLite-Light.ttf') format('truetype'); | src: url('https://www.guohao.asia/cdn/font/lxgw-wenkai-lite/LXGWWenKaiLite-Light.woff2') format('woff2'), | ||
font-weight: 300; | url('https://www.guohao.asia/cdn/font/lxgw-wenkai-lite/LXGWWenKaiLite-Light.ttf') format('truetype'); | ||
font-weight: 300; | |||
font-style: normal; | font-style: normal; | ||
font-display: swap; | |||
crossOrigin: anonymous; /* 需要服务器配置CORS */ | |||
} | } | ||
@font-face { | /* 其他字重定义(结构相同,路径不同) */ | ||
@font-face { /* Medium */ } | |||
@font-face { /* Regular */ } | |||
} | |||
@font-face { | |||
} | |||
/* 等宽字体定义 */ | |||
@font-face { | @font-face { | ||
font-family: 'LXGWWenKaiMonoLite'; | font-family: 'LXGWWenKaiMonoLite'; | ||
src: url('https://www.guohao.asia/cdn/font/lxgw-wenkai-lite/LXGWWenKaiMonoLite- | src: url('https://www.guohao.asia/cdn/font/lxgw-wenkai-lite/LXGWWenKaiMonoLite-Regular.woff2') format('woff2'), | ||
font-weight: | url('https://www.guohao.asia/cdn/font/lxgw-wenkai-lite/LXGWWenKaiMonoLite-Regular.ttf') format('truetype'); | ||
font-weight: 400; | |||
font-style: normal; | font-style: normal; | ||
font-display: swap; | |||
} | } | ||
/* ===== 全局样式 ===== */ | |||
font- | :root { | ||
--font-primary: 'LXGWWenKaiLite', system-ui, -apple-system, sans-serif; | |||
--font-code: 'LXGWWenKaiMonoLite', 'Courier New', monospace; | |||
--img-desktop-width: min(80%, 1200px); /* 桌面端限制 */ | |||
} | } | ||
body { | body { | ||
font-family: | font-family: var(--font-primary); | ||
line-height: 1.6; | |||
} | } | ||
#content h1, | #content h1, #content h2 { | ||
#content h2 { | font-family: var(--font-primary); | ||
font-family: | font-weight: 500; /* 明确使用Medium字重 */ | ||
} | } | ||
code, pre, tt { | code, pre, tt { | ||
font-family: | font-family: var(--font-code); | ||
line-height: 1.5; | |||
padding: 0.2em 0.4em; | |||
background: #f8f9fa; | |||
border-radius: 3px; | |||
} | } | ||
/* | /* ===== 图片响应式系统 ===== */ | ||
img[src*="www.guohao.asia"] { | img[src*="www.guohao.asia"] { | ||
height: auto; | height: auto; | ||
max-width: 100%; | display: block; | ||
margin: 0 auto; | |||
transition: width 0.3s ease; /* 平滑过渡效果 */ | |||
/* 移动端默认样式 */ | |||
width: 100%; | |||
max-width: 100%; | |||
} | } | ||
/* | /* JS控制的类 */ | ||
.img-auto { | |||
img | width: auto !important; | ||
max-width: none !important; | |||
} | |||
.img-responsive { | |||
width: var(--img-desktop-width) !important; | |||
} | } | ||
@media | /* ===== 媒体查询 ===== */ | ||
@media (max-width: 600px) { | |||
.ev-video { | .ev-video { | ||
width: 100%; | width: 100%; | ||
height: auto; | height: auto; | ||
} | |||
/* 移动端覆盖规则 */ | |||
.img-responsive { | |||
width: 100% !important; | |||
} | } | ||
} | } |
2025年4月10日 (四) 08:55的版本
/* ===== 字体定义 ===== */
@font-face {
font-family: 'LXGWWenKaiLite';
src: url('https://www.guohao.asia/cdn/font/lxgw-wenkai-lite/LXGWWenKaiLite-Light.woff2') format('woff2'),
url('https://www.guohao.asia/cdn/font/lxgw-wenkai-lite/LXGWWenKaiLite-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
crossOrigin: anonymous; /* 需要服务器配置CORS */
}
/* 其他字重定义(结构相同,路径不同) */
@font-face { /* Medium */ }
@font-face { /* Regular */ }
/* 等宽字体定义 */
@font-face {
font-family: 'LXGWWenKaiMonoLite';
src: url('https://www.guohao.asia/cdn/font/lxgw-wenkai-lite/LXGWWenKaiMonoLite-Regular.woff2') format('woff2'),
url('https://www.guohao.asia/cdn/font/lxgw-wenkai-lite/LXGWWenKaiMonoLite-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* ===== 全局样式 ===== */
:root {
--font-primary: 'LXGWWenKaiLite', system-ui, -apple-system, sans-serif;
--font-code: 'LXGWWenKaiMonoLite', 'Courier New', monospace;
--img-desktop-width: min(80%, 1200px); /* 桌面端限制 */
}
body {
font-family: var(--font-primary);
line-height: 1.6;
}
#content h1, #content h2 {
font-family: var(--font-primary);
font-weight: 500; /* 明确使用Medium字重 */
}
code, pre, tt {
font-family: var(--font-code);
line-height: 1.5;
padding: 0.2em 0.4em;
background: #f8f9fa;
border-radius: 3px;
}
/* ===== 图片响应式系统 ===== */
img[src*="www.guohao.asia"] {
height: auto;
display: block;
margin: 0 auto;
transition: width 0.3s ease; /* 平滑过渡效果 */
/* 移动端默认样式 */
width: 100%;
max-width: 100%;
}
/* JS控制的类 */
.img-auto {
width: auto !important;
max-width: none !important;
}
.img-responsive {
width: var(--img-desktop-width) !important;
}
/* ===== 媒体查询 ===== */
@media (max-width: 600px) {
.ev-video {
width: 100%;
height: auto;
}
/* 移动端覆盖规则 */
.img-responsive {
width: 100% !important;
}
}