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

 

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

畢業前最后一節課，老師對學生說：“我再看看你們。”

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

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

  當然，除了不舍，還有希冀。

  正如圖中老師對學生說的那句：“你們再看看書。”

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

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

  這樣充滿愛的目送，我一定是擁有過的，可惜的是，在我擁有的時候不曾有太強烈的感受，直到畢業多年，才在回憶中享用。譬如我在大學畢業后回東北故鄉探親的時候，小學班主任遠遠看見我並喊我名字，說看背影也看得出是自己曾經教過的學生，說這些話的時候，班主任老師眼里滿是真摯。

  那之后我在反問自己，如果是我遠遠看到老師的背影，我認得出么？恐怕不能。譬如我的初中語文老師在多年之后托人打聽我的手機號碼，同我聯系，只是想知道我過得怎么樣，她說她會為我驕傲，而我呢？接到語文老師電話那一刻，我除了感動，更多的是羞愧，我可能對老師也有一樣的牽掛？上述種種，應了一句“當時只道是尋常”，老師對我們那份愛，那份不舍與希冀，總是在分別之后，才被感知。

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

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

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

</span>

 

 

 

1.2.css

 

    <!--web字體-->
    <style>
        /*第一步：使用font-face聲明字體
        記得修改自己的路徑*/
        @font-face {
            font-family: 'webfont';
            font-display: swap;
            src: url('../fonts/webfont.eot'); /* IE9 */
            src: url('../fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('../fonts/webfont.woff2') format('woff2'),
            url('../fonts/webfont.woff') format('woff'), /* chrome、firefox */
            url('../fonts/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url('../fonts/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
        }

        /*第二步：定義使用 webfont 的樣式*/
        .web-font {
            font-family: "webfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }



    </style>

 

 

 

2.字體圖標

2.1.html

 

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

 

 

 

2.2.css

 

    <!--字體圖標-->
    <style>
        /*第一步：拷貝項目下面生成的 @font-face*/
        @font-face {
            font-family: 'iconfont';
            src: url('../fonts/iconfont.eot');
            src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),
            url('../fonts/iconfont.woff2') format('woff2'),
            url('../fonts/iconfont.woff') format('woff'),
            url('../fonts/iconfont.ttf') format('truetype'),
            url('../fonts/iconfont.svg#iconfont') format('svg');
        }


        /*第二步：定義使用 iconfont 的樣式*/
        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;

            margin: 1px;
        }

        /*笑臉*/
        .smile::before{
            content: "\e73d";
            font-size: 30px;
            color: red;
        }
        /*消息*/
        .news::before{
            content: "\e740";
            font-size: 50px;
            color: #ccc;
        }
        /*喜歡*/
        .love::before{
            content: "\e742";
        }
        /*我的*/
        .my::before{
            content: "\e743";
        }
        /*歷史*/
        .history::before{
            content: "\e745";
        }
        /*查找*/
        .seek::before{
            content: "\e74b";
        }
        /*設置*/
        .set::before{
            content: "\e753";
        }

    </style>

 

 

 

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