Nancy Seeger wrote:
The beta text area is located here - navbar area "Contact" with a web
font phone:
http://nina.artsassistance.com/
I'd first like to draw your attention to a styling issue that you may not
have noticed because it depends on browsing environment: the text looks
somewhat odd in the embedded font, especially in large size - surely
depending on many things, but this is a screenshot taken on Firefox 3.6 on
Windows Vista:
http://www.cs.tut.fi/~jkorpela/test/embfont.gif
The shapes of the letters seem partly broken (e.g. the upper part of "D").
It seems that the currently most important issue with embedded fonts ("web
fonts") is the varying quality in different browsing situations. As far as I
have understood, Windows systems may not properly apply font smoothing to
embedded fonts, or otherwise render them in suboptimal ways.
I'm taking the WordPress default theme and mucking it up to the
clients wishes with design. In what I hoped would be more browser
friendly, I used a ding bats type web font "Combi Symbols" for a
telephone instead of using an image (mostly to satisfy IE6.)
Long ago, web purists (like me) said that it is wrong to try to extend
character repertoire by font settings, using mostly <font face> at that
time.
http://www.alanflavell.org.uk/charset/fontface-harmful.html
http://alis.isoc.org/web_ml/html/fontface.en.html
Things have changed, but mostly so that this has become a more practical
issue: if you try to include, say, a dingbat symbol using a Webdings font,
or a Greek letter or mathematical symbol using the Symbol font, by applying
it to a common letter, then this common letter will often appear in place of
the intended character - either because browsers (correctly) refuse to do
such tricks or because the special font is not available or the style sheet
rule is ignored for some reason or another.
Web fonts may add a new feature to this, because they may "force" browsers
to use the desired font - but only when font embedding takes place.
I still think the best approach here is to use an image - partly because
none of the telephone symbols encoded as characters is really adequate in
the 21st century. I think the issue of proper horizontal placement of an
image on IE 6 is reasonably solvable, and even if it isn't, IE 6 has lost
most of its significance, and anyone still browsing with it can't expect
perfect layout.
Since this is a web font, any thoughts on how I can apply what we
would normally do the img {vertical-align: baseline;} to stop
drifting upwards?
You can turn a character into an element by wrapping it inside a <span>
element, then style it. I would suggest primarily considering relative
positioning, instead of vertical-align, which may have undesired effect on
the height of the line. In this case, the larger font size of the character
seems to make the entire <li> text displaced vertically, due to its effect
on line height. Setting a sufficient line-height for all <li> elements
within the <ul> might help.
But it would seem to be much easier and more robust to use an image instead,
using an image that does not increase the line height - after all, within an
image, you can place the symbol suitably so that seems to sit on the
baseline.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
______________________________________________________________________
css-discuss [[email protected]]
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/
