Web page embedding Custom font methods

@font-face is a module in CSS3, and he mainly embeds his own defined Web fonts into your web Pages. often, we want to use a particular font in a Web page, but the font is not a built-in font for the main operating system, so users may not see the real design when they browse the Page. The most common way for artists to do this is to make the desired text into a picture, which has several obvious flaws: 1. It is not possible to use the font in a wide range; 2. The picture content is not easy to modify relative to the use of text; 3. Not conducive to website SEO (mainstream search engine will not use the image Alt content as an effective factor to determine the relevance of web content). There are some methods of using sIFR technology, or Javascript/flash hack on the network, but they are either cumbersome or flawed. The following is how to embed any font in a Web page using only the @font-face property of Css.

Let's look at the grammar rules of @font-face:

{      font-family: <YourWebFontName>;       src: <source> [<format>][,<source> [<format>]]*;       [font-weight: <weight>];       [font-style: <style>];    }

Value Description

1, Yourwebfontname: This value refers to your custom font name, preferably using the default font you downloaded, he will be referenced to your web elements in the Font-family. such as "font-family:" Yourwebfontname ";"

2, Source: This value refers to your custom font storage path, can be a relative path can also be the absolute path;

3, Format: This value refers to the format of your custom font, mainly used to help the browser to identify, the value of the following main types: truetype,opentype,truetype-aat,embedded-opentype,avg, etc.;

4, weight and style: These two values must be very familiar to everyone, weight defines whether the font is bold, style mainly defines the font style, such as Italic.

Implementation Steps:

The first step

Get the three file formats you want to use to make sure the font is displayed correctly in the main browser.

• . TTF Or. OTF for Firefox 3.5, Safari, Opera
• . EOT, for Internet Explorer 4.0+
• . SVG, for chrome, IPhone

Here's how to get to a font of these three format Files. generally, we have some format file for that font on hand (or found at the design resource site), most commonly. TTF file, We need to convert this file format to the remaining two file Formats. The conversion of font file format can be obtained through the online font conversion service provided by the website Fontsquirrel or onlinefontconverter. The first site is recommended Here.

About getting special fonts:

2 recommended sites: Google Web fonts and Dafont.com. Of course you can also choose Other.

For font conversion , click here to set the main parameters as Follows:

Step Two

After you get the font file in three formats, the next step is to declare the font in the style sheet and use that font where you want it.

The font declarations are as Follows:

{      font-family: ' Pingfang ';       src: url ('.. /fonts/pingfang-webfont.eot ');       src: url ('.. /fonts/pingfang-webfont.eot? #iefix ') format (' embedded-opentype '),           url (' ... /fonts/pingfang-webfont.woff ') format (' woff '),       URL ('.. /fonts/pingfang-webfont.ttf ') Format (' TrueType '),       URL ('.. /fonts/pingfang-webfont.svg#pingfang ') format (' svg ');       font-weight: normal;       font-style: normal;   }

So far, we've customized the desired Pingfang font by @font-face, and it's only one step away from the final effect, which is to apply your own defined fonts to the DOM elements in your web:

P {font:13px pingfang, Arial, sans-serif;} h1{font-family:pingfang}

More detailed article recommendation: CSS3 @font-face

Web page embedding Custom font methods