Css IE 10中的字体（文本）线性渐变。怎么用？

无法使其在IE 10中工作：( 我使用的图标从字体真棒，并试图添加线性梯度到它

除IE之外的所有作品都尝试了不同的前缀，但据我所知，我需要这些前缀：

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

但是谷歌说IE根本不支持他们…我能做什么

。图标{
字体大小：400%；
}
/*颜色渐变类，用于卡片图标和标题*/
.fa梯度{
/*旧浏览器*/
背景：红色；
/*IE10+*/
背景：-ms线性梯度（右上角，红色0%，棕色100%）；
/*Mozilla Firefox*/
背景：-莫兹线性梯度（右上角，红色0%，棕色100%）；
/*歌剧院*/
背景：-o-线性梯度（右上角，红色0%，棕色100%）；
/*网络工具包（Safari/Chrome 10）*/
背景：-webkit渐变（线性，右上，左下，颜色停止（0，红色），颜色停止（100，棕色））；
/*Webkit（Chrome 11+）*/
背景：-webkit线性梯度（右上角，红色0%，棕色100%）；
/*W3C标记*/
背景：线性渐变（右上角，红色0%，棕色100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='red'，endColorstr='brown'，GradientType=1）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}

文件

在IE10中无法实现这一点。 您唯一的选择是使用图像或svg创建带有渐变的图标。

是的，谢谢大家

@媒体查询帮助

/* Color gradient class, for card icons and titles */
.fa-gradient {
    /* old browsers */
    background: red;
    /* IE10+ */
    background: -ms-linear-gradient(top right, red 0%, brown 100%);
    /* Mozilla Firefox */
    background: -moz-linear-gradient(top right, red 0%, brown 100%);
    /* Opera */
    background: -o-linear-gradient(top right, red 0%, brown 100%);
    /* Webkit (Safari/Chrome 10) */
    background: -webkit-gradient(linear, right top, left bottom, color-stop(0, red), color-stop(100, brown));
    /* Webkit (Chrome 11+) */
    background: -webkit-linear-gradient(top right, red 0%, brown 100%);
    /* W3C Markup */
    background: linear-gradient(top right, red 0%, brown 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='red', endColorstr='brown00', GradientType=1);
    /*background: linear-gradient(linear, left bottom, right top, from(brown), to(red));*/
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .fa-gradient {
        color: red;
        background: transparent;
    }
}

---

CSS渐变仅支持IE11。有关更多信息，请参阅任何变通方法/js polyfill？也许我可以为IE和其他浏览器添加选择性代码？。您可以通过媒体查询来完成。有关更多帮助，请参阅下面的回答：谢谢大家！我将尝试提供反馈！谢谢Patrick！我可以添加一些显示此字体的代码吗，例如-reIE中的d和其他浏览器的渐变？

/* Color gradient class, for card icons and titles */
.fa-gradient {
    /* old browsers */
    background: red;
    /* IE10+ */
    background: -ms-linear-gradient(top right, red 0%, brown 100%);
    /* Mozilla Firefox */
    background: -moz-linear-gradient(top right, red 0%, brown 100%);
    /* Opera */
    background: -o-linear-gradient(top right, red 0%, brown 100%);
    /* Webkit (Safari/Chrome 10) */
    background: -webkit-gradient(linear, right top, left bottom, color-stop(0, red), color-stop(100, brown));
    /* Webkit (Chrome 11+) */
    background: -webkit-linear-gradient(top right, red 0%, brown 100%);
    /* W3C Markup */
    background: linear-gradient(top right, red 0%, brown 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='red', endColorstr='brown00', GradientType=1);
    /*background: linear-gradient(linear, left bottom, right top, from(brown), to(red));*/
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .fa-gradient {
        color: red;
        background: transparent;
    }
}