Question

我已经阅读了很多讨论和文章，但没有一个解决方案来解决这个问题。视网膜设备上定制光标的质量是不够的（它们很模糊），我想知道是否有一种方法可以确保即使在这些设备上也有足够的质量。我尝试使用.svg和.png文件并使用各种css技术：

1）经典公式

body {
  cursor: url ("assets/cursors/pointer.png"), pointer;
}

2）媒体查询带有这些设备的特定指针

@media only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {  
 body {
  cursor: url ("assets/cursors/pointer@2x.png"), pointer;
 } 
}

3）跨浏览器解决方案

body {
  cursor: url ("assets/cursors/pointer.png") 0 0, pointer; /* Legacy */
  cursor: url ("assets/cursors/pointer.svg") 0 0, pointer; /* FF */
  cursor: -webkit-image-set (url ("assets/cursors/pointer.png") 1x, url ("assets/cursors/pointer@2x.png") 2x) 0 0, pointer; /* Webkit */
}

在Stack Overflow的所有讨论中，使用jQuery而不是使用CSS代码的链接SVG mouse cursor blurry on Retina display中的那个讨论似乎是唯一有效的质量方面;然而，不幸的是，它出现了卷轴的问题。

如果您想通过CSS使用解决方案并通过jQuery使用解决方案，有没有人有解决方案？

Answer 1

我最近和W3C人讨论过，我们同意，我们应该用image-set（）来做。见这里：https://github.com/w3c/csswg-drafts/issues/2480。

cursor: image-set( "foo.png" 1x, "foo-2x.png" 2x), pointer;

可悲的是，Firefox多年来一直忽视它，因此今天没有办法让它在FF中运行：https://caniuse.com/#feat=css-image-set

I am trying hard to convince FF guys to implement it，但遗憾的是，没有人有时间:(但至少他们努力让你同步来自烤面包机的书签。

视网膜显示屏上的自定义光标清晰（真正的工作技术）

1 个答案: