Home > Developer > Web Develop
Fonts in Web pages three sources:
fonts installed in the user's machine (fonts that are used with ease in web pages);
Fonts that are saved on third-party websites. Common Typekit and Google, link to page using link tag;
The fonts that are saved on your own Web server. Use @font-face.
How to set Web fonts:
Use public font libraries such as Google Web fonts or Adobe's Typekit.
Use a pre-packaged @font-face package.
Use font squirrel to generate @font-face packages with your own fonts.
Generic class for Web fonts (the way to add a generic class to a font is insurance):
serif: Serif font, there will be some decorative lines at the end of each character stroke;
Sans-serif: No liner font, no decorative line at the end of the character stroke;
Monospace: Equivalent font, each character width equal (also known as the Code body);
Cursive: Grass chirography or handwriting;
Fantasy: cannot be categorized into other categories of fonts (usually grotesque fonts).
Styles for displaying fonts on a page
Using the top five fonts is to ensure that in the worst case, the document code can be displayed in the correct glyph.
1. Public Font Library
1.1 Using Google Web Fonts
Open http://www.google.com/webfonts, find the font you want, click the Add to Collection button and click the Use button to generate a link to the selected font.
<Linkrel= "stylesheet"type= "Text/css"href= "Http://fonts.googleapis.com/css?family=Anton|Niconne|Prata"/><style>Body{font-size:20px;font-family:Anton,serif;}</style></Head><Body> <Div>Link-google fonts</Div></Body>
2. Packaged @font-face Package
@font-face is the CSS2 syntax that allows custom fonts to be displayed on a Web page. All browsers are available.
2.1 usage Rules
You can download to fonts from online or from a third-party Web server. This will be cached the first time the browser is loaded, and then not downloaded.
2.2 Syntax
@font-face { font-family: font name; src:url (path) format ("format"), url (path) format ("format"), ... ; font-weight:normal; font-style:normal;}[Email protected] Compatible
Different browsers require different font formats. such as:
A.webkit/safari (3.2+): Truetype/opentype TT (. ttf), OpenType PS (. OTf).
B.opera: Truetype/opentype TT (. ttf), OpenType PS (. OTf), SVG (. svg).
C.ie4 starts using EOT (embeddedopentype); IE9 uses Woff.
D.firefox (3.5+): Truetype/opentype TT (. TFF), OpenType PS (. OTf), WOFF (since Firefox 3.6).
F.google Chrome:truetype/opentype TT (. ttf), OpenType PS (. OTf), WOFF since version 6.
g.ios4.1 Previous versions move Safari and other browsers using the SVG format, after iOS4.1 Mobile Safari uses OTF (OpenType) or TTF (TrueType) fonts.
By a~g you can draw:. EoT +. TTF/. OTF + svg + Woff = All browsers are perfectly supported
Font Squirrel (http://www.fontsquirrel.com) provides a number of fonts packages. Each font pack contains fonts in all formats and CSS code that provides the correct format for each browser.
2.4 Generating @font-face Packages
First get the conversion Web font using authorization, using the font squirrel and a translator, you can turn the uploaded font into a font package.
Web Font Big Secret
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
