3.13 文字樣式

font-size 文字大小

單位介紹：

  • px：固定單位

  • em 與 %：相對單位，相較於父元素

  • rem：相對單位，相較於 <html> 根元素

html：

<!doctype html>
<html>
  <head>
  </head>
  <body>
  
    <div class="text1">
      文字1
      <div class="text2">文字2</div>
    </div>
    
  </body>
</html>

css：

html{
  font-size: 10px;
  /*  或  font-size: 62.5%;  */
}

div.text1{
  font-size: 2rem; /* 相較於根元素，結果：20px */
}
div.text2{
  font-size: 2em;  /* 相較於父元素，結果：40px */
  /* font-size: 200%; */
}

範例：

若將 em 單位用在其它 css 屬性，例如圓角(border-radius)，那就是直接看該元素的文字大小。

<div class="block">
  這是 div 的文字
  <p>這是段落的文字</p>
</div>
div.block{
  border: 1px solid black;
}

div.block p{
  border: 3px solid red;
  height: 100px;
  font-size: 30px;
  
/*   border-radius: 15px; */
  /* 上面這行，也可以改成寫以下這行 */
  border-radius: .5em; /* 此元素的文字大小：30px * 0.5 */
}

例：

font-weight 文字粗體

文字粗體，值有 100、200、300、400(normal)、500、600、700(bold)、800、900。並不是設定就有效，甚至其實看不太出來，常用的只有 normal 及 bold。其它要看字體本身有沒有支援。

範例：

font-style 字體樣式

可選的值有：normal 和 italic。

normal 是預設狀態，即一般字體；italic 會呈現斜體。

範例：

text-decoration 文字畫線

可選的值有：

  • underline：下方畫線。

  • overline：上方畫線。

  • line-through：刪除線。

  • none：沒有任何的線。

其它用法：

  • 另外可以設定線的粗細、類型、顏色。

  • 如果是 underline 的時候，可以設定 text-underline-offset 來指定拉開的距離。

text-transform 英文字大小寫

這主要是用在英文字母才會有效。可選的值有：

  • capitalize：每個英文單字首字母強制大寫。

  • uppercase：全部英文字都變大寫。

  • lowercase：全部英文字都變小寫。

  • none：不做任何變化。這是預設值。

text-align 文字水平對齊

可選的值有：

  • left：預設值，置左。

  • right：置右。

  • center：置中。

  • justify：區塊的兩側文字對齊。

text-indent 首行縮排

預設值為 0。可設定首行縮排，例：

line-height 文字行高

指定倍數或固定單位，建議用倍數觀念來指定。

white-space 關於空格

該如何處理元素內的空白字元。

常用的有以下：

  • normal：預設值，連續的空白字元會被合併(collapse)。

  • nowrap：強制不會換行。

  • pre：連續的空白字元(包含斷行)都會被保留。(註：在 code pen 上實測此屬性值不太正確，因為沒有保留空白字元。)

word-break 文字斷行

中文字比較沒有這個問題，英文字就會有問題，常見可設定的有：

  • normal：這是預設。

  • break-all：以字母來斷行。

當文字內容是網址的時候，可能會遇到超出去的問題，例：

color 文字顏色

關鍵字

p{
  color: red;
}

16進位

p{
  color: #234567;
}

rgba 或 rgb

  • r：red (0 ~ 255)

  • g：green (0 ~ 255)

  • b：blue (0 ~ 255)

  • a：alpha 不透明度，0 ~ 1 的小數，1 為完全不透明，0 為完全透明。

p{
  color: rgb(100, 255, 100);
  /* 或 */
  color: rgba(100, 255, 100, 1);
}

hsla 或 hsl

  • h：Hue 色相。0 ~ 360

  • s：Saturation 飽合度。0% ~ 100%，一個顏色若飽合度愈高，愈接近純色；一個顏色若飽合度低，就愈接近灰色。

  • l：Lightness 亮度。0% ~ 100%，一個顏色若沒有亮度，就會是黑色；一個顏色若亮度最高，就是白色。

  • a：Alpha 不透明度。0 ~ 1 的小數，1 為完全不透明，0 為完全透明。

範例：

font-family 指定字體

全站通用

一般是直接針對 body 標籤來設定：

body{
  font-family: "微軟正黑體", "BiauKai", "helvetica";
}

以上述為例，瀏覽器會優先用「微軟正黑體」，如果電腦沒有這個字體，就繼續往後找，下一個是「BiauKai」(標楷體)，如果有，就使用這個字體。依此類推。

情況：英文字套用 helvetica，中文字套用 BiauKai：

body{
  font-family: "helvetica", "BiauKai";
}

有些字體例如 BiauKai 這個字體中英文都有；然而 helvetica 只有英文字體。那以此情況為例的話，英文字就會套用 helvetica 字體，中文就會套用 BiauKai 字體。

針對特定元素

如果需要特別針對某元素，那就直接針對該元素去指定字體即可：

p.para1{
  font-family: "helvetica";
}

襯線體、無襯線體

p.para1{
  font-family: serif; /* 襯線體 */
}
p.para1{
  font-family: sans-serif; /* 無襯線體 */
}

@font-face 字體檔自行載入

網頁上的字體檔副檔名，儘可能使用 woff 或 woff2 字體，較輕量，WOFF 說明文件參考。

透過 CSS 的 @font-face ，就可以使用自己的字體檔：

@font-face{
  font-family: "myFontLight"; /* 自訂名稱 */
  src: url("./fonts/xxx.woff2"); /* 字體檔路徑 */
}
@font-face {
  font-family: "myFontBold";
  src: url("./fonts/xxx.woff2");
}

語法示意：

<!DOCTYPE html>
<html lang="zh-Hant">
  <head>
    <meta charset="utf-8">
    <title>測試字體</title>
    <style>
      @font-face{
        font-family: "myFontLight";
        src: url("./fonts/xxx.woff2");
      }
      @font-face {
        font-family: "myFontBold";
        src: url("./fonts/xxx.woff2");
      }
      
      p.para{
        font-family: "myFontLight";
      }
      p.para2{
        font-family: "myFontBold";
      }
    </style>
  </head>
  <body>
    
  </body>
</html>

font-display 決定字體載入方式

可設定的有以下，記 swap 即可：

  • auto：由瀏覽器自行決定，通常會與 block 相同。

  • block：在字型未載入完全時，會有一部份的時間會由佔位空間留白，等到字型快載入完成時，出現預設字型，字型載入完成時，再一次替換。

  • swap：(結論用這個)。先出現預設的字型，然後字型邊下載邊替換。

  • fallback：先顯示預設字型，當字型載入完畢後，再一次替換，但如果下載時間過長的話(3秒為限)，就不會替換。

  • optional：會依照使用者的網路狀況，當網路速度太慢時，則直接使用預設的字型為主。

故 @font-face 裡以後都寫類似這樣：

@font-face{
  font-family: "myFontLight";
  src: url("./fonts/xxx.woff2");
  font-display: swap;
}
@font-face {
  font-family: "myFontBold";
  src: url("./fonts/xxx.woff2");
  font-display: swap;
}

其它資源

Google Fonts

例：請在 practice 資料夾下，建立 font.html 檔案，貼以下的程式：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 以下三行是從 Google Fonts 選的 Borel 字體，貼過來的 -->
    <!-- 網址是： https://fonts.google.com/specimen/Borel?category=Handwriting -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Borel&display=swap" rel="stylesheet">

    <style>
      p.para{
        font-family: "Borel";
      }
    </style>
  </head>
  <body>
    <p>Whereas disregard and contempt for human rights have resulted</p>
    <p class="para">Whereas disregard and contempt for human rights have resulted</p>
  </body>
</html>

Previous3.12 關於 Pseudo ClassNext3.14 關於溢載

Last updated