網站中，字體扮演了其中重要的一個角色，選用什么樣的字體也是一個相對比較重要的工作。不同的電腦，所安裝的字體不盡相同。那我們在做網站中該如何選擇字體呢？

系統自帶的字體包括：

中文字體：微軟雅黑、宋體、黑體；
英文字體：Arial、Helvetica

使用這些字體自帶的字體可以高度的還原設計稿上的文字效果。

我們在網站制作過程中，因頁面設計所需，常常會碰到一些特殊的字體，雖然引用了，卻無法在網頁中顯示和設計稿一樣的字體。這是由于用戶的電腦并沒有安裝這些特殊字體。

這種情況下，我們可以通過以下方法讓其正常顯示。

切成圖片的方式

優點：簡單、快捷、方便
缺點：不易更改（需要會ps）、放大縮小會失真、不利用優化
適用于不常更新的區域，如首頁的標題、固定的欄目標題等。
如下圖“聯系”兩字

外部字體引用的方式

優點：方便后期用戶操作，直接更改文字即可、利于優化
缺點：中文字體較大，會影響加載速度。
如下圖數字

使用方法：

1）下載所需的字體樣式，格式有所區別，常用.TTF、.woff、.OTF等格式

可通過在線字體轉換，將字體格式轉化為我們需要的格式。

字體格式轉換一：

https://www.fontsquirrel.com/tools/webfont-generator

字體格式轉換二：

https://www.fontke.com/tool/convfont/

2）css中引用字體格式：

@font-face { 
  font-family: '字體名稱'; 
  src: url('../fonts/字體名稱.eot'); 
  src: url('../fonts/字體名稱.eot?#iefix') format('embedded-opentype'), 
  url('../fonts/字體名稱.woff2') format('woff2'), url('../fonts/字體名稱.woff') format('woff'), 
  url('../fonts/字體名稱.svg#字體名稱') format('svg'); font-weight: normal; font-style: normal; 
}

3）引用：

.num {
        font-family: 字體名稱；
}

由于中文字體體積較大，預覽下載需要一定的時間，打開會比較慢，英文字體體積本身比較小，不存在這樣的問題。

前端開發過程中難免會用到特殊字體，如何引入特殊字體？

1. 首先你得有字體文件，文件格式為,TTF、OTF、EOT、SVG
2. 將字體文件放入本地文件夾中或者服務器上
3. css中引入，以下為引入方法

@font-face {
  font-family: 'icomoon'; // 這里自定義字體名稱 
  src:  url('fonts/icomoon.eot?'); // 文件路徑或者服務器路徑
  src:  url('fonts/icomoon.eot?') format('embedded-opentype'), // format屬性：字體的格式 主要用于瀏覽器識別
    url('fonts/icomoon.ttf?') format('truetype'),
    url('fonts/icomoon.woff?') format('woff'),
    url('fonts/icomoon.svg?') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* 調用 */
body{
    font-family:'icomoon'
}

注：eot為IE專用，ttf官方說是蘋果和微軟為PostScript 而開發的字體格式，個人理解為通用格式。woff是壓縮過后輕量級，svg對文本支持不太好