src/assets/css/font-optimization.css
/* 字体优化 - 解决字体模糊问题 */

/* 全局字体渲染优化 */
html {
  /* 启用字体平滑 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* 改善文本渲染质量 */
  text-rendering: optimizeLegibility;

  /* 防止字体缩放导致的模糊 */
  font-synthesis: none;

  /* 强制硬件加速渲染 */
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000;
}

/* 针对主要内容区域的字体优化 */
body {
  /* 基础字体设置 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

  /* 字体渲染优化 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* 防止文本选择时的模糊 */
  -webkit-text-stroke: 0.01em transparent;

  /* 改善亚像素渲染 */
  font-feature-settings: "liga", "kern";
  font-variant-ligatures: common-ligatures;
}

/* 特定于列表和表格的字体优化 */
.instances-list,
.downloads-tab,
.logs-tab,
.settings-tab,
table,
.table {
  /* 强制使用系统默认字体 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* 字体渲染优化 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* 防止transform导致的字体模糊 */
  transform: translateZ(0);
  will-change: auto;
}

/* 按钮文字优化 */
.btn,
button {
  /* 字体渲染优化 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* 防止按钮动画导致字体模糊 */
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* 输入框文字优化 */
input,
textarea,
select,
.input,
.textarea,
.select {
  /* 字体渲染优化 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* 确保输入时字体清晰 */
  transform: translateZ(0);
}

/* 卡片内容字体优化 */
.card,
.instance-card,
.stat-card,
.section {
  /* 字体渲染优化 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 标题字体优化 */
h1,
h2,
h3,
h4,
h5,
h6,
.title,
.card-title,
.section-title {
  /* 字体渲染优化 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* 标题字体加粗时的优化 */
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* 代码和终端字体优化 */
.font-mono,
.terminal-content,
.log-content,
code,
pre {
  /* 使用更清晰的等宽字体 */
  font-family: "Fira Code", "SF Mono", Monaco, "Cascadia Code", "Roboto Mono",
    Consolas, "Courier New", monospace;

  /* 字体渲染优化 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* 等宽字体特殊优化 */
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0;
}

/* 修复动画过程中的字体模糊 */
.transition-all,
.transition-transform,
.hover\:scale-\[1\.02\]:hover,
.hover\:-translate-y-1:hover,
.animate-spin,
.animate-pulse {
  /* 防止动画导致字体模糊 */
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
}

/* 修复缩放动画时的字体模糊 */
[class*="scale-"],
[class*="translate-"],
.transform {
  /* 强制硬件加速 */
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* 深色模式下的字体优化 */
[data-theme="dark"] {
  /* 深色模式下增强字体对比度 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* 深色背景下的文字优化 */
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
}

/* 小字体的特殊优化 */
.text-xs,
.text-sm,
.badge,
.btn-xs,
.btn-sm {
  /* 小字体的渲染优化 */
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  font-weight: 500;
}

/* 高DPI屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body {
    /* 高DPI屏幕下的字体优化 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* 修复模糊文本的通用类 */
.font-clear {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
}

/* 修复表格中的字体模糊 */
table td,
table th,
.table td,
.table th {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 修复下拉菜单中的字体模糊 */
.dropdown-content,
.menu li a,
.select option {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transform: translateZ(0);
}
