first commit
This commit is contained in:
闫旭隆
332
AIEC-server/css/font-optimization.css
Normal file
332
AIEC-server/css/font-optimization.css
Normal file
@ -0,0 +1,332 @@
|
||||
/* ===== 字体和行距优化 - Windows优先，兼容macOS/iOS ===== */
|
||||
|
||||
/* 1. 字体栈优化 - Windows优先 */
|
||||
:root {
|
||||
/* Windows优先的字体栈 */
|
||||
--font-stack-sans: "Segoe UI", "Microsoft YaHei", "Noto Sans SC",
|
||||
"SF Pro Text", "PingFang SC", "Helvetica Neue",
|
||||
"Arial", sans-serif;
|
||||
|
||||
/* Emoji字体栈 */
|
||||
--font-stack-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
|
||||
|
||||
/* 代码字体栈 */
|
||||
--font-stack-mono: "Cascadia Code", "Consolas", "SF Mono", "Monaco",
|
||||
"Roboto Mono", "Courier New", monospace;
|
||||
}
|
||||
|
||||
/* 全局字体设置 */
|
||||
body {
|
||||
font-family: var(--font-stack-sans), var(--font-stack-emoji);
|
||||
font-size: 16px; /* 确保 ≥16px，避免iOS焦点放大 */
|
||||
line-height: 1.6; /* 无单位行高，跨浏览器一致 */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
/* 2. 行距优化 */
|
||||
|
||||
/* 聊天消息区域 */
|
||||
#chatMessages,
|
||||
.chat-messages,
|
||||
.message-content,
|
||||
.message-bubble {
|
||||
line-height: 1.6; /* 无单位行高 */
|
||||
font-size: 16px;
|
||||
font-variant-emoji: text; /* 避免emoji拉高行距 */
|
||||
}
|
||||
|
||||
/* 输入框 */
|
||||
#messageInput,
|
||||
#chatModeMessageInput,
|
||||
textarea {
|
||||
font-family: var(--font-stack-sans), var(--font-stack-emoji);
|
||||
font-size: 16px !important; /* 防止iOS缩放 */
|
||||
line-height: 1.5;
|
||||
font-variant-emoji: text;
|
||||
}
|
||||
|
||||
/* 3. 统一标题、段落、列表间距 */
|
||||
|
||||
/* 标题间距 - 更紧凑 */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0.3em 0 0.2em;
|
||||
line-height: 1.2;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 段落间距 - 更紧凑 */
|
||||
p {
|
||||
margin: 0.3em 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 列表间距 */
|
||||
ul, ol {
|
||||
margin: 0.35em 0 0.5em;
|
||||
padding-left: 1.25em;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 列表项间距 - 减小间距 */
|
||||
li {
|
||||
margin: 0.15em 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 列表项内的段落不需要额外间距 */
|
||||
li > p {
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 强制移除所有br标签 */
|
||||
.message-content br,
|
||||
.chat-messages br,
|
||||
#chatMessages br,
|
||||
li br {
|
||||
display: none !important; /* 完全隐藏所有br标签 */
|
||||
}
|
||||
|
||||
/* 嵌套列表调整 */
|
||||
li > ul,
|
||||
li > ol {
|
||||
margin: 0.2em 0 0.3em;
|
||||
}
|
||||
|
||||
/* 4. 聊天消息中的特定元素优化 */
|
||||
|
||||
/* AI和用户消息 */
|
||||
.ai-message,
|
||||
.user-message {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 消息内的标题 */
|
||||
.message-content h1,
|
||||
.message-content h2,
|
||||
.message-content h3,
|
||||
.message-content h4,
|
||||
.message-content h5,
|
||||
.message-content h6 {
|
||||
margin: 0.45em 0 0.3em;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* 消息内的段落 */
|
||||
.message-content p {
|
||||
margin: 0.45em 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 消息内的列表 - 优化间距 */
|
||||
.message-content ul,
|
||||
.message-content ol,
|
||||
#chatMessages ul,
|
||||
#chatMessages ol {
|
||||
margin: 0.25em 0 0.4em;
|
||||
padding-left: 1.25em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.message-content li,
|
||||
#chatMessages li {
|
||||
margin: 0.1em 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.message-content li > p,
|
||||
#chatMessages li > p {
|
||||
margin: 0;
|
||||
display: inline; /* 让p标签内联显示，避免换行 */
|
||||
}
|
||||
|
||||
/* 强制处理列表项之间的间距 */
|
||||
.message-content li + li,
|
||||
#chatMessages li + li {
|
||||
margin-top: 0.15em;
|
||||
}
|
||||
|
||||
/* 列表项内的强调文字 */
|
||||
.message-content li strong,
|
||||
#chatMessages li strong {
|
||||
font-weight: 600;
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
|
||||
/* 5. Safari/iOS特定修复 */
|
||||
@supports (-webkit-touch-callout: none) {
|
||||
/* Safari特定样式 */
|
||||
body {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
/* 修复Safari中的行距问题 */
|
||||
p, li, div {
|
||||
-webkit-margin-before: 0;
|
||||
-webkit-margin-after: 0;
|
||||
-webkit-margin-start: 0;
|
||||
-webkit-margin-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* iOS特定修复 */
|
||||
@supports (-webkit-overflow-scrolling: touch) {
|
||||
/* 防止iOS文本缩放 */
|
||||
body {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
/* 输入框最小字体16px */
|
||||
input, textarea, select {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
/* 修复iOS上的emoji显示 */
|
||||
.emoji {
|
||||
font-variant-emoji: emoji;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 6. 代码块样式 */
|
||||
pre, code {
|
||||
font-family: var(--font-stack-mono);
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 行内代码 */
|
||||
code {
|
||||
padding: 0.1em 0.3em;
|
||||
margin: 0 0.1em;
|
||||
}
|
||||
|
||||
/* 代码块 */
|
||||
pre {
|
||||
margin: 0.5em 0;
|
||||
padding: 1em;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
pre code {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 7. 中文优化 */
|
||||
:lang(zh),
|
||||
:lang(zh-CN),
|
||||
:lang(zh-TW),
|
||||
:lang(zh-HK) {
|
||||
font-family: "Segoe UI", "Microsoft YaHei", "Noto Sans SC",
|
||||
"PingFang SC", "Hiragino Sans GB",
|
||||
"Helvetica Neue", "Arial", sans-serif;
|
||||
line-height: 1.7; /* 中文稍微增加行高 */
|
||||
}
|
||||
|
||||
/* 8. 按钮和UI元素 */
|
||||
button, .button, .btn {
|
||||
font-family: var(--font-stack-sans);
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 9. 响应式字体大小 */
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
font-size: 15px; /* 移动端稍小但仍≥15px */
|
||||
}
|
||||
|
||||
#chatMessages,
|
||||
.message-content {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 10. 消除多余的间距 */
|
||||
|
||||
/* 第一个和最后一个元素不需要额外间距 */
|
||||
.message-content > *:first-child,
|
||||
#chatMessages > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.message-content > *:last-child,
|
||||
#chatMessages > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 处理Markdown渲染可能产生的多余空白 */
|
||||
.message-content p:empty,
|
||||
#chatMessages p:empty {
|
||||
display: none; /* 隐藏空段落 */
|
||||
}
|
||||
|
||||
/* br标签已在前面全部隐藏，这里不需要了 */
|
||||
|
||||
/* 连续段落间距优化 */
|
||||
p + p {
|
||||
margin-top: 0.3em;
|
||||
}
|
||||
|
||||
/* 标题后的段落间距 */
|
||||
h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
|
||||
margin-top: 0.3em;
|
||||
}
|
||||
|
||||
/* 11. 引用块样式 */
|
||||
blockquote {
|
||||
margin: 0.5em 0;
|
||||
padding-left: 1em;
|
||||
border-left: 3px solid #ddd;
|
||||
}
|
||||
|
||||
blockquote p {
|
||||
margin: 0.3em 0;
|
||||
}
|
||||
|
||||
/* 12. 表格样式 */
|
||||
table {
|
||||
margin: 0.5em 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 0.4em 0.8em;
|
||||
}
|
||||
|
||||
/* 13. 确保emoji不影响行高 */
|
||||
.emoji,
|
||||
[data-emoji] {
|
||||
font-variant-emoji: text;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* 14. 紧凑模式 - 进一步减小间距 */
|
||||
.message-content.compact,
|
||||
#chatMessages.compact {
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.message-content.compact li,
|
||||
#chatMessages.compact li {
|
||||
margin: 0.05em 0;
|
||||
}
|
||||
|
||||
/* 15. 强制覆盖可能的默认样式 */
|
||||
#chatMessages * {
|
||||
margin-block-start: initial;
|
||||
margin-block-end: initial;
|
||||
}
|
||||
|
||||
/* 16. 调试用 - 可临时启用查看间距 */
|
||||
/*
|
||||
* {
|
||||
outline: 1px solid rgba(255, 0, 0, 0.1);
|
||||
}
|
||||
*/
|
||||
Reference in New Issue
Block a user