Home > Developer > Web Develop
For a long time, web designers always have to use some "web-safe" fonts, and now @font-face can load the server-side font files, allowing the browser to display fonts that are not installed on the user's computer.
The principle is that the font file is placed on the Web server and is automatically downloaded to the user's computer when needed.
First, @font-face introductionGrammar:
{ font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style>]; }Parameter description:
Yourwebfontname: This value is your own defined font name, preferably using the default font name you downloaded, which will be referenced to the Font-family property of your Web element.
Source: The store path of the custom font, which can be a relative path or an absolute path.
Format: Refers to the formatting of a custom font, mainly used to help the browser to recognize the following types of values: Truetype,opentype,truetype-aat,embedded-opentype,avg.
Font-weight and Font-style Define whether the font is bold, and the font style.
Browser-compatible wording:
@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*/}Ii. Methods of Use
1. Download Special fonts
For example I want to download single-malta.font this font, download font link for
Http://www.dafont.com/single-malta.font
You can see a TTF file after downloading the extract.
2, using third-party tools to generate @font-face required font format, that is. Eot,.woff,.ttf,.svg font format:
Third-party tools Links: Http://www.fontsquirrel.com/fontface/generator
The step is to upload the first download font on the Webfont generator page and download the extract.
Download unzip found folder There are a lot of redundant demo pages and CSS, we only need. woff,.ttf,.svg,.eof four files. Copy these four files to the site's fonts directory. Now the preparation is done.
3, add @font-face related code in STYLE.CSS.
4, now can be used in the style of font-familyl.
The code is as follows:
<styletype= "Text/css">@font-face{font-family:' Singlemaltaregular ';src:URL (fonts/singlemalta-webfont.eot);src:URL (fonts/singlemalta-webfont.svg#singlemaltaregular) format (' svg '), url (fonts/singlemalta-webfont.ttf) Format (' TrueType '), url (fonts/singlemalta-webfont.woff), Format (' Woff '), url (fonts/singlemalta-webfont.e OT? #iefix) format (' Embedded-opentype ');Font-weight:Normal;Font-style:Normal;}H2.singlemalta{font-family:' Singlemaltaregular '}</style><Body><H2>Normal font</H2><H2class= "Singlemalta">Single Malta</H2></Body>
Effect:
Import special fonts in Web pages @font-face properties
Http://www.w3cfuns.com/thread-5597432-1-1.html
Get font
http://www.google.com/fonts/http://www.dafont.com/Third-party Build font tool
Http://www.fontsquirrel.com/fontface/generator
CSS3 @font-face
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
