Spaces:
Sleeping
Sleeping
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>字体样式测试 - SarcoMonitor</title> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&family=VT323&family=Courier+Prime&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| background-color: #E4F4F4; | |
| padding: 20px; | |
| } | |
| .font-demo { | |
| background: white; | |
| padding: 20px; | |
| margin: 15px 0; | |
| border-radius: 10px; | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.1); | |
| } | |
| .font-name { | |
| font-size: 14px; | |
| color: #666; | |
| margin-bottom: 10px; | |
| font-family: Arial, sans-serif; | |
| } | |
| .demo-text { | |
| font-size: 24px; | |
| margin-bottom: 10px; | |
| color: #333; | |
| } | |
| .demo-small { | |
| font-size: 16px; | |
| color: #666; | |
| } | |
| /* 像素字体样式 */ | |
| .pixel-1 { | |
| font-family: 'Press Start 2P', cursive; | |
| text-shadow: 2px 2px 0px #333; | |
| } | |
| .pixel-2 { | |
| font-family: 'VT323', monospace; | |
| font-size: 28px ; | |
| text-shadow: 1px 1px 0px #333; | |
| } | |
| .pixel-3 { | |
| font-family: 'Courier New', 'Monaco', monospace; | |
| font-weight: bold; | |
| text-shadow: | |
| 1px 0px 0px #333, | |
| 0px 1px 0px #333, | |
| -1px 0px 0px #333, | |
| 0px -1px 0px #333; | |
| letter-spacing: 2px; | |
| } | |
| .pixel-4 { | |
| font-family: 'Share Tech Mono', monospace; | |
| font-weight: bold; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.3); | |
| letter-spacing: 1px; | |
| } | |
| .pixel-5 { | |
| font-family: 'Courier Prime', monospace; | |
| font-weight: bold; | |
| text-shadow: | |
| 1px 1px 0px #333, | |
| 2px 2px 0px #666; | |
| letter-spacing: 1px; | |
| } | |
| /* 科技感字体 */ | |
| .tech-1 { | |
| font-family: 'Orbitron', sans-serif; | |
| font-weight: 700; | |
| text-shadow: 0 0 10px rgba(0,123,255,0.5); | |
| letter-spacing: 2px; | |
| } | |
| .tech-2 { | |
| font-family: 'Orbitron', sans-serif; | |
| font-weight: 900; | |
| text-transform: uppercase; | |
| letter-spacing: 3px; | |
| } | |
| /* 复古像素效果 */ | |
| .retro-1 { | |
| font-family: 'Courier New', monospace; | |
| font-weight: bold; | |
| background: linear-gradient(45deg, #ff6b6b, #4ecdc4); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| text-shadow: 2px 2px 0px #333; | |
| } | |
| .retro-2 { | |
| font-family: 'VT323', monospace; | |
| font-size: 32px ; | |
| color: #00ff00; | |
| text-shadow: | |
| 0 0 5px #00ff00, | |
| 0 0 10px #00ff00, | |
| 0 0 15px #00ff00; | |
| } | |
| /* 8位游戏风格 */ | |
| .game-1 { | |
| font-family: 'Press Start 2P', cursive; | |
| font-size: 18px ; | |
| color: #fff; | |
| background: #333; | |
| padding: 10px; | |
| border-radius: 5px; | |
| text-shadow: none; | |
| } | |
| .game-2 { | |
| font-family: 'VT323', monospace; | |
| font-size: 30px ; | |
| color: #ffff00; | |
| text-shadow: | |
| 2px 0 0 #ff0000, | |
| -2px 0 0 #0000ff; | |
| } | |
| /* 医疗主题像素字体 */ | |
| .medical-1 { | |
| font-family: 'Courier New', monospace; | |
| font-weight: bold; | |
| color: #28a745; | |
| text-shadow: | |
| 1px 1px 0px #1e7e34, | |
| 2px 2px 0px #155724; | |
| letter-spacing: 1px; | |
| } | |
| .medical-2 { | |
| font-family: 'Share Tech Mono', monospace; | |
| font-weight: bold; | |
| color: #17a2b8; | |
| text-shadow: | |
| 0 0 5px rgba(23, 162, 184, 0.5), | |
| 1px 1px 0px #138496; | |
| letter-spacing: 1px; | |
| } | |
| /* 导航栏预览 */ | |
| .navbar-preview { | |
| background-color: #E4F4F4; | |
| padding: 15px 20px; | |
| border-radius: 8px; | |
| margin: 10px 0; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .logo-preview { | |
| width: 40px; | |
| height: 40px; | |
| background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23CAF0F8"/><text x="50" y="55" text-anchor="middle" font-size="60" fill="%23333">🤝</text></svg>'); | |
| background-size: contain; | |
| margin-right: 15px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1 class="text-center mb-5" style="color: #28a745;">SarcoMonitor 字体样式测试</h1> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <h2 class="mb-4">像素字体风格</h2> | |
| <div class="font-demo"> | |
| <div class="font-name">Press Start 2P (经典8位游戏字体)</div> | |
| <div class="demo-text pixel-1">SarcoMonitor</div> | |
| <div class="demo-small pixel-1">智能肌少症识别系统</div> | |
| <div class="navbar-preview"> | |
| <div class="logo-preview"></div> | |
| <span class="pixel-1" style="font-size: 20px;">SarcoMonitor</span> | |
| </div> | |
| </div> | |
| <div class="font-demo"> | |
| <div class="font-name">VT323 (复古终端字体)</div> | |
| <div class="demo-text pixel-2">SarcoMonitor</div> | |
| <div class="demo-small pixel-2">智能肌少症识别系统</div> | |
| <div class="navbar-preview"> | |
| <div class="logo-preview"></div> | |
| <span class="pixel-2" style="font-size: 24px;">SarcoMonitor</span> | |
| </div> | |
| </div> | |
| <div class="font-demo"> | |
| <div class="font-name">Courier New + 像素效果 (自定义像素风格)</div> | |
| <div class="demo-text pixel-3">SarcoMonitor</div> | |
| <div class="demo-small pixel-3">智能肌少症识别系统</div> | |
| <div class="navbar-preview"> | |
| <div class="logo-preview"></div> | |
| <span class="pixel-3" style="font-size: 20px;">SarcoMonitor</span> | |
| </div> | |
| </div> | |
| <div class="font-demo"> | |
| <div class="font-name">Share Tech Mono (科技像素风格)</div> | |
| <div class="demo-text pixel-4">SarcoMonitor</div> | |
| <div class="demo-small pixel-4">智能肌少症识别系统</div> | |
| <div class="navbar-preview"> | |
| <div class="logo-preview"></div> | |
| <span class="pixel-4" style="font-size: 20px;">SarcoMonitor</span> | |
| </div> | |
| </div> | |
| <div class="font-demo"> | |
| <div class="font-name">Courier Prime (现代像素风格)</div> | |
| <div class="demo-text pixel-5">SarcoMonitor</div> | |
| <div class="demo-small pixel-5">智能肌少症识别系统</div> | |
| <div class="navbar-preview"> | |
| <div class="logo-preview"></div> | |
| <span class="pixel-5" style="font-size: 20px;">SarcoMonitor</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row mt-5"> | |
| <div class="col-12"> | |
| <h2 class="mb-4">科技感字体</h2> | |
| <div class="font-demo"> | |
| <div class="font-name">Orbitron Bold (未来科技感)</div> | |
| <div class="demo-text tech-1">SarcoMonitor</div> | |
| <div class="demo-small tech-1">智能肌少症识别系统</div> | |
| <div class="navbar-preview"> | |
| <div class="logo-preview"></div> | |
| <span class="tech-1" style="font-size: 20px;">SarcoMonitor</span> | |
| </div> | |
| </div> | |
| <div class="font-demo"> | |
| <div class="font-name">Orbitron Black (重型科技感)</div> | |
| <div class="demo-text tech-2">SarcoMonitor</div> | |
| <div class="demo-small tech-2">智能肌少症识别系统</div> | |
| <div class="navbar-preview"> | |
| <div class="logo-preview"></div> | |
| <span class="tech-2" style="font-size: 20px;">SarcoMonitor</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row mt-5"> | |
| <div class="col-12"> | |
| <h2 class="mb-4">特殊效果像素字体</h2> | |
| <div class="font-demo"> | |
| <div class="font-name">渐变像素效果</div> | |
| <div class="demo-text retro-1">SarcoMonitor</div> | |
| <div class="demo-small retro-1">智能肌少症识别系统</div> | |
| </div> | |
| <div class="font-demo" style="background: #000;"> | |
| <div class="font-name" style="color: #fff;">绿色发光像素效果</div> | |
| <div class="demo-text retro-2">SarcoMonitor</div> | |
| <div class="demo-small retro-2">智能肌少症识别系统</div> | |
| </div> | |
| <div class="font-demo"> | |
| <div class="font-name">8位游戏风格 (深色背景)</div> | |
| <div class="demo-text game-1">SarcoMonitor</div> | |
| <div class="demo-small game-1">智能肌少症识别系统</div> | |
| </div> | |
| <div class="font-demo"> | |
| <div class="font-name">3D像素效果</div> | |
| <div class="demo-text game-2">SarcoMonitor</div> | |
| <div class="demo-small game-2">智能肌少症识别系统</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row mt-5"> | |
| <div class="col-12"> | |
| <h2 class="mb-4">医疗主题像素字体</h2> | |
| <div class="font-demo"> | |
| <div class="font-name">医疗绿色像素字体</div> | |
| <div class="demo-text medical-1">SarcoMonitor</div> | |
| <div class="demo-small medical-1">智能肌少症识别系统</div> | |
| <div class="navbar-preview"> | |
| <div class="logo-preview"></div> | |
| <span class="medical-1" style="font-size: 20px;">SarcoMonitor</span> | |
| </div> | |
| </div> | |
| <div class="font-demo"> | |
| <div class="font-name">医疗蓝色像素字体</div> | |
| <div class="demo-text medical-2">SarcoMonitor</div> | |
| <div class="demo-small medical-2">智能肌少症识别系统</div> | |
| <div class="navbar-preview"> | |
| <div class="logo-preview"></div> | |
| <span class="medical-2" style="font-size: 20px;">SarcoMonitor</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row mt-5"> | |
| <div class="col-12"> | |
| <div class="alert alert-info"> | |
| <h5>使用说明：</h5> | |
| <ul> | |
| <li>每个字体样式都包含了导航栏预览效果</li> | |
| <li>像素字体特别适合与您的握手图标搭配</li> | |
| <li>医疗主题字体与系统的健康主题呼应</li> | |
| <li>选择您喜欢的样式，我可以将其应用到实际系统中</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |