page fonts display different results in different browsers

Source: Internet
Author: User

The font commonly seen in the website is "XXFarEastFont-Arial". But now many e-commerce sites will have a price, which involves symbols and numbers, and then the brand and content will have English and letters, which also involves English fonts, light with "song body" will not coordinate. Because the "song body" itself is designed for Chinese characters, symbols, numbers and English, letters should also use English fonts to define the display will be more appropriate.

A few days ago to do a project we decided to use font-family:verdana,tahoma,arial,\5b8b\4f53 (Arial), Sans-serif font display order (regardless of reasonable unreasonable), we tested the ie6/ie7/ie8/ firefox/chrome/(add up to more than 90% users who visit our site in the above browsers), there are differences in fonts in IE7/IE8 browsers (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. The following figure shows a bad effect, here to visit →http://docs.google.com/view?id=ds4hm4h_241f5cpdkff

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 (\5b8b\4f53): 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 letter spacing problems caused by the Chinese combination of poor results, you have time to see the manuscript http://docs.google.com/Doc?id=ds4hm4h_2619p8gqhp, The impact on the usual browsing and typesetting is minimal (Verdana's font text will be longer), if I am not so deliberately compared, almost can not see, not to mention the majority of users (I have done tests to separate the two fonts, respectively, to friends, colleagues, family and so is not a professional field of people to see, Ta didn't have any consciousness, 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.

This article source: http://www.08show.com/blog/article.asp?id=337



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.