CSS字體和文本相關

一 前言

目前在作IFE的練習，初步學習到CSS內容，因此作了總結。
本博文主要分爲兩部分，第一部分介紹CSS字體屬性，第二部分則介紹了文本經常使用屬性

二 字體屬性

2.1 字體系列

S1 首先介紹一下什麼是字體系列:

所謂字體系列,我理解的就同一字體下 的不一樣風格的具體字體的集合。通俗類比一下，咱們知道楷書下有不一樣風格的字體，好比顏體、柳體、瘦金體等等，這些是具體的不一樣風格的字體。可是，他們都屬於楷體，只是具體的細節有差別。這裏的楷體，就能夠看作

是一個單獨的字體系列。

S2 接下來介紹，CSS預約義的5種通用字體系列
  Serif字體: 有修飾性的襯線（修飾線條），並且字符之間是成比例的（寬度不一致）;
  Sans-serif字體: 沒有襯線，字符成比例;
  monospace字體: 每一個字符具備相同寬度的字體，一般用於代碼列表;
  Cursive字體: 模擬人類筆跡的字體，具備流動的鏈接筆畫;
  Fantasy字體: 裝飾性的各類 「浮誇」 字體

S3 定義字體系列的方法
使用font-family屬性來定義字體系列
  A1 能夠指定一個通用字體系列;
  A2 能夠指定一個具體的字體系列，注意當該具體字體系列在客戶端不可用時，瀏覽器會使用默認設置字體顯示;
因此，最好的方法是，結合特定字體名和通用字體系列，以實現平穩退化原則

S4 特別注意
若是一個字體名中有一個/多個空格/特殊字符如#、$之類的，須要用引號聲明字體，以下代碼例子:

p { font-family: "Trebuchet MS", Verdana, sans-serif; }

網頁安全字體
關於網頁安全字體的概念，參見MDN基本文本和字體樣式;

2.2 字體加粗

S1 首先介紹字體加粗屬性font-weight
  A1 值是關鍵字/100~900的整百數值，
  通常狀況下，400≈normal / 700≈bold，
  關於數值加粗的原理，詳情見 CSS權威指南P109 ,真正用的時候，通常直接用數值試一試便可

  A2 具備繼承性

S2 bolder/lighter屬性值的原理
  A1 肯定繼承自父元素的font-weight值;
  A2 選取比繼承的font-weight對應值 + 更粗一級數值中的 + 最小的數值;
  A3 若是繼承的font-weight值 已是 最大900/最小100，那麼bolder/lighter值保持不變

2.3 字體大小

S1 首先介紹字體大小屬性font-size
  A1 值能夠是 關鍵字/ length / percentage / em / rem
  關鍵字: 實際開發中不多使用
  em/百分比: 根據父元素的字體大小計算， 1em = 當前元素的父元素上 設置的字體大小
    由於具備繼承性，因此可能會致使縮放失控，好比:
    A 祖先元素:12px;
    B 父元素: 120%, 即 12 * 1.2 = 14.4px(可能會取整);
    C 子元素: 135%, 即 14.4 * 1.35 = 19.44px

  rem: 1rem 等於 HTML 中的根元素的字體大小,推薦使用

  A2 具備繼承性

S2 明確一個重要概念:
  A1 每種字體的字符設計大小通常都等於小於 其模板框em框大小;
  A2 font-size的做用就是設置給定字體的em框的大小，而不能保證明際顯示的字符大小

簡而言之，就是font-size負責的是模具的大小，而不是真正實際字符的大小

2.4 字體風格和變形

S1 字體風格屬性font-style
  A1 值能夠是 normal / italic/oblique (一般二者效果是同樣的，都是斜體)

S2 字體變形屬性font-variant
  A1 值能夠是 small-caps, 用於建立 小型大寫字母文本（具體效果見CSS權威指南P124）

S3 字體拉伸屬性font-stretch，瞭解便可
S4 字體大小調整屬性font-size-adjust，瞭解便可

2.5 字體相關屬性簡寫

S1 全部字體屬性的 集合屬性font
  A1 通常值是 font-style/font-weight/font-variant(可交換順序) + font-sieze + font-family

  A2 值還能夠是 line-height （不推薦合併寫，不利於維護）

  A3 值還能夠是 caption/icon/menu等系統字體設置，能夠創造出和默認操做系統同樣的字體效果 (見P131)

S2 特別注意，全部未顯式賦值的font值，都會被瀏覽器自動賦予默認值

2.6 字體匹配過程

S1 具體過程瞭解便可，見P132-133

3、文本屬性

3.1 縮進和水平對齊

S1 文本縮進屬性text-indent
  A1 值能夠是 length / em/百分比 (相對於包含塊的寬度值)
  其中，值的長度能夠是負值，從而創造出「懸掛縮進的效果」

  A2 應用於 塊級元素，沒法應用於行內元素&替換元素(若是想要行內元素有縮進效果，可使用左內邊距/外邊距)

  A3 縮進只應用於一個塊級元素的第一行內容

  A4 具備繼承性

S2 文本水平對齊屬性text-align
  A1 值能夠是 left / center /right / justify
  其中，justify表示兩端對齊文本 (P140)

  A2 應用於 塊級元素
  A3 具備繼承性

3.2 行高

S1 什麼是line-height屬性
  A1 指的是文本行之間的 最小基線距離，換言之，文本行間的距離可能比line-height值更大
  A2 行間距 = line-height值 - font-size值

S2 理解行內元素高度如何肯定(並不絕對精確，只是大概狀況)
  A1 font-size值， 肯定了 內容區大小;
  A2 line-height值，肯定了 行內框高度;
  A3 行框（從最高行內框的頂部 到 最低行內框的底部），肯定了 一行行內元素的高度

S3 屬性特色
  A1 值多是 length / em / number / normal
  normal值，一般狀況下是字體大小的 1.2倍 (font-size * 1.2)
  em/百分比，相對於的是 元素的字體大小(注意，不是父元素的字體大小，只有沒有顯式繼承該元素的fz,纔會根據fz繼承性向上找)

  A2 能夠應用於全部元素 (對於塊級元素和內聯元素的區別，詳見其餘博文)

  A3 能夠繼承
    由於具備繼承性，因此可能會有如下狀況: 繼承的div元素的line-height值小於 顯式設置的fz值，致使擁擠
    解決方法是，使用number做爲「繼承因子」，這樣各個元素都會根據本身的fz值，來計算line-height值了

3.3 垂直對齊

S1 文本垂直對齊屬性 vertical-align
  A1 值能夠是 middle/bottom等關鍵字 length / em/百分比 (相對於該元素的line-height值)
  A2 應用於 行內元素和替換元素(圖像/表單等)
  A3 不能夠繼承
  A4 注意，全部垂直對齊的元素都會影響行高，換句話說，一行元素的行高 會包含住垂直對齊的高度

S2 基線對齊狀況
  A1 對行內元素，基線對齊是指：元素的基線與其 父元素的基線 對齊;
  A2 對替換元素，基線對齊是指：元素的底端與其 父元素的基線 對齊 （由於替換元素壓根就沒有基線）
  這就會致使，可能圖像下方會出現一段空白的問題

  A3 百分比/em 對齊狀況
    會把 行內元素的基線 /替換元素的底邊，相對於父元素的基線升高/下降數值

S3 居中對齊狀況
  A1 對middle值，指的是： 元素行內框的中點 與其 父元素基線上方0.5ex處的一個點對齊;

S4 頂端/底端對齊狀況
  A1 對bottom值，指的是： 元素行內框的底部 與其 所屬行框的底部對齊;
  A2 對text-bottom值，指的是: 對行內元素的 行內文本內容區 對齊 + 對替換元素無效

3.4 字間隔 和 字母間隔

S1 字間隔屬性 word-spacing
  A1 值能夠是 length / em / normal
  A2 應用於 全部元素
  A3 用於修改字和字之間的距離，瞭解便可

S2 字母間隔屬性 letter-spacing
  A1 值能夠是 length / em / normal
  A2 應用於 全部元素
  A3 能夠用來製造出 突出強調的效果 (見P152)

3.5 文本轉換

S1 文本大小寫 轉換屬性 text-transform
  A1 值能夠是 uppercase等關鍵字
  A2 應用於 全部元素

3.6 文本裝飾

S1 文本裝飾線 屬性 text-decoration
  A1 值能夠是 underline等關鍵字
  A2 應用於 全部元素
  A3 不能夠繼承,但能夠 覆蓋下劃線樣式（P158）

3.7 文本陰影

S1 文本陰影 屬性 text-shadow
  A1 值能夠是 color + 右偏移長度 + 下偏移長度 + [模糊半徑]
  A2 應用於 全部元素
  A3 不能夠繼承

S2 能夠實現多重陰影

3.8 其餘

S1 文本空白符和換行屬性 white-space
  A1 值能夠是 pre / nowrap / pre-wrap / pre-line
  值爲pre時：保留HTML內容中的空格
  值是nowrap: 阻止元素內的文本換行

  A2 應用於 全部元素
  A3 不能夠繼承
  A4 具體表格見 P162

4、參考文檔

  1 CSS權威指南;
  2 MDN的 基本文本和字體樣式;
  3 CSS 文本;
  4 CSS 字體;