css3åä½@font-face
åä½
对该æç« çç解ï¼æç« è½¬èªhttp://www.w3cplus.com/content/css3-font-face
1ã@font-faceçè¯æ³è§åï¼
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}
YourWebFontName | èªå®ä¹çåä½å称 |
source | èªå®ä¹çåä½çåæ¾è·¯å¾ |
format | èªå®ä¹çåä½çæ ¼å¼ |
weightåstyle | weightå®ä¹åä½ç²ä½ï¼style主è¦å®ä¹åä½æ ·å¼ï¼å¦æä½ã |
2ãå ¼å®¹æµè§å¨
1ï¼TureTpe(.ttf)æ ¼å¼ï¼
.ttfåä½æ¯WindowsåMacçæ常è§çåä½ï¼æ¯ä¸ç§RAWæ ¼å¼ï¼å æ¤ä»ä¸ä¸ºç½ç«ä¼å,æ¯æè¿ç§åä½çæµè§å¨æãIE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+ãï¼
2ï¼OpenType(.otf)æ ¼å¼ï¼
.otfåä½è¢«è®¤ä¸ºæ¯ä¸ç§åå§çåä½æ ¼å¼ï¼å ¶å ç½®å¨TureTypeçåºç¡ä¸ï¼æ以ä¹æä¾äºæ´å¤çåè½,æ¯æè¿ç§åä½çæµè§å¨æãFirefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+ãï¼
3ï¼Web Open Font Format(.woff)æ ¼å¼ï¼
.woffåä½æ¯Webåä½ä¸æä½³æ ¼å¼ï¼ä»æ¯ä¸ä¸ªå¼æ¾çTrueType/OpenTypeçå缩çæ¬ï¼åæ¶ä¹æ¯æå æ°æ®å çå离,æ¯æè¿ç§åä½çæµè§å¨æãIE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+ãï¼
4ï¼Embedded Open Type(.eot)æ ¼å¼ï¼
.eotåä½æ¯IEä¸ç¨åä½ï¼å¯ä»¥ä»TrueTypeå建æ¤æ ¼å¼åä½,æ¯æè¿ç§åä½çæµè§å¨æãIE4+ãï¼
5ï¼SVG(.svg)æ ¼å¼ï¼
.svgåä½æ¯åºäºSVGåä½æ¸²æçä¸ç§æ ¼å¼,æ¯æè¿ç§åä½çæµè§å¨æãChrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+ãã
è¿å°±æå³çå¨@font-faceä¸æ们è³å°éè¦.woff,.eot两ç§æ ¼å¼åä½ï¼çè³è¿éè¦.svgçåä½è¾¾å°æ´å¤ç§æµè§çæ¬çæ¯æã
3ã@font-faceè¯æ³ä¹ä¸ï¼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*/
}
为äºè®©åå¤çæµè§å¨æ¯æï¼
@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 */
}
使ç¨æ¹æ³ï¼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* èªå®ä¹åä½ */
@font-face {
font-family: 'NeuesBauenDemo';
src: url('../fonts/neues_bauen_demo-webfont.eot'); /*ie9+*/
src: url('../fonts/neues_bauen_demo-webfont.eot?#iefix') format('embedded-opentype'), /*ie6-ie8*/
url('../fonts/neues_bauen_demo-webfont.woff') format('woff'), /* chrome firefox*/
url('../fonts/neues_bauen_demo-webfont.ttf') format('truetype'), /* chrome firefox opera safari android ios 4.2+ */
url('../fonts/neues_bauen_demo-webfont.svg#NeuesBauenDemo') format('svg'); /* ios 4.1- */
font-weight: normal;
font-style: normal;
}
/* 使ç¨èªå®ä¹åä½ */
h2.neuesDemo {
font-family: 'NeuesBauenDemo'
}
</style>
</head>
<body>
<h2 class="neuesDemo">Neues Bauen Demo</h2>
</body>
</html>
4ãè·ååä½ååä½æ ¼å¼è½¬æ¢
1ï¼è·ååä½çç½ç«ï¼Google Web FontsåDafont.comï¼å½ç¶ç½ä¸ä¹è¿æå«çä¸è½½åä½çå°æ¹ï¼è¿ä¸ªDemo使ç¨çæ¯Dafont.comçSingle Maltaåä½ï¼è¿æ ·å°±å¯ä»¥å°è¿éä¸è½½Single Malta
2ï¼@font-faceæéç.eot,.woff,.ttf,.svgåä½æ ¼å¼
ç¿»å¢å°è¯¥ç½ç«ï¼https://www.fontsquirrel.com/tools/webfont-generator
è¿æ ·å°±å¯ä»¥è·åä¸åæ ¼å¼çåä½ã
åæ: http://www.w3cplus.com/content/css3-font-face © w3cplus.com
5. å¼ç¨Googleçåä½
该åä½æ¯ä»Googleç线ä¸åä½apiä¸è·åçï¼å¯ä»¥éè¿linkæ ç¾å¼ç¨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href='http://fonts.googleapis.com/css?family=Condiment'>
<style>
.myheader {
font-family: Condiment, cursive;
font-size: 48px;
text-align: center;
}
</style>
</head>
<body>
<div class="myheader"> Test my own text !</div>
</body>
</html>