### 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文件,轉換完成后生成以下字體：
### 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文件，同時把生成的字體文件復制過去，保證路徑正確.
### 實例及代碼
~~~
<!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>
~~~
