Shorthand rules for CSS base font and custom CSS3 @font-face Detailed usage

Part 1 Font Shorthand

The naming rules for CSS are named in English alphanumeric and underscore (usually lowercase). The advantages of shorthand CSS font are three: one is easy to write (like a keyboard shortcut), the other is to simplify the code, and the third is to help you familiarize yourself with and understand CSS.

First, the font properties mainly include the following

Font-family,font-style,font-variant,font-weight,font-size,font

font-family(font family): "Arial", "Times New Roman", "Song Body", "bold" and so on;
font-style(font style): normal (normal), italic (italic), or oblique (italic);
font-variant (font Change): normal (normal) or small-caps (small capital letters);
Font-weight (font bias): Normal or Bold (bold). Some browsers even support the use of numbers from 100 to 900 (in hundred units);
font-size(font size): Can be set in a number of different units (such as pixels or percentages), such as: 12xp,12pt,120%,1em

If you use the Font property, you can simplify several styles to reduce the number of books;the value of the Font property should be written in the following order (separated by a space between the attributes):

Order:font-style | font-variant | font-weight | font-size | line-height | font-family

Second,a shorthand example of font

. Font {Font-style:Italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:arial,verdana;}

The above style is abbreviated as:. Font{font:italic small-caps bold 12px/1.5em Arial,verdana;} Third, the shorthand note for font1, shorthand, font-size and line-height only through the slash/form a value, can not be written separately. 2, the order can not be changed. This shorthand method only works if you specify both the Font-size and Font-family properties. Also, if you do not set Font-weight, Font-style, and font-varient, they will use the default value Part 2CSS3 @font-face Detailed usage CSS3 @font-face detailed usage

@font-face is a module in CSS3, he is mainly to embed their own definition of Web fonts in your Web page, with the advent of @font-face module, we use fonts in the development of the web is not afraid to use only web-safe fonts, Many of you may not naturally ask, such things IE can support it? When I told you @font-face This feature back in IE4 you would certainly be surprised. My blog on the use of a lot of such custom Web fonts, such as the homepage of the logo,tags and the handwriting in the page, many friends ask me how to use, can make their own page support such custom fonts, a sentence these are @font-face Implementation of , in order to let more friends know how to use him, today I mainly put their own a little learning process to share with you.

First, let's take a look at the grammar rules of @font-face:

@font-face {      font-family : <YOURWEBFONTNAME>; &NBSP;&NBSP;&NBSP; src format >] [,<source> [< format >]]*; &NBSP;&NBSP;&NBSP; [ font-weight : < Weight>]; &NBSP;&NBSP;&NBSP; [ font-style : <style ]; &NBSP; }

Value Description

1. Yourwebfontname: This value refers to the name of your custom font, preferably using the default font you downloaded, which will be referenced to the font-family in your Web element. such as "font-family:" Yourwebfontname ";"
2. Source: This value refers to the stored path of your custom font, which can be a relative path or an absolute path;
3. Format: This value refers to the formatting of your custom font, mainly used to help the browser to identify the main value of the following types: Truetype,opentype,truetype-aat,embedded-opentype,avg, etc.;
4. Weight and style: These two values must be familiar, weight defines whether the font is bold, style primarily defines the font style, such as italic.

Browser compatible

When it comes to browser compatibility with @font-face, there is a problem with the font format, because different browsers are inconsistent with font formatting support, so it's important to understand what kind of fonts are supported by various versions of the browser, and how the fonts are easily brought to the front. Let me say this question separately, so that we have a concept in mind:

One, Turetpe (. ttf) Format:

The. TTF font is the most common font for Windows and Mac, is a raw format, so he is not optimized for websites, and browsers that support this font have "Ie9+,firefox3.5+,chrome4+,safari3+,opera10+,ios Mobile Safari4.2+ ";

Second, OpenType (. OTF) Format:

The. OTF font is considered to be an original font format, built on a turetype basis, 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+ ";

Third, Web Open Font format (. Woff):

The. Woff font is the best format for Web fonts, he is a compressed version of an open Truetype/opentype, and also supports the separation of meta-packages, browsers that support this font have "ie9+,firefox3.5+,chrome6+,safari3.6+ , opera11.1+ ";

Iv. Embedded Open Type (. EoT) Format:

. EOT fonts are IE-specific fonts that can be created from TrueType fonts and browsers that support this font have "ie4+";

V. SVG (. svg) Format:

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

This means that at least we need to be in the @font-face. Woff,.eot two format fonts, and even require. svg and other fonts to support more than one browsing version.

To enable @font-face to reach more browser support, Paul Irish wrote a unique @font-face syntax called Bulletproof @font-face:

   @font-face {font-family: ' Yourwebfontname '; Src:url (' Yourwebfontname.eot? ') format (' EoT ');/*ie*/src:url (' Yourwebfontname.woff ') format (' Woff '), url (' Yourwebfontname.ttf ') format (' TrueType ');/*non-ie*/   }

But in order to allow multiple browsers to support, you can also write:

   @font-face {font-family: ' Yourwebfontname '; Src:url (' Yourwebfontname.eot ');/* IE9 Compat Modes */src:url (' Yourwebfontname.eot #iefix ') format (' Embedded-opentype '),/* IE6-IE8 */             URL (' yourwebfontname.woff ') format (' Woff '),/* Modern Browsers */             URL (' yourwebfontname.ttf ')  format (' TrueType '),/* Safari, Android, IOS */             URL (' Yourwebfontname.svg#yourwebfontname ') format (' SVG '); /* Legacy IOS */   }

Said so many empty theoretical knowledge, everyone must have a snack itch, then we first look at the W3cplus homepage in the navigation section of the blue font is how to achieve, if we have a DOM tag, we need to apply custom font:

HTML Code:

2class="neuesDemo">Neues Bauen Demo2>

Define your own web font with @font-face:

@font-face {  font-family: ‘NeuesBauenDemo‘;  src: url(‘../fonts/neues_bauen_demo-webfont.eot‘);  src: url(‘../fonts/neues_bauen_demo-webfont.eot?#iefix‘) format(‘embedded-opentype‘),   url(‘../fonts/neues_bauen_demo-webfont.woff‘) format(‘woff‘),   url(‘../fonts/neues_bauen_demo-webfont.ttf‘) format(‘truetype‘),   url(‘../fonts/neues_bauen_demo-webfont.svg#NeuesBauenDemo‘) format(‘svg‘);  font-weight: normal;  font-style: normal;}

I use the relative path here, of course, you can also use the absolute path. Here we need to apply the defined font to our actual page:

h2.neuesDemo {   font-family: ‘NeuesBauenDemo‘}

Effect:

See the above effect, I think we will feel @font-face is very magical, but also want to struggle to do see, but a hands-on only found, special font how can I get, those. Eot,.woff,.ttf,.svg How do you get those font formats? Some friends may not know how to handle the hand, then we take these questions to a complete example of the full:

First, get special fonts:

Let's take this single Malta font:

To get a single Malta font, there are two ways, one to find paid websites to buy fonts, the other is to the free site download fonts. Of course to give money this stupid I think we will not do, then we will get free places to download, where there? I usually go to Google Web fonts and dafont.com to find their own fonts, of course, there are other places on the Internet to download fonts, this demo uses the dafont.com single Malta font, so you can download a single Malta:

Once the single Malta is downloaded, it needs to be decompressed:

Second, get the font format required for @font-face:

The special font is already in your computer, and now we need to find a way to get the @font-face. Eot,.woff,.ttf,.svg font format. To get these font formats, we also need third-party tools or software to implement, below I recommend a tool I commonly used fontsquirrel, other than the first to say, the first with me point here to enter the interface below it.

If you do not see the page, you can directly click the navigation:

If you see the above interface, that's good, let's see how to use this tool to generate the various fonts required by @font-face, first upload the fonts we just downloaded:

After uploading, follow the instructions below:

Now that the files downloaded from the font squirrel have been saved on your local computer, then as soon as you unzip him, you will see a list of the files as follows:

We can see that the extracted file format, in addition to the @font-face required font format, but also with a demo file, if you are not clear can also refer to the download of the demo file, I am not here to explain the demo problem, I am mainly to show you how to use the downloaded files valuable to our project.

For example, a Fontface project was created on its own premises:

To make the project structure clearer, we created a separate fonts directory in the project to place the desired font format for extracting @font-face:

Now @font-face the desired font has been loaded into the local project, now the STYLE.CSS in the local project is enclosed with the @font-face style we need

@font-face {   font-family: ‘SingleMaltaRegular‘;   src: url(‘../fonts/singlemalta-webfont.eot‘);   src: url(‘../fonts/singlemalta-webfont.eot?#iefix‘) format(‘embedded-opentype‘),        url(‘../fonts/singlemalta-webfont.woff‘) format(‘woff‘),    url(‘../fonts/singlemalta-webfont.ttf‘) format(‘truetype‘),    url(‘../fonts/singlemalta-webfont.svg#SingleMaltaRegular‘) format(‘svg‘);   font-weight: normal;   font-style: normal;}

So far, we've customized the desired Singlemalta 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:

h2.singleMalta {  font-family: ‘SingleMaltaRegular‘}

Effect:

See the above effect, then everyone will know that we have achieved success. So about @font-face to help you create special effects of the font, here is basically finished, I need to remind users here:

1, if your project is an English site, and the project Logo,tags and other applications to more of this special font effect, I suggest you do not use the picture effect, and use @font-face, but you are Chinese site, I think it is more appropriate to use the picture, Because loading English fonts and pictures does not make much difference, but you load the Chinese font, it is not the same, because the Chinese font is too large, this will affect the project

optimization of some performance;

2. Fatal error, when you define in @font-face, the file path is not loaded;

3, you only define the @font-face, but do not apply to the DOM element in your project;

Shorthand rules for CSS base font and custom CSS3 @font-face Detailed usage