CSS3 font-face font

 The CSS3 font-face font design is a new font application attribute of CSS3 . The advantage of the traditional CSS font property font-family is that it can set many different fonts and give them the order, allowing the browser to determine the font in order can normal display, although this function has been significantly beyond even earlier HTML of the face attribute, but there is still a drawback is that if the viewer's computer is not installed font designers want to show, that font-family of the effect may not be revealed, in addition to embedded designers with additional external font file, such a concept, to CSS3 resolved, function CSS3 font-face property is a combination of functions embedded fonts and external fonts to apply to become perfect s solution.

CSS3 font-face property syntax structure

<!--Basic settings-->
@font-face{
　font-family: NewFont;
　src: local (font file), url (font file URL);
　font-weight: bold; //set to bold font , This line is optional
}

<!--Call font-->
font-family:NewFont;

The CSS3 font-face property must first set the name of a font and the location of the external font file, and then the font in this external font file can be easily called. From the src part, we can see that there are two ways to use font files, local and url. What is the difference between the two? Local uses the built-in font file on the browser’s computer, while url uses an external font file. Designers can carefully consider whether the font file to be used exists on the visitor’s computer and then decide which one to use However, the CSS3 font-face property is also very smart. It can first determine whether the local file in the front exists, and if it does not exist, it determines whether the external file (url) can be displayed.

CSS3 font-face font design example

<style type="text/css">
@font-face {
  font-family: NewFont;
  src: url(font file);
}
div {
  font-family: NewFont, standard regular body, sans-serif;
}
</style >
<div>This is the test text</div>

To use the CSS3 font-face property, you must first set up the font name and font file . In this example, the two important parts are set in @font-face, and then the next line applies this setting to web pages DIV block , if visitors are using browsers support CSS3 font-face property, you can display the font file NewFont set, if not, will be based font-family down effect properties continue to try to apply a font, times New Roman font standard that is applied, then not, then re-apply to the sans-serif font sans serif, normal use CSS3 font-face property, then call when the font will still use the font -family sets other common fonts to avoid mistakes.

Note on the use of CSS3 font-face In

fact , the font-face property of CSS3 is just to let the already very useful font-family property, and to increase the opportunity for additional effects. Although the font-face property is still under development, It has also been supported by many new versions of browsers, but the concept of font-face attribute will allow browsers to download font files as appropriate, so pay attention to the copyright issues of font files, and do not use unauthorized font files at will. Moreover, fonts that are not claimed to be free on the Internet can be used. The details of the authorization must be read carefully. If there is any uncertainty, do not use it. Then there is the problem of the download speed of the font file. If the download speed of the font file planned by the designer is different from the speed of the web page loading, there will be a problem of screen jumping when opening the web page.