/* ══════ 核心控制台面板 ══════ */ .control-card { background: rgba(15, 23, 42, 0.85); border: 1px solid rgba(56, 189, 248, 0.25); backdrop-filter: blur(16px); border-radius: 12px; padding: 20px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); margin-bottom: 20px; } .input-row { display: flex; flex-direction: column; gap: 12px; } @media (min-width: 768px) { .input-row { flex-direction: row; align-items: center; } } .input-wrapper { flex: 1; position: relative; } .geek-input { width: 100%; height: 48px; background: #090f1d !important; border: 1px solid rgba(51, 65, 85, 0.8); border-radius: 10px; padding: 0 18px; color: #38bdf8 !important; font-family: 'JetBrains Mono', Consolas, monospace; font-size: 17px; font-weight: 600; outline: none; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4); box-sizing: border-box; } .geek-input:focus { border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18), inset 0 2px 4px rgba(0, 0, 0, 0.4); } .geek-input::placeholder { color: #475569; font-weight: 400; font-size: 14px; } /* 快捷标签 */ .pills-container { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .pill-btn { font-family: 'JetBrains Mono', Consolas, monospace; font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 999px; background: rgba(15, 23, 42, 0.9); border: 1px solid rgba(51, 65, 85, 0.7); color: #94a3b8; cursor: pointer; transition: all 0.15s ease; } .pill-btn:hover { border-color: #38bdf8; color: #38bdf8; background: rgba(56, 189, 248, 0.08); transform: translateY(-1px); } .pill-btn.active { border-color: #38bdf8; color: #0f172a; background: #38bdf8; box-shadow: 0 0 12px rgba(56, 189, 248, 0.4); } /* 选项工具条 */ .toolbar-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(51, 65, 85, 0.5); } .mode-toggle-group { display: flex; background: #090f1d; padding: 3px; border-radius: 8px; border: 1px solid rgba(51, 65, 85, 0.8); } .mode-btn { padding: 7px 16px; font-size: 13px; font-weight: 600; border-radius: 6px; color: #94a3b8; border: none; background: transparent; cursor: pointer; transition: all 0.15s ease; display: flex; align-items: center; gap: 6px; } .mode-btn.active { background: #0284c7; color: #ffffff; box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35); } .select-group { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .select-item { display: flex; align-items: center; gap: 8px; } .select-label { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #64748b; } .geek-select { background: #090f1d !important; border: 1px solid rgba(51, 65, 85, 0.8) !important; color: #e2e8f0 !important; font-size: 12px; font-family: 'JetBrains Mono', monospace; border-radius: 6px; padding: 6px 12px; outline: none; cursor: pointer; transition: border-color 0.2s; } .geek-select:focus { border-color: #38bdf8 !important; } .geek-select option { background: #0f172a; color: #e2e8f0; } /* ══════ 终端展示屏幕 ══════ */ .terminal-window { background: #070b14; border: 1px solid rgba(56, 189, 248, 0.25); border-radius: 12px; overflow: hidden; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.08); margin-bottom: 24px; } .terminal-topbar { background: #0f172a; padding: 10px 16px; border-bottom: 1px solid rgba(51, 65, 85, 0.7); display: flex; align-items: center; justify-content: space-between; } .mac-dots { display: flex; align-items: center; gap: 6px; } .mac-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; } .mac-dot-red { background: #ef4444; } .mac-dot-yellow { background: #f59e0b; } .mac-dot-green { background: #10b981; } .terminal-meta { font-family: 'JetBrains Mono', Consolas, monospace; font-size: 12px; color: #94a3b8; } .terminal-meta span { color: #38bdf8; font-weight: 700; } .theme-swatches { display: flex; align-items: center; gap: 8px; } .swatch-btn { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: all 0.2s; } .swatch-btn:hover { transform: scale(1.2); } .swatch-btn.active { border-color: #ffffff; box-shadow: 0 0 8px currentColor; } .terminal-body { padding: 24px 20px; min-height: 200px; max-height: 520px; overflow: auto; font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.15; white-space: pre; user-select: all; transition: color 0.2s, text-shadow 0.2s; } /* 终端色彩主题 */ .terminal-body.theme-cyan { color: #00f0ff; text-shadow: 0 0 12px rgba(0, 240, 255, 0.45); } .terminal-body.theme-matrix { color: #10b981; text-shadow: 0 0 12px rgba(16, 185, 129, 0.45); } .terminal-body.theme-amber { color: #f59e0b; text-shadow: 0 0 12px rgba(245, 158, 11, 0.45); } .terminal-body.theme-purple { color: #ec4899; text-shadow: 0 0 12px rgba(236, 72, 153, 0.45); } .terminal-body.theme-white { color: #f8fafc; text-shadow: none; } /* ══════ 工作台操作按钮组 ══════ */ .action-card { background: rgba(15, 23, 42, 0.75); border: 1px solid rgba(51, 65, 85, 0.7); border-radius: 12px; padding: 18px 20px; } .btn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; } .action-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px; font-size: 12px; font-weight: 600; border-radius: 8px; border: 1px solid rgba(51, 65, 85, 0.8); background: #0f172a; color: #e2e8f0; cursor: pointer; transition: all 0.15s ease; } .action-btn:hover { transform: translateY(-1px); } .action-btn-primary { background: #0284c7; border-color: #38bdf8; color: #ffffff; box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35); } .action-btn-primary:hover { background: #0369a1; } .action-btn-success { background: #059669; border-color: #34d399; color: #ffffff; } .action-btn-success:hover { background: #047857; } .action-btn-purple { background: #7c3aed; border-color: #c084fc; color: #ffffff; } .action-btn-purple:hover { background: #6d28d9; } /* ══════ 字体选择抽屉/列表 ══════ */ .font-panel { background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(51, 65, 85, 0.7); border-radius: 12px; padding: 16px; margin-top: 24px; } .font-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .font-search-input { width: 200px; height: 32px; background: #090f1d !important; border: 1px solid rgba(51, 65, 85, 0.8); border-radius: 6px; padding: 0 10px; color: #f1f5f9 !important; font-size: 12px; outline: none; box-sizing: border-box; } .font-search-input:focus { border-color: #38bdf8; } .font-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; max-height: 240px; overflow-y: auto; padding-right: 4px; } .font-item-btn { text-align: left; padding: 8px 10px; border-radius: 6px; border: 1px solid rgba(51, 65, 85, 0.5); background: #090f1d; color: #94a3b8; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: space-between; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .font-item-btn:hover { border-color: #38bdf8; color: #e2e8f0; background: #0f172a; } .font-item-btn.active { background: rgba(56, 189, 248, 0.15); border-color: #38bdf8; color: #38bdf8; font-weight: 700; } /* ══════ 画廊模式卡片流 ══════ */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; } .gallery-card { background: #070b14; border: 1px solid rgba(51, 65, 85, 0.6); border-radius: 10px; padding: 14px 16px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; justify-content: space-between; } .gallery-card:hover { border-color: #38bdf8; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 15px rgba(56, 189, 248, 0.12); } .gallery-card-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px dashed rgba(51, 65, 85, 0.5); } .gallery-card-title { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: #f1f5f9; } .gallery-card-preview { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 10px; line-height: 1.1; white-space: pre; overflow-x: auto; color: #38bdf8; padding: 8px 0; min-height: 60px; } .gallery-card-actions { display: flex; align-items: center; gap: 8px; } .mini-btn { padding: 3px 8px; font-size: 11px; font-weight: 600; border-radius: 4px; border: 1px solid rgba(51, 65, 85, 0.8); background: #0f172a; color: #cbd5e1; cursor: pointer; transition: all 0.15s; } .mini-btn:hover { border-color: #38bdf8; color: #38bdf8; } .mini-btn-primary { background: rgba(2, 132, 199, 0.2); border-color: rgba(56, 189, 248, 0.4); color: #38bdf8; } .mini-btn-primary:hover { background: #0284c7; color: #ffffff; }

ASCII 艺术字与字符 Logo 生成器

极客风格的字符 Logo 与 ASCII 艺术字生成器，内置 50+ 款经典终端 FIGlet 字体，支持多风格画廊对比、代码注释包装、终端框线美化、PNG图片与SVG矢量导出。

灵感标签:

切换当前字体 (共 {{ allFonts.length }} 款)

正在实时渲染全部 {{ galleryItems.length }} 种字体风格：点击任意卡片即可直接复制或载入 Studio 细调

介绍

ASCII Art（字符艺术）是一种利用可打印字符组合成图形或艺术字的表达方式。本工具内置 50+ 款经典 FIGlet 极客字体，支持实时渲染、单行/多行代码注释包装、终端边框美化以及 SVG / PNG 高清无损导出，适合用于代码注释 Banner、终端 CLI 启动界面及技术博客封面设计。