Css 分步调整svg文件大小以避免模糊

因此，我考虑使用svg文件作为图标。 例如，像这样

.icon-page{
    background-image: url("../../layout/icons.svg");
    background-size: 2em 2em;
}

我希望它能与用户的字体大小相适应，这就是为什么我想我会使用em。 但是，如果用户的默认字体大小是23px左右，svg就会变得模糊，因为图标无法完全融入像素。有没有办法绕过这个问题？我是否可以使用mediaquery检测用户的字体大小，并将图标字体大小设置为特定值以确保图标看起来正常

将22px差/模糊与24px正确进行比较

---

演示：

你能在jsfiddle.net上演示一下吗？不是很理解这个问题。只是添加了一些图片来澄清问题。好的，我明白了，但是你可以做一个演示，这样我们就可以玩代码了。你应该可以在这里玩它。更改正文字体大小以查看模糊度。浏览器的默认字体大小通常为16px。我认为人们改变这一点可能很少见。你确定值得付出所有努力来避免一点抗锯齿吗？