字型

1. 字型相關的樣式

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

• color用來設定字型顏色

• font-size字型的大小

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

2. font-family

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

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

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

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

說明：

•   如果字型是中文漢字，要寫在雙引號裡；如："微軟雅黑"；"Microsoft YaHei"
•   如果字型是由多個英文單片語成的，也要寫在雙引號裡；如："Times New Roman"；
•   如果字型是一個英文單片語成的，就直接寫，不用加雙引號；如： Arial
•   可以同時設定多個字型，字型和字型之間用，分隔；如："宋體", Arial;

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

               注：                           -> 中文字型對英文單詞也是起作用的；                           -> 英文字型對中文不起作用；                           -> 可以同時設定多個字型；                            -> 如果設定了多個字型，瀏覽器會先識別前面的字型，如果有這個字型，就以這個字型顯示，如果沒有，就會尋找下一個字型，如果有，就以第二個字型顯示，如果沒有，就繼續尋找下一個字型，如果都沒有，就會以瀏覽器預設字型顯示； CSS

font-family: "Courier New", Courier, monospace;
 

4. @font-face

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

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

CSS

@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://www.iconfont.cn/

字型圖示-Unicode引用的方法一

@font-face {             font-family: <YourWebFontName>;   設定字型名稱             src: <source> [<format>][, []]*;  銀鷺字型路徑 新增字型格式         }
        如：             @font-face {             font-family: "iconfont";             src: url('iconfont.ttf') format('truetype');             }

示例

HTML

效果

字型圖示-Unicode引用的方法二

字型圖示-通過class名字引用

圖示字型其他使用方式

通過偽元素設定

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

示例

HTML

<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圖示編碼;

示例

HTML

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

效果

iconfont

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

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

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

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

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

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

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

示例

HTML

<!-- <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實際上就是在設定字型框的高度

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

示例

CSS

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

CSS

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

示例 2

複製程式碼  

• 1
• 2

CSS

/* 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 值設定垂直對齊方式

複製程式碼  

• 1

CSS

vertical-align: 10px;

圖片的垂直對齊問題

HTML

<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屬性值

CSS

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

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

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