h5-web字體和字體圖標

想要使用能夠在：

https://www.iconfont.cn/webfont?spm=a313x.7781069.1998910419.d81ec59f2#!/webfont/index　　：是web字體

https://www.iconfont.cn/collections/index?spm=a313x.7781068.0.0&type=3　　　　：是字體圖標

下載

 

字體圖標和web字體都是下載了那個那個能夠用：好比這些字體只有我下載的這幾個字纔有web字體的效果

1.web字體

1.1.html

 

 1 <!--第三步：爲文字加上對應的樣式 -->
 2 <span class="web-font">

畢業前最後一節課，老師對學生說：「我再看看大家。」

  即將說再見，老師不捨，要「再看看」。是啊，人生路那麼漫長，可老師能陪伴學生走過的，終究只有一段路。這段路是艱辛的，傳道、授業、解惑，都是這條路上必經。老師要對學生們傾囊相授，讓學生從不知到知之；要對學生正確引導，讓學生不只學會知識，還要樹立正確的人生觀、價值觀；要對學生倍加關懷，讓學生感受到他們不只在得到知識，尋求真理，更在獲得老師的愛。

  「捧着一顆心來，不帶半根草去」，這是著名人民教育家陶行知先生的名言，陶行知先生如此，圖中的老師如此，普天之下的老師也莫不如此。也因着這一顆心，纔有了「我再看看大家」的那份不捨。

  固然，除了不捨，還有希冀。

  正如圖中老師對學生說的那句：「大家再看看書。」

  對於老師而言，即將揮手道別的是學生。老師但願學生再看看書，字短情長：再看看書，學生們才能更熟練地掌握所學知識，更好地應對考試，更穩健地走好將來的路。

  師生一回，學生們終究要遠行，老師能給他們的，是不捨，是希冀，是一場充滿愛的目送。

  這樣充滿愛的目送，我必定是擁有過的，惋惜的是，在我擁有的時候未曾有太強烈的感覺，直到畢業多年，纔在回憶中享用。譬如我在大學畢業後回東北故鄉探親的時候，小學班主任遠遠看見我並喊我名字，說看背影也看得出是本身曾經教過的學生，說這些話的時候，班主任老師眼裏盡是真摯。

  那以後我在反問本身，若是是我遠遠看到老師的背影，我認得出麼？恐怕不能。譬如個人初中語文老師在多年以後託人打聽個人手機號碼，同我聯繫，只是想知道我過得怎麼樣，她說她會爲我驕傲，而我呢？接到語文老師電話那一刻，我除了感動，更多的是羞愧，我可能對老師也有同樣的牽掛？上述種種，應了一句「當時只道是尋常」，老師對咱們那份愛，那份不捨與希冀，老是在分別以後，才被感知。

  老師們知道的，是分別時，他們對學生們那一場愛的目送。

  老師們不知道的，是分別後，他們也正在或終將成爲學生們心中一道愛的風景，隨着時光永恆。

  今天，因着圖中這一場愛的目送，也讓我想對曾經教過個人老師說一句：「請讓我再看看書，也請讓我再看看您！」

21 </span>

 

 

 

1.2.css

 

 1     <!--web字體-->
 2     <style>
 3         /*第一步：使用font-face聲明字體
 4         記得修改本身的路徑*/
 5         @font-face {
 6             font-family: 'webfont';
 7             font-display: swap;
 8             src: url('../fonts/webfont.eot'); /* IE9 */
 9             src: url('../fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
10             url('../fonts/webfont.woff2') format('woff2'),
11             url('../fonts/webfont.woff') format('woff'), /* chrome、firefox */
12             url('../fonts/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
13             url('../fonts/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
14         }
15 
16         /*第二步：定義使用 webfont 的樣式*/
17         .web-font {
18             font-family: "webfont" !important;
19             font-size: 16px;
20             font-style: normal;
21             -webkit-font-smoothing: antialiased;
22             -moz-osx-font-smoothing: grayscale;
23         }
24 
25 
26 
27     </style>

 

 

 

2.字體圖標

2.1.html

 

1 <!--第三步：挑選相應圖標並獲取字體編碼，應用於頁面-->
2 <span class="iconfont smile"></span>
3 <span class="iconfont news"></span>
4 <span class="iconfont love"></span>
5 <span class="iconfont my"></span>
6 <span class="iconfont history"></span>
7 <span class="iconfont seek"></span>
8 <span class="iconfont set"></span>

 

 

 

2.2.css

 

 1     <!--字體圖標-->
 2     <style>
 3         /*第一步：拷貝項目下面生成的 @font-face*/
 4         @font-face {
 5             font-family: 'iconfont';
 6             src: url('../fonts/iconfont.eot');
 7             src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),
 8             url('../fonts/iconfont.woff2') format('woff2'),
 9             url('../fonts/iconfont.woff') format('woff'),
10             url('../fonts/iconfont.ttf') format('truetype'),
11             url('../fonts/iconfont.svg#iconfont') format('svg');
12         }
13 
14 
15         /*第二步：定義使用 iconfont 的樣式*/
16         .iconfont {
17             font-family: "iconfont" !important;
18             font-size: 16px;
19             font-style: normal;
20             -webkit-font-smoothing: antialiased;
21             -moz-osx-font-smoothing: grayscale;
22 
23             margin: 1px;
24         }
25 
26         /*笑臉*/
27         .smile::before{
28             content: "\e73d";
29             font-size: 30px;
30             color: red;
31         }
32         /*消息*/
33         .news::before{
34             content: "\e740";
35             font-size: 50px;
36             color: #ccc;
37         }
38         /*喜歡*/
39         .love::before{
40             content: "\e742";
41         }
42         /*個人*/
43         .my::before{
44             content: "\e743";
45         }
46         /*歷史*/
47         .history::before{
48             content: "\e745";
49         }
50         /*查找*/
51         .seek::before{
52             content: "\e74b";
53         }
54         /*設置*/
55         .set::before{
56             content: "\e753";
57         }
58 
59     </style>

 

 

 

1.得自定義生成對應的字體文件的內容2.使用網絡源生成web字體3.使用    a。定義自定義字體    b。定義樣式使用自定義字體    c。指定樣式，調用樣式