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

Question

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

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

我曾尝试为光标使用 SVG 图像，但 Chrome(最新版)以标准分辨率呈现它。

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

Answer 1

也许 this帮助:

.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 */
}