CSS @font-face rules referencing external server fonts

CSS Cascading Style sheets can be more granular to the page style settings, of course, some people like the font of custom text, but the default font-family built-in font style is only a few.

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M01/71/1A/wKiom1XFoxqxDIAKAACivk-2ihk995.jpg "title=" 1.png " alt= "Wkiom1xfoxqxdiakaacivk-2ihk995.jpg"/>

How can I introduce a third-party font?

The following describes a CSS rule @font-face

@font-face is a feature in CSS3 that embeds custom Web fonts into a Web page so that the fonts used on the page are not restricted by the client font library.

This function is very useful, but in the use of still will encounter a little problem, mainly is IE will appear some problems.

Take a look at @font-face introduction:

Syntax :

@font-face {font-family: name ; Src:url ( url ); Srules } 

value :

Name: Font names. The value of any possible font-family property

URL (URL): Specify an OpenType font file with an absolute or relative URL address

Srules: Style sheet definition

Description :

You can set the font for embedded HTML documents. There are no default values for this rule.

This rule enables you to use fonts on a Web page that may not be available on the client's local system. The URL address must point to an OpenType font file (. eot or. ote). This file contains compressed font data that can be converted to TrueType fonts, which can be used to provide HTML documents to use that font, or to replace existing fonts with the same name as the client system. This file can be crafted using the Microsoft WEFT tool.

CSS Examples:

@font-face {Font-family:my_monaco; Src=\ ' #\ ' "//***.cn/font/monaco.ttf);}

In this way, font-family can set its own defined third-party font My_monaco.

Test:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M01/71/1A/wKiom1XFpdTAAeOMAAOZLy0cknE478.jpg "title=" 2.png " alt= "wkiom1xfpdtaaeomaaozly0ckne478.jpg"/> Debug interface Error, English can not understand? Okay, let's change ie to try.

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M02/71/16/wKioL1XFqBKCTC6FAAF6Q96Ge5M440.jpg "title=" 3.png " alt= "Wkiol1xfqbkctc6faaf6q96ge5m440.jpg"/>

@font-face cross-origin request failed.  Resource access is restricted. That means no authority.

The above Chrome says that the font source you apply by default only allows its own domain name, if you want to use the external domain, you must add Access-control-allow-origin HTTP header information to the font server.

Access-control-allow-origin header information, the syntax is as follows:

Access-control-allow-origin: <origin> | *

The origin parameter specifies a URI that allows requests to be submitted to the server. For a request that does not have a credentials, it can be specified as ' * ', which indicates that requests from all domains are allowed.

For example: Allow requests from the http://youku.com domain, you can specify this:

Access-control-allow-origin:http://youku.com

My test here is set to all:

such as access-control-allow-origin:*

Then you can add the header information of the response in the HTTP configuration of the font server.

After the add is complete, test again:

Chrome Test

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M02/71/16/wKioL1XFqRfBtoxyAAJs5WCrqdk454.jpg "title=" 4.png " alt= "wkiol1xfqrfbtoxyaajs5wcrqdk454.jpg"/> font can be displayed normally, Chrome has no error.

IE11 Test:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M02/71/1A/wKiom1XFp5PzWxckAAFUNe3I4mc163.jpg "title=" 5.png " alt= "wkiom1xfp5pzwxckaafune3i4mc163.jpg"/>ie console without error.

Let's change the font for the next one.

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/71/17/wKioL1XFqefgg5ZrAAAzFH8z1BA781.jpg "title=" 6.png " alt= "Wkiol1xfqefgg5zraaazfh8z1ba781.jpg"/>

IE Test:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/71/1A/wKiom1XFqA7iI1XFAAGcC-YW6HM585.jpg "title=" 7.png " alt= "wkiom1xfqa7ii1xfaagcc-yw6hm585.jpg"/> Error, failed to complete the OpenType embedding.

Browser compatibility

Font rendering is a tricky thing-especially with older mobile browsers. You should always test that you can support as many devices as possible. The faster the problem is found, the better.

Finally, keep in mind that using many different fonts may slow down your site and take time to load all these fonts!

Not all browsers support @ font-face!

Currently, @ Font-face's support

Firefox Opera Chrome Safari IE9 and above

This is what you would say he does not support IE9 below the browser, do not worry, in the old browser when using @ Font-face, different browsers support specific font files.

Different browsers support different font format rendering:

IE Browser: EOT
Mozilla Browser: Otf,ttf
Safari Browser: Otf,ttf,svg
Opera:otf,ttf,svg
Chrome Browser: Ttf,svg

@ Font-face's Resources

Font Squirrel

Http://www.fontsquirrel.com/home

Font Squirrel is a great website and you should be very familiar with it. Font Squirrel is a collection of free fonts for you to download in a premium commercial use. Most importantly, they have the @ Font-face Kit part and the @ Font-face Toolkit Builder. The Font Squirrel Toolkit provides you with different font types that you need to support for every browser.

@ Font-face's Toolkit

The kit part of the font squirrel is a ready-made toolkit that includes a collection of font formats, CSS and HTML code. All you have to do is select a font, download the toolkit, and copy the code. It's simple,. Most importantly, they have a big choice filled with huge fonts.

The toolkit generator for @ font-face is linked as follows:

Http://www.fontsquirrel.com/tools/webfont-generator

On the other hand, you have the Toolkit builder, you upload your own fonts, and it gives you all the code you need. Because it creates a new toolkit for your fonts. All you have to do is download the new kit and copy the code to your website. It's so simple. However, when using your own fonts, make sure you have the right to use it-not all fonts are permitted by copyright

At last:

To enable @font-face to reach more browser support, there is 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 */

}

/*format brackets are the font suffix name, which is the format name */

In addition: Now domestic browser Installed capacity is very large, and domestic dual-core browser compatibility mode is not supported, can be directly forced to switch to fast mode in the following ways.

1, page Header join

<meta name= "renderer" content= "WebKit" >

360 The browser will immediately switch to the corresponding fast kernel after reading this tab.

2, plus for insurance purposes.

<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1″>

This article from "Professor elder brother" blog, reprint please contact the author!

CSS @font-face rules referencing external server fonts