Canvas文字模糊主因是DPR未对齐：需按devicePixelRatio缩放canvas.width/height并配ctx.scale()，禁用imageSmoothing，坐标取整且设置textBaseline/textAlign，否则fillText会落在半像素触发插值失真。
字体发虚不是模板写得差，而是渲染链路在高 DPR 设备上断了——window.devicePixelRatio 没对齐、字体声明没兜底、CSS 渲染开关互相冲突，三者缺一不可。
Canvas 图表文字模糊：width/height × dpr + ctx.scale() 必须成对出现
只改 canvas.style.width 不碰 canvas.width，等于白调。100px 宽的 canvas 在 2x 屏上若仍保持 width=100，物理像素只有 50，所有 fillText() 坐标都会落在半像素位置触发插值。
-
canvas.width和canvas.height必须设为Math.floor(rect.width * dpr)和Math.floor(rect.height * dpr)（rect = canvas.getBoundingClientRect()） - 紧接着执行
ctx.scale(dpr, dpr)，此后所有绘图坐标仍按 CSS 像素写，逻辑不变 -
fillText(text, Math.round(x), Math.round(y))，尤其居中时别用x / 2直接除，必须Math.round(x / 2) - 加
ctx.textBaseline = "middle"+ctx.textAlign = "center"，避免基线漂移；禁用ctx.imageSmoothingEnabled = false
iOS WebView 文字发灰：-webkit-font-smoothing 单独用基本无效
在 iOS 上写 body { -webkit-font-smoothing: antialiased; } 后字体更虚？正常。WebKit 默认禁用次像素抗锯齿，单靠这个属性无法激活高质量光栅化。
- 必须组合使用：
-webkit-font-smoothing: antialiased+text-rendering: optimizeLegibility+-webkit-text-stroke: 0.2px transparent -
-webkit-text-stroke是关键——极细透明描边能“撑开”字形边缘，迫使浏览器重走高质量渲染路径 - 给文本容器加
transform: translateZ(0)或will-change: transform，强制创建合成层，防 backdrop blur 污染 - 禁用
opacity: 0.99类似值，iOS 会降级为 CPU 渲染，文字立刻变灰
Windows Chrome 字体模糊：-webkit-font-smoothing 是摆设
你在 Windows Chrome 里写了 -webkit-font-smoothing: antialiased 却没效果？不是你漏了分号，是它本来就不支持——该属性在 Windows/Linux 下被浏览器静默忽略。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- Windows 下唯一可控路径是系统级 ClearType 调校：搜索“调整 ClearType 文本”，按向导选五组最清晰样例
- 确保显示器设为原生分辨率（右键桌面 → 显示设置 → 确认“推荐”标识）
- DPI 缩放必须用整数倍（100%、125%、150%），禁用 135%、175% 等非标准值
- 关闭“硬件加速 GPU 计划”（设置 → 系统 → 显示 → 图形设置）
响应式图片与背景图模糊：srcset 和 image-set() 都有隐性陷阱
写了 srcset 还是加载了低清图？常见原因是混用了 w 和 x 描述符，或 sizes 没写死 CSS 像素宽度。
-
srcset只用w描述符（如"img-800.jpg 800w"），别和2x混写；sizes必须写死，例如"(max-width: 768px) 100vw, 50vw" -
background-image: image-set()在 Safari ≤15.6 中静默失败，稳妥做法是用媒体查询兜底：@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) -
img的src必须是中等分辨率 fallback（如 800w），不能是 400w 小图，否则 DPR=1.25 时连 fallback 都糊 - 上线前务必用 Chrome DevTools → Network → Filter “image”，确认实际加载的是哪张资源
真正容易被忽略的是 DPR 动态变化——窗口拖到外接显示器时，resize 事件不触发，但 window.devicePixelRatio 已变。所有适配逻辑必须监听 matchMedia('(resolution)')，而不是只在初始化时读一次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
