Glyphicons 在 Retina/4K 屏模糊是因为其本质是位图字体，无法矢量缩放；应停用并改用 SVG 图标，通过 data URL + currentColor 实现高清适配与主题响应。
Bootstrap 3 的 Glyphicons 图标在 Retina / 4K 屏上模糊，不是 CSS 写错了，而是图标资源本身是位图（PNG），且只提供单一尺寸（14×14px 或 16×16px），浏览器在 2x 设备像素比下强行拉伸渲染，导致边缘锯齿、细节糊成一片。解决路径很明确：停用 Glyphicons，改用 SVG。
为什么 Glyphicons 在高清屏必然模糊
Bootstrap 3 默认通过 @font-face 加载 Glyphicons 字体文件（glyphicons-halflings-regular.woff 等），本质是位图字体 —— 每个图标实际是固定分辨率的 PNG 贴图，被封装进字体容器里。它没有矢量轮廓，无法随 DPR 缩放；系统只能插值放大，结果就是发虚、灰边、小字号时几乎不可读。
常见错误现象：<span class="glyphicon glyphicon-search"></span> 在 MacBook Pro 上图标边缘毛糙，DevTools 中查看 computed font-size 是 14px，但 device pixel ratio = 2，实际渲染用了 28 物理像素，而图标源数据只有 14 像素宽。
- 不是 Bootstrap 3 的 bug，是位图字体在高 DPI 下的固有缺陷
- 加
-webkit-font-smoothing: antialiased不仅无效，反而会让中文字体也变虚 - 试图用
transform: scale(0.5)回缩也不行 —— 放大再缩小仍走插值，清晰度已丢失
用内联 background-image: url("data:image/svg+xml,...") 替换按钮图标
不依赖外部文件、不触发额外请求、天然适配任意 DPR。关键是把 SVG 写成 data URL，并确保 fill 使用 currentColor，这样图标颜色能跟随父元素 color 自动变化。
立即学习“前端免费学习笔记（深入）”；
例如替换搜索按钮：
<button type="button" class="btn btn-default"> <span class="icon-search"></span> Search </button>
CSS 写法：
.icon-search {
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M11.742 10.344a6 6 0 1 0-1.577-4.331c0.001.04.011.08.022.121a4.5 4.5 0 1 1-9.012 0c0.01.04.02.08.022.121a6 6 0 0 0 1.577 4.331C5.4 11.369 6.94 12 9 12s3.6-0.631 4.742-1.656z'%3E%3C/path%3E%3Ccircle cx='10.5' cy='10.5' r='1.5' fill='currentColor'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}- 必须设
width和height，否则background-size: contain无参照 -
fill='currentColor'是关键，否则颜色写死，无法响应.text-muted或主题切换 - SVG 必须 URL encode，可用在线工具或
encodeURIComponent()处理，避免<、>等符号出错
全局替换 .glyphicon 类的最小改动方案
如果你项目里大量用了 <span class="glyphicon glyphicon-xxx"></span>，不想逐个改 HTML，可以用 CSS 覆盖所有 .glyphicon 的 background，同时保留原有结构：
.glyphicon {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.15em;
background-image: none !important; /* 干掉字体 fallback */
}
<p>.glyphicon-search::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
background-image: url("data:image/svg+xml,...");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}- 必须加
background-image: none !important，否则字体图标仍会覆盖 SVG - 用
::before伪元素而非直接设background在.glyphicon上，避免影响其他可能用到该类的场景（比如某些 JS 插件依赖 class 存在） - 注意
vertical-align值要和原 Glyphicons 一致，否则文字基线偏移
真正麻烦的从来不是换图标，而是忘记清掉旧字体加载逻辑 —— 只要 glyphicons-halflings-regular.woff 还在 @font-face 里，浏览器就可能预加载它，浪费带宽还干扰渲染。删掉那一整段 @font-face 声明，才是彻底干净的起点。
