[Tutorial] about the font application in web design (4) Practical application

Hello, everyone. It's me again ~

Sorry for letting everyone wait for so much time. It has been busy recently. However, I will try my best to tell you something about it. You are welcome to continue to pay attention to it.

Last time I talked about the application I encountered in the actual application of font-family · on "href =" http://www.cnblogs.com/ruxpinsp1/archive/2008/05/11/font-in-front-end-development-3.html "target =" _ blank "> browser compatibility issues. This time I
How to arrange the font family from the operating system aspect. In addition, because the choice of Chinese characters is too small, the content of the design in this chapter should take the western text as the main body, compare with Chapter -3.html "href =" http://www.cnblogs.com/ruxpinsp1/archive/2008/05/11/font-in-front-end-development-3.html "target =" _ blank ">" solution 2 "in the previous chapter ".

-Common fonts for different operating systems

How can you make your fonts look consistent on any system or computer?

The principle is simple. Try to use fonts that exist in all operating systems. Although it sounds simple, it is still a tricky thing. To solve this problem, you must first understand the fonts of common operating systems.

Below I will list some default fonts for common operations except Windows. Windows ...... You should be familiar with it.

-Common fonts in Mac OS X

A typical installed Mac OS X 10.4 contains the following commonly used Spanish fonts (some of which are not listed ):

sans-serif	serif	monospace
Helvetica	Times	courier
Arial	Times New Roman	Courier New
Arial narrow	Georgia
Arial black
Comic Sans MS
gill sans
impact
trebuchet MS
verdana
lucida Grande

-Typical Linux Fonts

A typical Linux system only has kernel, so you must install the font on your own.

In this case, it is naturally impossible to correctly predict the fonts installed by Linux users. However, we will install some common fonts, so there will be no major problems.

 

-Compare the fonts of each operating system, we will find that --

In fact, common fonts for windows are available in other operating systems, and many people think windows only Arial fonts are no exception ~

Many designers think that Arial is not an elegant font, so they hope to replace it with a more classic Helvetica font on Mac.Code:

Font-family: Arial, Helvetica, sans-serif;

However, because Mac OS also has the Arial font, it will always show only Arial

In fact, this problem can be solved with a slight modification:

Font-family: Helvetica, Arial, sans-serif;

 

But things are often not that simple. For example, the above Mac OS X Font table contains a lucida Grande font. This font is Mac only, so you should be able to write it with confidence:

Font-family: "lucida Grande", Arial, sans-serif;

Then Mac users can see lucida Grande, while PC users can see Arial fonts. A good example of application.

But in fact, many PC users see Garbled text instead of Arial fonts.

What's going on? Because there are many font download websites on the market, and there is the lucida Grande download above. Unfortunately, this widely-spread lucida Grande is a rip version, and there are defects in the rip, resulting in all line breaks will be displayed as a garbled code ......

-- Large

Don't say that this will only happen to users with English fonts. The version that can display on XP is not a rip version. The widely spread version on the Internet also has similar defects, but it is not serious enough to generate garbage codes. So pay attention to it when selecting the font.

-Introduction to common Spanish Fonts

Tahoma 16pxTahoma 14pxTahoma 12px

Tahoma is my favorite non-lined font. First, this font is installed on almost all systems by default, so there will be no compatibility issues. Second, this font is also balanced, and the display Section is also good.

 

Verdana 16pxVerdana 14pxVerdana 12px

To be honest, verdana is too wide and is not suitable for mixing Chinese and English. In many cases, a letter in verdana is wider than a Chinese character of the same size. Foreign designers like to use verdana, most of the time because verdana below 11px is indeed very good, but many domestic designers do not want to copy it, and use it on the layout of 12px or even 14px, as a result, the space for the local promotion is more intense, so it is not recommended to use font-family as the leading font.

If you want to use the verdana font, you must consider the size gap between it and the general system default sans-serif font. Verdana is much larger than Helvetica or Arial. Fortunately, this font will be installed by default in almost all systems ......

 

Trebuchet MS 16pxTrebuchet MS 14pxTrebuchet MS 12px

Trebuchet MS is a font that many people will ignore. In fact, I personally appreciate this font. Instead of using verdana, it is better to use a more rounded font. It also provides good support for various operating systems.

The disadvantage is that it is the same as verdana because it is too wide and is not suitable for Chinese and English mixing. Pay attention to the gap between the font width and the default sans-serif font.

Because some Linux systems may not install this font, if you want to start with a font-family, you can use verdana for subsequent fonts.

 

Arial 16pxArial 14pxArial 12px

The default sans-serif font in windows. The default font will never be used.

 

Helvetica 16pxHelvetica 14pxHelvetica 12px

Why is Helvetica so elegant? Even if it is used at the beginning of font-family, it will be able to stand alone.

In addition, there is a flash game with Helvetica and Arial ~ Just step on the Arial character like a super Mary. By the way, if there is no Helvetica font, let's take a look at the differences between the two fonts ~ Tea ~

 

Georgia 16pxGeorgia 14pxGeorgia 12px

My favorite serif font. It is not only suitable for text, but also for titles. Especially in ItalyGeorgia ItalicIt is even more attractive. The disadvantage is that it is not suitable to mix Chinese characters, because Georgia's line is too heavy for, so it looks hard ......

 

Times New Roman 16pxTimes New Roman 14pxTimes New Roman 12px

The default serif font for Windows. There's nothing to say, the old man of the Spanish font. Many fonts, such as Courier New, are derived from Times New Roman.

However, this font is rarely used in the print industry, and more is used by its descendants-times Europa and times Europa office.

In the specific webpage font application, note that Times New Roman with the same font size is much smaller than normal fonts, so you must consider the font size changes.

 

Courier New 16pxCourier New 14pxCourier New 12px

One of the common equal-width fonts. In fact, the selection of the same width font is relatively small, so it is basically necessary to be compatible with all systems, so you can only select this font.

But fortunately, the same width font is usually useful when writing code, so as long as the same width is no big problem. Fonts similar to lucida sans typewriter, lucida console, and Monaco are also very useful.

-To sum up, summarize several practical and simple font-family Font-family: tahoma, Helvetica, Arial, sans-serif;

Tahoma neutral font. We recommend that you use an environment above 13px.

 

Font-family: trebuchet MS, verdana, Helvetica, Arial, sans-serif;

Verdana wide font. We recommend that you use it in environments below 11px.

 

Font-family: geogia, Times New Roman, times, Serif;

The best choice for line fonts.

 

Font-family: lucida console, Monaco, Courier New, Mono, monospace;

A series of equal-width fonts. It is easy to write code. In addition, if you think the lucida console is too wide, you can replace it with a relatively narrow lucida sans typewriter. The code block on Lao Zhao's blog uses lucida sans typewriter ~

-Do you know?

• Font alias

  A font in the system allows multiple aliases. For example, in windows, Georgia can also be named by Georgia MS, which is actually the same font. The official name of is simson, while "on" is only its alias.

  According to the specifications, the browser should be able to automatically identify the font alias and map it to the correct font file. For example, font-famliy: simson and font-family: "" should have an equivalent effect. Unfortunately, it seems that many browsers cannot correctly execute the previous definition ......

• When should I quote the font name with quotation marks?

  Let's take a look at the font style definition:

  Font-family: Times New Roman,, Serif;

  Many people will say that this style is written incorrectly, because Times New Roman and should both be enclosed in quotation marks, as shown below:

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

  In fact, both of the above statements are correct. Unlike most people think,Quotation marks outside the font name are not mandatory.. What is the difference between quotation marks and no quotation marks?

  In fact, the biggest difference lies in the interpretation of the blank characters (such as spaces and tabs) in the font name.

  When no quotation marks are addedThe browser should interpret the blank characters in the font name in the same way as in XML, that isIgnore the white spaces around the font name, and the white spaces in the middle of the word are interpreted as a space. For example, font-family: Times New Roman, Serif; will be interpreted as font-family: Times New Roman, Serif;

  When quotation marks are added, the browser must retain all the blank characters in the quotation marks.. If it is written as font-family: "Times New Roman", the browser does not display the Times New Roman font, but searches for a font called "Times New Roman.

  For font names such as "", because there are no blank characters in the middle, there is no need to enclose them with quotation marks. However, not all operating systems support Chinese characters, and not allProgramThe staff will pay attention to the correct encoding of CSS files. For the sake of security, quotation marks are generally added. Of course, the best way to solve this problem is to use aliases. For example, should actually be written as simson, so that even if the viewer's system does not support Chinese characters and the CSS file is incorrectly encoded into gb2132, the browser still knows that this is, make a proper font search. Unfortunately, not all browsers support this ......

 

This topic is about the font application in web design. I hope it will help you. Next time, I plan to explain how to apply style sheet management in projects. It is suitable for those who are a little bit familiar with style sheet basics and are participating in or interested in large-scale development projects ~ It may also be interspersed with small ones.ArticleTo explain some misunderstandings that people encounter in their actual work. However, it may be a little busy recently, so it may take some time to write. Please wait.

So, you will see it next time ~