Use CSS to customize webpage Fonts

How can I use a Custom font? The general solution is to convert the text into an image, but it is a little troublesome. It is not suitable for the lazy person, and it is not convenient to modify the image. Another type is defined by CSS styles. I chose this type because it is easy to use. In CSS, the @ font-face attribute is used to embed any font in the webpage, A slightly more complicated problem is that each browser has its own font format requirements.

. TTF or. OTF is applicable to Firefox 3.5, Safari, and Opera.
. EOT applies to Internet Explorer 4.0 +
. SVG for Chrome and IPhone

Method:

Stylesheet.css defines the style (that is, the Custom font part ),

@ Font-face {

Font-family: 'fontname';/* font name, which can be customized */

Src: url ('fontname. eot ');

Src: local ('fontname Regular '),

Local ('fontname '),

Url ('fontname. woff') format ('woff '),

Url ('fontname. ttf') format ('truetype '),

Url ('fontname. svg # fontname') format ('svg ');

}

Copy the content to your style sheet (note that the URL part matches the path of the font file in your own domain space)

/* Usage */

<P style = "font-family: fontName"> hello world! </P>

This is basically done.