Chris Williams wrote:
>I have CSS that specifies fonts: ("Lucida
>SANS,Tahoma,Arial,Sans-serif;").
>
>I have various tool bars that tell me this when I hover over various
>pieces of text. That is, they tell me that string. But I can't tell
>which font was actually used.
>
>I have cases where the text appears much better on some systems than
>others. I would like to [know] which font a system is actually using.
>
>Does anyone know of any way to find this out?
>
Hi Chris,
After quite some discussion contributions ;-) I'll try to answer this
original question.
I assume the background of your question is to have as much influence on
the displayed font as possible. But the font specifications have to deal
with a lot of factors: the installed fonts on a machine, the used
browser and the defaults of it, the user settings of the browser, and
the css-rules.
1.
First we have to make the general statement: "What is not in a system,
cannot be displayed".
Translation: if a particular font is not in the font directory of the
system, this font cannot be on screen by using (only) a css-specification.
* And font types don't have always the same names on different OS's.
Windows has standard installed Arial, Times New Roman, Courier
New. But on some other operating systems the names Helvetica,
Times and Courier are used for (almost) the same fonts.
Workarounds:
* Provide a good list of font names, in the proper order, in the {
font-family: Arial, Helvetica, "Times New Roman", Times, "Courier
New", Courier, sans-serif; } properties.
* The "image technique": making an image of the word(s) in the
desired font, and showing the image instead of the text. This
technique can be used for small amounts of words in a not common
font, for instance in headers. Disadvantage: if the font size is
scaled up or down by the visitor, these images don't scale (if set
in absolute units: for instance "px") or don't scale in a
beautiful way (if set in relative units: for instance "em").
* Example of the "image technique" (for a non existing font,
designed as logo) is in this *testpage
<http://home.tiscali.nl/developerscorner/css-discuss/test-kfa-letters.htm>*.
* The "embedding technique": coding the page in that way, that the
font you want to show is downloaded to the visitor's machine as
long as the visitor is on your page/site.
See fresh article on my site: *Font embedding with css*
<http://home.tiscali.nl/developerscorner/fdc-varia/font-embedding.htm>.
2.
Another general statement: "What is turned off by the user, cannot be
turned on by the webpage".
Translation: (in the browsers I know: IE, FF, Opera, Netscape) by means
of the browser preferences the user can always overrule the indicated
font in a web page.
* in IE(6): menu Extra > Internet options... > Accessibility >
Ignore font type styles.
* in FF(1.07): menu Extra > Options... > General > Font types and
colors > checkbox Use always my font type.
* in Opera(8.01): menu Extra > Preferences... > Advanced > Content >
Style options... > User modus: checkbox "my font types" and
Standard modus: user modus.
* in Netscape(6.2): menu Edit > Preferences... > Appearance > Fonts
> uncheck checkbox "Allow documents to use other fonts".
Workarounds:
- None.
3.
And another general statement: "What is turned on by the browser, cannot
be influenced by the webpage".
Translation: even on the same operating system, different browsers use
different font types (and font sizes!) if falling back to a generic font
type as "sans-serif" or "serif".
- Example: this *testpage for serif and sans-serif
<http://home.tiscali.nl/developerscorner/css-discuss/test-default-fonttypes.htm>*.
4.
We have also the standard browser font settings! This concerns the font
type for normal text (True Type) and for preformatted text (monospace),
for the cases that websites don't have specified a font-family. In IE
the setting is via: menu Extra > Internet Options... > Font types...
Conclusion: it is rather unpredictable what a special combination of
operating system / installed fonts / browser preferences setting /
browser default fonts / css font styles will do! ;-)
To have no risk that a page layout is influenced too much by a font face
on an unknown machine, it is preferable to use common fonts, which will
be on each computer: Arial, Verdana, ...
Now back to the question again! :-)
How to know which font a system is actually using? Anyway not from a
distance, you need to see the particular system...
Then I think there are 2 ways to find out:
(a)
Sit down before the victim system with some good cups of coffee, and
analyze what is in it (what fonts are in the font directory? which
browser is used? which settings on different places? what are the
css-rules in the web page? and so on).
(b)
Sit down before your own system with half a cup of coffee, and make a
testpage with images of the fonts you want to compare. Take this file
and the other half cup of coffee to the victim system, load the
testpage, and see what is the real font compared to the images in your
testpage.
An example of such *optical testpage is here*
<http://home.tiscali.nl/developerscorner/css-discuss/test-fonts.htm>.
Hope some of this can be used.
Greetings,
francky
btw:
For fine tuning the sizes of different font faces, in css3 there will be
a "font-size-adjust" property, see CSS3 module: Fonts
<http://www.w3.org/TR/css3-fonts/#font-size-adjust>.
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
