2-2 section1 線上字體應用

步驟

S1：網頁字型設定

  CSS 美化：

  /* CSS reset  ================================ */
  body {
    font-family: Arial, Verdana,"Microsoft JhengHei",微軟正黑體, sans-serif; 
  }

參考連結： ： 詳本網站【4-2 線上字體應用】單元

S2：線上字型設定

以 Google fonts為例，參考連結 Google fonts

Google fonts說明

S3：Icon Font 結合

S3-1：字體.css 檔案連結

以【Font Awesome 第6版 】網站為例

利用【Google搜尋 cdnjs.com】網站為例

  https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css

Awesome 參考網站

1. Awesome 【各版本】資訊

2. Awesome 【第6版 下載】資訊

3. Awesome 【第6版 樣式美化設定】資訊

Awesome 樣式名稱對照表

連結參考於 【第6版 Styling with Font Awesome#Full Style Names】

分類 Google翻譯 可用性 舊樣式 第6版後樣式名
Solid 堅硬的 Free Plan fas fa-solid
Regular 常規的 Pro Plans only(部份免費) far fa-regular
Light 光 Pro Plans only fal fa-light
Thin 薄的 Pro Plans only fat fa-thin
Duotone 雙色調 Pro Plans only fab fa-brands
Brands 品牌 Free Plan fab fa-brands 
  THML 標籤之下的 <head> 區： 

  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
    <link rel="stylesheet" href="./css/index.css">      <!-- 自訂的CSS，一定得放在所有CSS連結檔案之最下方 -->
    </head>

S3-2：查看參考網站使用介紹

查看參考網站使用介紹

S4：使用 unicode 結合

課程練習 icon【Font Awesome】

  CSS 美化：              <!-- 以下CSS美化，簡化不重要屬性值 -->

  /* section =================================== */
  h2::before {
    font-family:"Font Awesome 6 Free";
    content: "\f4ba";
  }

顯示結果：

S5：::before 與 圖片結合

  CSS 美化：

  /* section1  #intro 景點介紹 ==================== */
  h3::before {
    content: url(../img/h3_icon.png);         <!-- 圖片尺寸過大影響排版 -->
    content:"";
    background: url(../img/h3_icon.png) no-repeat;
    background-size: contain;
    width: 30px;
    height: 60px;
    display: inline-block;
    vertical-align: middle;
    transform: rotate(15deg);
  }

顯示結果：

結果

html 結構

  THML 標籤之下的 <head> 區： 

  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
    <link rel="stylesheet" href="./css/index.css">      <!-- 自訂的CSS，一定得放在所有CSS連結檔案之最下方 -->
  </head>

CSS 美化

  CSS 美化：              <!-- 以下CSS美化，簡化不重要屬性值 -->

  /* CSS reset  ================================ */
  @import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
  body {
    /* 如果網頁全部字型都套用，則置於最前方 */
    font-family: 'Indie Flower',system-ui,-apple-system,'Segoe UI','Microsoft JhengHei', 微軟正黑體, sans-serif; 
  }

  /* section =================================== */
  h2::before {
    font-family:"Font Awesome 6 Free";
    content: "\f4ba";
  }

  /* section1  #intro 景點介紹 ==================== */
  #intro div{
    font-family: 'Indie Flower';      /* 為不影響所有字型，置於欲改變元素上 */
  }
  h3::before {
    content:"";
    background: url(../img/h3_icon.png) no-repeat;
    background-size: contain;
    width: 30px;
    height: 60px;
    display: inline-block;
    vertical-align: middle;
    transform: rotate(15deg);
  }