### 1.浏览器对字体格式的支持 | 浏览器类型 | 支持格式 | |-----|-----| | IE6 | 仅支持.eot格式 | | IE7 | 仅支持.eot格式 | | IE8 | 仅支持.eot格式 | | Firefox 3.5 | 支持.ttf、.otf格式 | | Firefox 3.6 | 支持.ttf、otf、WOFF格式 | | Chrome | 支持.ttf、.otf、.svg格式 | | Sagari | 支持.ttf、.otf、.svg格式 | | Opera | 支持.ttf、.otf、.svg格式 | ### 2.Windows自带字体 windows自带字体在C:\Windows\Fonts目录下,字体格式为.ttf. ### 3.字体格式转换 - 第一步: [https://onlinefontconverter.com/](https://onlinefontconverter.com/) - 第二步:勾选font-face - 第三步:上传.ttf(或者其他格式字体文件) - 第四步:转换,完成后下载. - 比如上传毛泽东字体的.ttf文件,转换完成后生成以下字体: ![这里写图片描述](https://box.kancloud.cn/2016-04-06_5704adbc6bb65.jpg "") ### 4.嵌入自定义字体方法 打开font.css可以大致是这个样子: ~~~ @font-face { font-family: 'mzd'; src: url('mzd.eot'); src: url('mzd.eot?#iefix') format('embedded-opentype'), url('mzd.woff2') format('woff2'); font-weight: normal; font-style: normal; } ~~~ 在HTML中导入该font.css文件,同时把生成的字体文件复制过去,保证路径正确. ### 实例及代码 ![这里写图片描述](https://box.kancloud.cn/2016-04-06_5704adbc877c5.jpg "") ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字体转换</title> <link rel="stylesheet" type="text/css" href="font.css"> <style type="text/css"> body{ font-family: mzd;} p{font-size: 32px;} h2{color:red;} </style> </head> <body> <h1> 沁园春•长沙</h1> <h2>毛泽东 </h2> <p>独立寒秋,湘江北去,橘子洲头.</p> <p>看万山红遍,层林尽染;漫江碧透,百舸争流。</p> <p>鹰击长空,鱼翔浅底,万类霜天竞自由.</p> <p>问苍茫大地,谁主沉浮?</p> </body> </html> ~~~