Мне нужно создать что-то вроде цветного webfont. У меня есть проект, где я использую шрифт awesome и пользовательский значок шрифта.Цветной Webfont
Моя проблема заключается в том, что мне нужно что-то вроде разноцветного значок:
Можно ли создать такой шрифт или я должен использовать изображение вместо этого? Шрифт был бы хорош, так как значок должен быть масштабируемым.
Надеюсь, вы, ребята, можете мне помочь!
Используйте Gradient
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/
Я не думаю, что есть простой способ сделать это с помощью шрифтов. Первое, что пришло мне в голову, было Symbolset, и я только что проверил, обернув половину слова в span с разными цветами, но линия вертикальная.
Вы должны использовать пустой элемент с CSS градиент или изображение (SVG? Support is okay.)
К сожалению, я не думаю, что вы собираетесь быть в состоянии использовать веб-шрифты так, как вы хотели бы на этом. У вас есть еще один ответ на вопрос о том, как создать ту же форму с использованием фонов/градиентов, но если вы хотите, чтобы что-то было немного более совместимо с кросс-браузером, я бы предложил вам взглянуть на экспорт вашей векторной графики в виде SVG и встраивания это так.
Вот хорошая статья, чтобы вы начали: http://css-tricks.com/using-svg/
Это гарантирует, что графический остается масштабируемым (как веб-шрифт будет), используя CSS для установки высоты в 1em также будет держать элемент на правая высота до его родителя font-size.
Есть проблемы с возвратом с SVG и более старыми браузерами, но их можно довольно легко обойти, используя представление изображения для тех браузеров, которые не могут отображать SVG.
В принципе: для вас есть несколько вариантов, но я не верю, что в этом случае одним из них является веб-шрифт.
Удачи вам!
Хорошая идея! Спасибо чувак! –