색이있는 웹 글꼴

Question

색이있는 웹 글꼴과 같은 것을 만들어야합니다. 내가 멋진 글꼴과 사용자 정의 아이콘 글꼴을 사용하고있는 프로젝트가 있습니다.

이 같은 글꼴을 만들 수 있습니다 또는 내가 대신 이미지를 사용해야합니까 :

내 문제

내가 여러 가지 빛깔의 아이콘 같은 것을 필요입니까? 아이콘은 확장 가능해야하므로 글꼴이 좋을 것입니다.

여러분이 도와주세요!

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/

이도에있는 요소를 유지합니다 1em에 높이를 설정하는 CSS를 사용하여, (웹 폰트가 될 것 같은) 그래픽 확장 성이 유지되도록합니다 오른쪽 높이는 부모 font-size입니다.

SVG 및 이전 버전의 브라우저에는 여전히 폴백 문제가 있지만 SVG를 표시 할 수없는 브라우저의 이미지 표현을 사용하면 이러한 문제를 쉽게 해결할 수 있습니다.

기본적으로 몇 가지 옵션이 있습니다.하지만이 경우 웹 글꼴이 그 중 하나라고 생각하지 않습니다.

행운을 빈다.