i have a font with out line but i want to fill color in it with css. it is possible to fill color in it

Question

I am trying to create outlined texted using this batman font, like below:

How can I do this using CSS?

Hi Sumer. Welcome to stack overflow. You can edit your post to include the images in your post. — dwjohnston, Jan 05 '17 at 05:18
See this question: http://stackoverflow.com/questions/4919076/outline-effect-to-text — dwjohnston, Jan 05 '17 at 05:26

sansan · Answer 1 · 2017-01-10T05:32:58.647

1

The font itself having outerline so, you just add color to text, you just add color:red; for your outline font.

For Example:

<h1 style="font-family: myFirstFont; color:green;">FONT <span style="color:red;"> COLOR</span></h1>

Your result Here what you are looking for

edited Jan 10 '17 at 05:32

answered Jan 05 '17 at 05:51

sansan

783
1
6
21

score 0 · Answer 2 · answered Jan 05 '17 at 06:36

You can't fill color through css3 in font

use text shadow

see this:

check image

<html>
<head><title></title></head>
<style>
body{font-family:BatmanForeverAlternate;color:#333333;font-size:48px;text-shadow: -1px 0 #ff0000, 0 1px #ff0000, 1px 0 #ff0000, 0 -1px #ff0000;}
p span{color:#ff0000;text-shadow: -1px 0 #333333, 0 1px #333333, 1px 0 #333333, 0 -1px #333333;}
</style>
<body>
<p>T<span>A</span></p>
</body>
</html>

score 0 · Answer 3 · answered Jan 06 '17 at 09:09

To set the stroke of a letter you can use text-stroke, please note this property is not supported on IE.

Alternatively you could use SVG.

h1 {
  font-size: 150px;
  font-family: "Arial Black", Gadget, sans-serif;
  color: rgba(255, 255, 255, 0.0);
  -webkit-text-stroke: 5px gray;
}
h1 > span {
  -webkit-text-stroke: 5px red;
}

<h1><span>T</span>A</h1>

i have a font with out line but i want to fill color in it with css. it is possible to fill color in it

3 Answers3