On 4/07/2014 10:07 AM, Philippe Wittenbergh wrote:
Le 4 juil. 2014 à 06:09, David Hucklesby <huckle...@gmail.com> a
écrit :
I think you may be looking at the normal letter spacing that occurs
between letters. If you increase the font-size of your test text,
you will notice small gaps there as well.
Close; it is the full font-metrics, in this case the intrinsic
kerning for the given font.
As this spacing varies by letter and font, I’m sorry I have no good
solution. Playing with the CSS letter-spacing value did not give a
useful result. YMMV.
letter-spacing: -.05em works here for the bottom span, at the price
of pulling each of the 3 letters closer to each other. But that “fix”
might be browser and platform dependent, and is dependent on the font
& font-size as well.
A more stable fix is using a small negative margin-right (something
like -.1em). But again, this is dependent on platform, browser and
font-metrics.
I agree with Philippe, it's the font metrics. A possible solution is to
simplify. Why use three ems (this causes it to be italic) and other
elements to achieve something which can be simply done with a SVG. Below
is a demo with an inline <svg> which looks fine in Firefox and Chrome.
Fails in IE12.
http://css-class.com/test/temp/elli-code.htm
I would recommend to redo the SVG as an image since the can be scaled as
a percentage width of the <h1> header and would look much more graceful
as you re-sized the view-port. The only problem is it also fails in IE12.
http://css-class.com/test/temp/elli.htm
http://css-class.com/test/temp/elli.svg
FYI, the "E7FLUX" could also be done as a SVG.
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
