彩色Webfont

Question

我需要创建类似彩色webfont的东西。我有一个项目，我使用字体真棒和自定义图标字体。

我的问题是我需要像彩色图标这样的东西：

是否可以创建这样的字体或者我是否必须使用图像？字体会很好，因为图标应该是可缩放的。

希望你们能帮助我！

Answer 1

使用渐变

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;

请参阅此链接http://jsfiddle.net/bipin_kumar/37fnW/1/

Answer 2

我认为使用字体有一种简单的方法可以做到这一点。我想到的第一件事是Symbolset，我刚检查过，用span包裹了一半的单词，但是这条线是垂直的。

您应该使用带有CSS渐变或图像的空元素（SVG？Support is okay.）

Answer 3

不幸的是，我认为你不能以你想要的方式使用网络字体。你在这里有另一个关于如何使用背景/渐变建立相同形状的答案，但如果你想要一些更多的跨浏览器兼容，我建议你看一下导出你的矢量图形作为SVG和嵌入就这样。

这是一篇很好的文章，可以帮助您入门：http://css-tricks.com/using-svg/

这将确保图形保持可伸缩性（如同网络字体），使用CSS将高度设置为1em也将使元素保持在其父级font-size的正确高度。

SVG和旧浏览器仍存在后备问题，但对于那些无法显示SVG的浏览器，使用图像表示可以相当容易地解决这些问题。

基本上：有一些选项适合你，但我不相信在这种情况下网络字体就是其中之一。

祝你好运！