How to use “two-toned” font variants in CSS?

Tags: html,css,html5,webfonts

Problem :

Certain fonts have a variant for outline and filled, and if you use these on overlapping text it draws an outlined or shaded stroke over the filled text. This is different than just an outline that strokes the text like -webkit-text-stroke-color would give you, since sometimes the filled font contains shading or other details.

Here's some examples of fonts designed to be used this way.

I was sort of able to get this to work using CSS like this:

This creates two H1 spans and uses the top-margin to move the outline one atop the filled one.

However, this doesn't seem ideal to me. Two problems:

  • I don't want to duplicate the text in the html.
  • I have to guesstimate the top-margin by trial and error.
  • If the text wraps, this doesn't work anymore.

Is there a better way to do this? I can live with having to duplicate the text, but I'd really like a more automatic way to do the positioning.


Solution :

You can place the outline text inside the h1 and use absolute positioning instead of estimating the margin, as in this jsFiddle:

That also solves the problem with the text wrapping.

To avoid duplicating the text in the markup, you can use JavaScript to create the duplicate text, as in this jsFiddle: (This might not be the best idea, though, since the text might get a moment to display without the outline, and JS is occasionally disabled in the browser settings.)

    CSS Howto..

    How to prevent the vertical scroll of this div?

    css3 pure: how to hover an element outside?

    How to create a vertical clickable divider|line in bootstrap?

    How to configure a child div to display scrollbars only when a parent div percentage settings require it

    How can I make jQuery's draggable function expand the container?

    How to detect a smartphone through JavaScript/CSS?

    How to hide crossed-out CSS lines on firebug?

    How to pause a Spinkit animation?

    How to access an element's class value via CSS

    the tab's content shows abnormal under IE7

    how to run html$css$js files locally on browser [closed]

    How to display a div at the center of viewport?

    How to import a css file only for Firefox but not for other browsers?

    how to overlap two div in css?

    Apple's Website - How Does It Autosize Itself For Mobile Devices?

    Percentages in CSS: How are they calculated internally?

    How to add styling (CSS) to tags in Javascript/Jquery

    How do I center a button in html5?

    how to avoid the ID name in css file

    How to convert UPPERCASE text to Title Case using CSS

    How to set a child's element 50px narrower to its parent element in css? [closed]

    How to apply a property only to the submit button

    How to remove dotted border around active hyperlinks in IE8 with CSS

    How do I implement responsive design into my CSS when I have two spans, side by side?

    CSS: Background in front of image - how to prevent it?

    How to define changing css property based on incrementing class names?

    How to adjust CSS to display correctly in IE 6?

    How to create a proper class structure?

    How to use CSS :hover to make extra div block elements display?

    Yahoo.widget.Editor - How to configure font size of text