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

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

目錄

• 字體
  • 1. 字體相關的樣式
  • 2. font-family
  • 3. 幾種字體
    • 手寫體
    • 藝術體
    • 亂碼字體
    • 中文字體
  • 4. @font-face
  • 5. 圖標字體（iconfont）
    • 圖標字體簡介
    • fontawesome
    • 圖標字體其他使用方式
      • 通過偽元素設置
      • 通過實體設置
    • iconfont
  • 6. 行高
    • 行高line height
    • 字體框
    • 字體的簡寫屬性
  • 7. 文本對齊方式
    • 水平對齊
    • 垂直對齊

字體

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>

效果

6. 行高

行高line height

文字占有的實際高度，可以通過line-height來設置行高

• 可以直接指定一個大小 px/em
• 也可以直接為行高設置一個小數（字體大小的倍數）

行高經常還用來設置文字的行間距：行間距 = 行高 - 字體大小

字體框

字體框就是字體存在的格子，設置font-size實際上就是在設置字體框的高度

行高會在字體框的上下平均分配

示例

border: 1px black solid;
font-size: 100px;
/* line-height: 100px; */

不指定行高時，content高度131.556px：說明line-height默認值大約是1.31 ~ 1.32(倍數)

指定行高時，content高度99.556px：少了0.444px，並且字母p下面溢出

存疑問題

經測試，line-height大約比100.444px略大一點時，content高度才會大於100px，暫未知原因

字體的簡寫屬性

font 可以設置字體相關的所有屬性：

font: font-style font-variant font-weight font-size/line-height font-family

其中某些值可以不寫，會用默認值

默認值

屬性	默認值	其他常用值
font-style	normal	italic
font-variant	normal	small-caps
font-weight	normal	bold
font-size	medium	small、large
line-height	normal
font-family	取決於瀏覽器

示例 1

/* font-size: 50px;
font-family: 'Courier New', Courier, monospace; */
font: 50px "Courier New", Courier, monospace;

示例 2

/* small-caps值設置小型大寫字母字體，所有小寫變大寫，同時字體尺寸更小（了解即可） */
font: bold small-caps italic 50px "Courier New", Courier, monospace;

注意 Pay Attention：簡寫屬性省略的值會使用默認值，所以會覆蓋前面的非簡寫屬性（不僅僅對於字體而言）

7. 文本對齊方式

水平對齊

text-align 文本的水平對齊

text-align屬性值	對齊方式說明
left	左側對齊
right	右側對齊
center	居中對齊
justify	兩端對齊

left 左側對齊

right 右側對齊

center 居中對齊

justify 兩端對齊

垂直對齊

vertical-align 設置元素垂直對齊的方式

vertical-align 屬性值	對齊方式說明
baseline	基線對齊
top	頂部對齊
bottom	底部對齊
middle	居中對齊

baseline 基線對齊

top 頂部對齊

bottom 底部對齊

middle 居中對齊

這里的居中對齊高度 = 基線高度 + x 的高度 / 2

這種居中對齊並非實際上的居中對齊，一般也不會用這種方式對文字進行垂直方向的對齊

vertical-align 還可以設置 px 值設置垂直對齊方式

vertical-align: 10px;

圖片的垂直對齊問題

<style>
  .imgDiv {
    border: 5px seagreen solid;
  }

  .imgDiv img {
    width: 400px;
    height: 300px;
  }
</style>

<div class="imgDiv">
  <img src="/assets/news.png" alt="" />
</div>

明顯默認情況下，圖片底部有一定縫隙，我們稍作修改，給 img 元素添加vertical-align屬性值

/* 只要不是基線對齊，就能消除底部縫隙 */
vertical-align: top;
vertical-align: bottom;
vertical-align: middle;

Q：為什么圖片會有縫隙？

A：圖片屬於替換元素，特點與文本一致，也有自己的基線，默認也是基線對齊。而基線位置不在最底部，所以會出現縫隙