CSS3 use @font-face to implement custom English fonts

The legendary CSS3 basically anything can, so CSS3 can customize English font? The answer is very good. @font-face can be used to achieve a custom English font, here is a good example, interested friends can understand

 

CSS3 is already very popular now. The legendary CSS3 basically anything can, so CSS3 can customize English font? The answer is very good. Use @font-face to achieve custom English fonts, let's go and see.

1. Grammar rules

Copy Code code as follows:


@font-face {


font-family: a custom font name;


src: A custom font storage path;

Whether the
Font-weight:normal is bold


font-style:normal; Define font styles, such as italic


}

2, Value description

(1) Font-famliy: This value refers to your custom font name, preferably using the default font you downloaded, and he will be referenced to the font-family in your Web element. such as "font-family:" Yourwebfontname ";"

(2) Source: This value refers to the store path of your custom font, which can be a relative or an absolute path;

(3) format: This value refers to the format of your custom font, which is used primarily to help browsers identify the following types of values: Truetype,opentype,truetype-aat,embedded-opentype, AVG, etc.;

(4) Weight and style: These two values must be familiar to you, weight defines whether the font is bold, and style primarily defines the font style, such as italic.

3, each browser requires the format of the font

(1) turetpe (. ttf) format:

. TTF fonts are the most common fonts for Windows and Macs, and are a raw format. Therefore he does not optimize for the website, the browser that supports this kind of font has "Ie9+,firefox3.5+,chrome4+,safari3+,opera10+,ios Mobile safari4.2+";

(2) OpenType (. OTF) Format:

. OTF font is considered to be an original font format built on Turetype, so it also provides more functionality, and browsers that support this font have "firefox3.5+, Chrome4.0+,safari3.1+,opera10.0+,ios Mobile safari4.2+ ";

(3) Web open font format (. woff) Format:

. Woff font is the best format in Web fonts, he is an open Truetype/opentype compressed version, but also supports the separation of meta packets, Browsers that support this font have "ie9+,firefox3.5+,chrome6+,safari3.6+,opera11.1+";

(4) Embedded Open Type (. eot) Format:

.EOT fonts are IE-specific fonts, you can create this format from TrueType fonts, support this font browser has "ie4+";

(5) SVG (. svg) format:

. svg fonts are a format based on SVG font rendering, browsers that support this font have "Chrome4+,safari3.1+,opera10.0+,ios Mobile safari3.2+ ".

So, @font-face, we need at least. Woff,.eot two format fonts, and even the need for. svg and other fonts to achieve more browsing version of the support.

4, synthetic notation

Copy Code code as follows:


@font-face {


font-family: ' Yourwebfontname ';


/* IE9 compat Modes * *


src:url (' Yourwebfontname.eot ');


/* IE6-IE8 * *


src:url (' Yourwebfontname.eot #iefix ') format (' Embedded-opentype '),


/* Modern Browsers * *


url (' yourwebfontname.woff ') format (' Woff '),


/* Safari, Android, IOS/


url (' yourwebfontname.ttf ') format (' TrueType '),


/* Legacy IOS */


url (' yourwebfontname.svg#yourwebfontname ') format (' SVG ');


}

5, get Fonts

(1) go to some download fonts Web site to download the English font you want

(2) then go here →http://www.fontsquirrel.com/ Tools/webfont-generator get the required format

(3) access to the above URL interface

If you go to the page without seeing the above image, you can click the navigation directly:

If you see the interface above, it's good to do, Let's see how we can use this tool to generate all the fonts that @font-face need, first upload the fonts we just downloaded:

after uploading, follow the image below:

now from font Squirrel downloaded files have been saved on your local computer, and then just unzip him, you can see the file list is as follows:
"
Uncompressed file format, Inside in addition to the font format required for @font-face, but also with a demo file, if you are not clear can also refer to download the demo file, I am not here to demo instructions to asktopic, I mainly to introduce how to download the file to the value of the application of our project. The

finally reminds you that you can forget about using @font-face, but never forget to generate fonts in various formats, because it helps you to be compatible with each browser. The last thing to note is that if your project is English site, and the project can use this special font effect, but you are Chinese website, I think it is more appropriate to use pictures.

@font-face to introduce here, more CSS3 things please pay attention to this blog. If you have any suggestions please leave a message below yo, I will try to correct, strive for the best.