The font used is an integral part of web design. Often, we want to use a particular font in a Web page, but the font is not a mainstream operating system, built-in fonts, so the user when browsing the page it is possible to see the real design. Production designer usually do would be to put the text you want to make pictures This has several obvious flaws:
Ø not possible to use a wide range of the font;
Ø picture content relative to the use of text is not modified;
Ø not conducive website SEO (search engine does not effectively mainstream factors related to the content of their pages as images alt content).
Some techniques use sIFR, or javascript / flash method hack on the network, but it will or cumbersome, or defective. The following is only talk about how to achieve any fonts embedded in a Web page through the CSS @ font-face property.
(1) The first step
Get the font you want to use three file formats, ensure that the font can be displayed correctly in major browsers.
▪ TTF or .OTF, suitable for Firefox 3.5, Safari, Opera
▪ EOT, applies to Internet Explorer 4.0+
▪ SVG, apply to Chrome, iPhone
Below to be solved is how to get to some of the three font file format. In general, we are (or have been found in the site design resources) on the hand have a certain font formats, the most common is .TTF file, we need to convert the remaining two file formats through this file format. Online font conversion services convert the font file format that can be provided through the website FontsQuirrel or onlinefontconverter get. It is recommended that the first site, which allows us to select the desired character font file is generated (the last option for services), thus greatly reducing the size of the font files, making the program more practical. Font the following statement:
(1) The first step
Download a font to the local introduction of the font, the font name for
(2) The second step
Where it is needed to use the font on the page:
The following example is a specific implementation of the above steps, custom text is further described to facilitate understanding and use of custom text. Here we downloaded the "hanyi.ttf" font, because the font is not a system font, so we can not directly use the "font-family" way to set the font for the page. This time you need to use CSS3 custom text ways to use this font, we named "itxdl" after you can use "font-family" approach to import the fonts for the text. code show as below:
Using the chrome browser directly open this file, you can see the results after the browser interprets the file on this page. By CSS3 custom text settings, we can see on the web fonts has become "hanyi.ttf" of the font style. As shown in Figure 1:
FIG 1 using custom text
Using this method we can think that your own page set up personalized text we want. Is not it exciting, you want to try your own site long been optimistic about writing it, it would quickly try it.