Css 彩色网络字体
我需要创建类似彩色webfont的东西。我有一个项目，我使用的字体真棒和自定义图标字体 我的问题是我需要一个多色图标： 是否有可能创建这样的字体，或者我必须使用图像来代替？字体会很好，因为图标应该是可缩放的 希望你们能帮助我 使用梯度Css 彩色网络字体,css,webfonts,font-awesome,Css,Webfonts,Font Awesome,我需要创建类似彩色webfont的东西。我有一个项目，我使用的字体真棒和自定义图标字体 我的问题是我需要一个多色图标： 是否有可能创建这样的字体，或者我必须使用图像来代替？字体会很好，因为图标应该是可缩放的 希望你们能帮助我 使用梯度 background: rgba(231,56,39,1); background: -moz-linear-gradient(45deg, rgba(231,56,39,1) 0%, rgba(240,47,23,1) 29%, rgba(246,41,13,
background: rgba(231,56,39,1);
background: -moz-linear-gradient(45deg, rgba(231,56,39,1) 0%, rgba(240,47,23,1) 29%, rgba(246,41,13,1) 48%, rgba(246,41,12,1) 49%, rgba(241,111,92,1) 50%, rgba(248,80,50,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(231,56,39,1)), color-stop(29%, rgba(240,47,23,1)), color-stop(48%, rgba(246,41,13,1)), color-stop(49%, rgba(246,41,12,1)), color-stop(50%, rgba(241,111,92,1)), color-stop(100%, rgba(248,80,50,1)));
background: -webkit-linear-gradient(45deg, rgba(231,56,39,1) 0%, rgba(240,47,23,1) 29%, rgba(246,41,13,1) 48%, rgba(246,41,12,1) 49%, rgba(241,111,92,1) 50%, rgba(248,80,50,1) 100%);
background: -o-linear-gradient(45deg, rgba(231,56,39,1) 0%, rgba(240,47,23,1) 29%, rgba(246,41,13,1) 48%, rgba(246,41,12,1) 49%, rgba(241,111,92,1) 50%, rgba(248,80,50,1) 100%);
background: -ms-linear-gradient(45deg, rgba(231,56,39,1) 0%, rgba(240,47,23,1) 29%, rgba(246,41,13,1) 48%, rgba(246,41,12,1) 49%, rgba(241,111,92,1) 50%, rgba(248,80,50,1) 100%);
background: linear-gradient(45deg, rgba(231,56,39,1) 0%, rgba(240,47,23,1) 29%, rgba(246,41,13,1) 48%, rgba(246,41,12,1) 49%, rgba(241,111,92,1) 50%, rgba(248,80,50,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e73827', endColorstr='#f85032', GradientType=1 );
height:100px;
width:100px;
看到这个链接我认为没有一个简单的方法可以用字体来实现这一点。我想到的第一件事是，我刚刚检查了一下，用不同的颜色将半个单词包装在一个
span您应该使用带有CSS渐变的空元素或图像（SVG？）不幸的是，我不认为您能够以您希望的方式使用web字体。关于如何使用背景/渐变构建相同的形状，这里有另一个答案，但是如果您想要更兼容跨浏览器的东西，我建议您考虑将矢量图形导出为SVG并以这种方式嵌入 以下是一篇好文章，让您开始学习： 这将确保图形保持可伸缩性（就像web字体一样），使用CSS将高度设置为
1emfont size