Text Stroke and Shadow CSS3 in Firefox

问题

Hey guys I was wondering if there was a way of adding a stroke and shadow to text, I can get it working in Chrome and Safari as webkit supports text-stroke and text-shadow. I can get the stroke to display in Firefox but that is using text-shadow and playing with the offset. So does anyone know a way around this issue.

回答1:

The text-stroke property isn't part of the standard CSS spec, so it's best to avoid it - Chrome would be well within their rights to pull out it at any time.

You're right that you can create text-stroke-like effects using multiple comma-separated text-shadows - in fact you can use the same technique to add an 'actual' shadow as well:

h1 {
    font-size: 100px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #F00, -1px -1px 0 #F00, 1px -1px 0 #F00,
            -1px 1px 0 #F00, 3px 3px 5px #333;
}

Be careful though, because text-shadow isn't supported in IE9 and below either. I'd recommend only using it for non-essential styling: make sure the text is still just as readable when the shadow / faux outline isn't there.

回答2:

Firefox 48 now supports text strokes (with the -webkit prefix), as well as some other webkit-specific properties (like -webkit-text-fill-color). Just be wary that the specification isn't really there, and it will probably change in the future.

Here's an example that now works in Firefox:

.outline {
  -webkit-text-stroke: 1px red;
}

span:first-of-type { 
  display: block;
  font-size: 24pt;
  font-weight: bold;
}

<span class="outline">This text has a stroke.</span>
<span class="outline">(Even in Firefox)</span>

See the Mozilla website:

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke

来源：https://stackoverflow.com/questions/10760789/text-stroke-and-shadow-css3-in-firefox

标签

html5

firefox

css3