Webkit-text-stroke 在移动设备上不起作用

Question

我目前正在使用 webkit-text-stroke 让我的字体真棒图标看起来更薄

CSS

.arrow:after { font-family: $font-awesome; content:'\f054'; -webkit-text-stroke: 3px white; float: right; }

当我在笔记本电脑上查看它时（我使用的是 Chrome），它运行良好。但是，当我在移动设备（iPhone，也使用 Chrome）上查看我的网站时，似乎没有应用 webkit-text-stroke css 属性。图标仍为其默认粗细（无笔划）。有什么解决办法吗？或者也许是让图标更薄的替代方法，也可以在移动设备上使用？

Answer 1

不要使用“:after”，而是使用如图所示的类，它会起作用。

.fa-arrow-right {
-webkit-text-stroke: 1px orange;
}