【Web前端HTML5&CSS3】12-字型

筆記來源：尚矽谷Web前端HTML5&CSS3初學者零基礎入門全套完整版

目錄

• 字型
  • 1. 字型相關的樣式
  • 2. font-family
  • 3. 幾種字型
    • 手寫體
    • 藝術體
    • 亂碼字型
    • 中文字型
  • 4. @font-face
  • 5. 圖示字型（iconfont）
    • 圖示字型簡介
    • fontawesome
    • 圖示字型其他使用方式
      • 通過偽元素設定
      • 通過實體設定
    • iconfont

字型

1. 字型相關的樣式

我們前面講過字型的兩個屬性

• color用來設定字型顏色

• font-size字型的大小

  • em 相當於當前元素的一個font-size
  • rem 相對於根元素的一個font-size

當然，字型的屬性並不止這些

2. font-family

font-family 字型族（字型的格式）

• serif 襯線字型

  

• sans-serif 非襯線字型

  

• monospace 等寬字型

  

• cursive 手寫體

  

• fantasy 夢幻字型

  

上述字型均不表示具體的某種字型，而是字型的分類

我們經常使用的一些字型，如微軟雅黑、黑體、楷體、宋體、Consolas等，才是具體的某種字型

也就是說，font-family 指定字型的類別，瀏覽器會自動使用該類別下的字型

font-family可以同時指定多個字型，多個字型間使用，隔開

字型生效時優先使用第一個，第一個無法使用則使用第二個，以此類推

font-family: 'Courier New', Courier, monospace

3. 幾種字型

我是亂分類的，隨便看看就好

手寫體

Indie Flower

Ink Free

Nanum Pen

MV Boli

Segoe Print

Shadows Into

藝術體

Barrio

Julius Sans One

Lobster

Monoton

Poiret One

亂碼字型

MT Extra

Symbol

Webdings

Wingdings

中文字型

方正粗黑宋簡體

微軟雅黑

黑體

楷體

宋體

仿宋

4. @font-face

我們除了可以使用系統自帶的字型樣式外，還可以在伺服器端自定義字型位置

@font-face可以將伺服器中的字型直接提供給使用者去使用

@font-face {
    /* 指定字型名字 */
    font-family: 'myFont1';
    /* 伺服器中字型路徑 */
    src: url('/font/ZCOOLKuaiLe-Regular.woff'),
        url('/font/ZCOOLKuaiLe-Regular.otf'),
        url('/font/ZCOOLKuaiLe-Regular.ttf') format('truetype');/* 指定字型格式，一般不寫 */
}

p {
    font-size: 30px;
    color: salmon;
    font-family: myFont1;
}

問題

1. 載入速度：受網路速度影響，可能會出現字型閃爍一下變成最終的字型
2. 版權：有些字型是商用收費的，需要注意
3. 字型格式：字型格式也有很多種（woff、otf、ttf），未必相容，可能需要指定多個

5. 圖示字型（iconfont）

圖示字型簡介

在網頁中經常需要使用一些圖示，可以通過圖片來引入圖示但是圖片大小本身比較大，並且非常的不靈活

所以在使用圖示時，我們還可以將圖示直接設定為字型，然後通過@font-face的形式來對字型進行引入

這樣我們就可以通過使用字型的形式來使用圖示

fontawesome

官方網站：https://fontawesome.com/

下載解壓完畢之後，直接將css和webfonts移動到專案中即可使用

示例

<link rel="stylesheet" href="/font/fontawesome/css/all.css">
<style>
    i {
        color: green;
    }

    .fa-venus-mars,
    .fa-mars-double {
        color: red;
    }

    .fa-html5 {
        color: #E34D22;
    }

    .fa-css3 {
        color: blue;
    }

    .fa-js {
        color: #D1B514;
    }
</style>

<!-- 大小 -->
<i class="fab fa-weixin fa-lg"></i>
<i class="fab fa-weixin fa-2x"></i>
<i class="fab fa-weixin fa-3x"></i>
<br>

<!-- 邊框 -->
<i class="fab fa-weixin fa-2x fa-border"></i>
<br>

<!-- 旋轉 -->
<i class="fab fa-weixin fa-2x  fa-rotate-90 "></i>
<!-- 水平對稱 -->
<i class="fab fa-weixin fa-2x fa-flip-horizontal "></i>
<!-- 垂直對稱 -->
<i class="fab fa-weixin fa-2x fa-flip-vertical "></i>
<br>

<!-- 動畫 -->
<i class="fa fa-venus-mars fa-3x fa-spin"></i>
<i class="fa fa-mars-double  fa-3x fa-pulse"></i>
<br>

<!-- 列表 -->
<ul class="fa-ul">
    <li><i class="fa-li fa fa-check-square"></i>can be used</li>
    <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
    <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>
<br><br><br>

<!-- 組合 -->
<span class="fa-stack fa-lg">
    <i class="fab fa-html5 fa-stack-1x fa-10x"></i>
    <i class="fab fa-css3 fa-stack-1x fa-4x"></i>
    <i class="fab fa-js fa-stack-1x fa-2x"></i>
</span>

效果

其中fas/fab是免費的，其他是收費的

圖示字型其他使用方式

通過偽元素設定

1. 找到要設定圖示的元素通過::before或::after選中
2. 在content中設定字型的編碼
3. 設定字型的樣式
   • fab：font-family: 'Font Awesome 5 Brands';
   • fas：font-family: 'Font Awesome 5 Free'; font-weight：900;

示例

<style>
    .poem {
        width: 200px;
        height: 300px;
        margin: auto;
    }

    li {
        list-style: none;
        margin-left: -40px;
    }

    li::before {
        content: '\f130';
        /* font-family: 'Font Awesome 5 Brands'; */
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        margin-right: 10px;
        color: gray;
    }
</style>

<div class="poem">
    <h1>武陵春·春晚</h1>
    <p> [宋] 李清照</p>
    <ul>
        <li>風住塵香花已盡，</li>
        <li>日晚倦梳頭。</li>
        <li>物是人非事事休，</li>
        <li>欲語淚先流。</li>
        <li>聞說雙溪春尚好，</li>
        <li>也擬泛輕舟。</li>
        <li>只恐雙溪舴艋舟，</li>
        <li>載不動、許多愁。</li>
    </ul>
</div>

效果

通過實體設定

通過實體來使用圖示字型：&#x圖示編碼;

示例

<i class="fas">&#xf025;</i>

效果

iconfont

官方網站：https://www.iconfont.cn/

iconfont是阿里的一個圖示字型庫，海量圖示庫，圖示字型非常豐富

但是版權有點模橫兩可，如果需要商用，最好聯絡作者

不過一般情況下，公司企業都會有自己的UI設計團隊，會自己去進行設計

這裡使用方式大同小異，不過

• iconfont需要新增購物車後再新增至專案然後下載，下載包中有demo.html，詳細介紹了使用方式
• iconfont也提供了一種線上方式，直接在我的專案中選擇線上連結可以複製出一份@font-face的css程式碼

後續步驟與前面介紹的一致

示例

<!-- <link rel="stylesheet" href="/font/iconfont/iconfont.css"> -->
<style>
    i.iconfont {
        font-size: 100px;
    }

    p::before {
        content: '\e811';
        font-family: 'iconfont';
        font-size: 50px;
    }
    
    /* 3、通過線上連線：這裡link和@font-face擇其一即可  */
    @font-face {
        font-family: 'iconfont';
        /* Project id 2580407 */
        src: url('//at.alicdn.com/t/font_2580407_c0kpuhebb7r.woff2?t=1622373966454') format('woff2'),
            url('//at.alicdn.com/t/font_2580407_c0kpuhebb7r.woff?t=1622373966454') format('woff'),
            url('//at.alicdn.com/t/font_2580407_c0kpuhebb7r.ttf?t=1622373966454') format('truetype');
    }
</style>

<!-- 1、通過字元實體設定 -->
<i class="iconfont">&#xe810;</i>
<i class="iconfont">&#xe811;</i>
<i class="iconfont">&#xe812;</i>
<i class="iconfont">&#xe813;</i>

<!-- 2、通過偽元素設定 -->
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Totam deserunt tempore fugit quos eaque, ipsa rerum
    suscipit iure cumque aspernatur esse cupiditate nihil quas nulla odit? Sequi accusantium labore maiores.</p>

效果