css - 是否有针对 HDPI 屏幕上的自定义光标的跨浏览器解决方案

Question

是否有支持 hi-dpi / Retina 自定义光标的可靠解决方案？似乎没有标准方法来提供标准 dpi 和 hi-dpi 图形以在光标中使用。

使用媒体查询切换cursor样式是无用的，因为无法控制光标尺寸，因此@2x 图像以两倍大小显示，而不是以双倍分辨率显示相同大小。

我尝试使用 SVG 图像作为光标，但 Chrome（最新）以标准分辨率呈现。

浏览器支持：现代浏览器 + >=IE9

Answer 1

也许这有帮助：

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