Font effect settings that are displayed normally in IE Explorer

For example, we use the following font settings (let's not be unreasonable)

Font-family:verdana,tahoma,arial,5b8b4f53 (XXFarEastFont-Arial), Sans-serif

After the IE6, IE7, IE8, Firefox, Chrome and other mainstream browser test, found in the IE7 and IE8 browsers display English and digital fonts differ (see figure below)

"Aisleep" and "88" feel the above has a clear sawtooth, and below the feeling thick and smooth some.

As you know, this is because the Ie7/ie8 browser [Properties] > [Advanced] tab > [Multimedia] has a ClearType (

Enhanced screen font) property, the default is the reason for the selection (see figure below).

If you remove this option, the font displayed by the Ie7/ie8 browser will be unified with the other browsers. Conversely, enable ClearType via Windows Control Panel > ClearType Tuning (see figure below)

The ClearType tuning option for the operating system control Panel can be implemented in the following ways:

1. Click Start, click Control Panel, click Appearance and Theme, and then click Show.

2. On the Appearance tab, click Effects.

3. Click to select the "Smooth edges of screen fonts using the following methods" check box, and then click cleartype[Clear in the list.

The fonts that are displayed in other browsers will be unified with the IE7/IE8. (Note: According to my survey most XP operating system defaults to "standard")

Then you'll see some testing and finishing, just to understand the characteristics of the font under different settings. There will not be any font recommended settings, because I think the font settings and the specific circumstances of your project, there is no setting is the best, as long as the characteristics of the font in different settings can be handy in the future applications.

Test: 12px and 14px font sizes are the most common in Chinese web pages; font family: Bold, XXFarEastFont-Arial, Sans-serif,verdana,tahoma,arial,helvetica (No black font, Ya black fonts in Vista after the operating system, but according to the website data statistics 80% are XP operating system, the current compatibility will be a problem; text bold and easy to distinguish, browser: ie6/ie7/ie8/firefox3.6/chrome4.0.

Finishing:

From the ClearType angle: In addition to ie7/ie8 other browser font display effect is the same, how to unify all the font display effect, the method above has been said.

* Bold: Font size 12PX/14PX When the ClearType settings have a role (16px/18px/20px no effect, 22px above will have effect);

* XXFarEastFont-Arial (5b8b4f53): Font size 12px/14px/16px/18px When ClearType settings do not work (more than 20px will play a role), so the song between the 12px-18px in all the above browsers can be highly unified, But the bold symbol display is really not ideal, such as "@";

* Sans-serif: No liner words, careful must find that only this type of font on the image shows three kinds of fonts. The difference between IE6 and IE7/IE8 is just ClearType setup problem, the font is actually Tahoma (no Shang), but in Firefox and Chrome is called the song (Shang) (can be set);

* Verdana:cleartype settings will be useful, ie6/firefox/chrome in the obvious sawtooth.

* Tahoma:cleartype settings will be useful, ie6/firefox/chrome in the obvious sawtooth. (careful observation actually Verdana and Tahoma font shape is similar, just the difference of letter spacing in words.) About Verdana and Tahoma to extend again, before seen according to Jackob Nielsen User research shows that Verdana fonts are the most readable, the recommended settings for the first default font, the premise that is the English site. But in the Chinese site and a long talk in English typesetting problem, specifically what font to consider whether the article has italic, bold:

o when ClearType is set to "standard", the Tahoma is stronger than Verdana, and the advantage of the wide spacing of the Verdana letters is reflected.

o when ClearType is set to "clear", Verdana and Tahoma effects are similar.

As for the Verdana due to the problem of letter spacing caused by the Chinese combination of poor results, the impact on the usual browsing and typesetting is minimal (Verdana's font will be longer), and if I'm not so deliberate, it's almost invisible, not to mention the majority of users (I've done tests to separate the two fonts from the article). , to friends, colleagues, family and other people who are not in the field of expertise to see, ta do not have any awareness, and after I pointed out the difference in the font, they said to me: "You are too boring?" So the specific font, the most important thing is to consider what the font used in the object (System, visitors), and then whether the font will involve changes: size, italic, bold.

* Arial and Helvetica: The above browser is almost consistent visually (ie7/ie8 in the sense of darker color), no sawtooth feeling, but Verdana, Tahoma compared to the overall slightly smaller. You can set the font to a larger, CSS style will be more than one line of special definitions.

Someone on the network to organize related font settings, I transferred it to the required web designers for reference.

Font-family:arial, Helvetica, Sans-serif;

font-family: ' Arial black ', Gadget, Sans-serif;

font-family: ' Bookman old Style ', serif;

Font-family: ' Comic Sans MS ', cursive;

Font-family:courier, monospace;

font-family: ' Courier New ', Courier, monospace;

Font-family:garamond, serif;

Font-family:georgia, serif;

Font-family:impact, charcoal, sans-serif;

font-family: ' Lucida Console ', Monaco, monospace;

font-family: ' Lucida Sans Unicode ', ' Lucida Grande ', Sans-serif;

font-family: ' MS Sans Serif ', Geneva, Sans-serif;

font-family: ' MS Serif ', ' New York ', Sans-serif;

font-family: ' Palatino Linotype ', ' book Antiqua ', Palatino, serif;

Font-family:symbol, Sans-serif;

Font-family:tahoma, Geneva, Sans-serif;

Font-family: "Times New Roman", Times, serif;

font-family: ' Trebuchet MS ', Helvetica, Sans-serif;

Font-family:verdana, Geneva, Sans-serif;

Font-family:webdings, Sans-serif;

Font-family:wingdings, ' Zapf Dingbats ', Sans-serif;

Copyright notice: When reprinted, please indicate the original source and author information of the article by hyperlink form and this statement

Article reference address: http://www.iefans.net/liulanqi-ziti-shezhi/Author: Iefans