[TOC] <br/><br/><br/> # <b style="color:#4F4F4F;">簡介說明</b> ``` 版本：字體文本 作用：字體文本 ``` <br/> # <b style="color:#4F4F4F;">字體文本</b> <br/> # <span style="color:#619BE4">font</span> ***** 定義字體的屬性，最后必須要有font-family屬性 <br/> ### 參數說明 <b style="color:#808080;">font-style:</b> * 類型：字符串 * 默認值：無 * 描述：規定字體樣式 * 可選值：[ normal | italic | oblique | inherit ] <b style="color:#808080;">font-variant:</b> * 類型：字符串 * 默認值：無 * 描述：設置小型大寫字母的字體顯示文本 * 可選值：[ normal | small-caps | inherit ] <b style="color:#808080;">font-weight:</b> * 類型：字符串 * 默認值：無 * 描述：字體的粗細程度，可以直接填寫數字 * 可選值：[ bold | bolder | lighter | normal ] <b style="color:#808080;">font-size/line-height:</b> * 類型：字符串 * 默認值：無 * 描述：規定字體尺寸和行高，font-size是設置字體高度 * 可選值：[ ] <b style="color:#808080;">font-family:</b> * 類型：字符串 * 默認值：無 * 描述：規定字體系列，中文字體或者含有空格的字體名要加雙引號 * 可選值：[ "Open Sans" | "Source Sans Pro" | "Helvetica Neue" | Arial | sans-serif ] <br/> # <span style="color:#619BE4">font-variant</span> ***** 字體變種，可以通過font設置 <br/> ### 參數說明 <b style="color:#808080;">font-variant-caps:</b> * 類型：字符串 * 默認值：無 * 描述： * 可選值：[ ] <b style="color:#808080;">font-variant-numeric:</b> * 類型：字符串 * 默認值：無 * 描述： * 可選值：[ ] <b style="color:#808080;">font-variant-alternates:</b> * 類型：字符串 * 默認值：無 * 描述： * 可選值：[ ] <b style="color:#808080;">font-variant-ligatures:</b> * 類型：字符串 * 默認值：無 * 描述： * 可選值：[ ] <b style="color:#808080;">font-variant-east-asian:</b> * 類型：字符串 * 默認值：無 * 描述： * 可選值：[ ] <br/> # <span style="color:#619BE4">font-stretch</span> ***** 定義一個正常或經過伸縮變形的字體外觀，這個屬性并不會通過伸展/縮小而改變字體的幾何外形 <br/> # <span style="color:#619BE4">font-feature-settings</span> ***** 用于控制OpenType字體中的高級印刷功能 <br/> # <span style="color:#619BE4">font-kerning</span> ***** 是否應用字體字距調整 <br/> # <span style="color:#619BE4">font-smoothing</span> ***** 決定了瀏覽器如何控制字體不要出現鋸齒 <br/> # <span style="color:#619BE4">font-display</span> ***** 僅用于@font-face中，決定了一個 @font-face 在不同的下載時間和可用時間下是如何展示的 <br/> # <span style="color:#619BE4">color</span> ***** 設置字體顏色 <br/> ### 參數說明 <b style="color:#808080;">str:</b> * 類型：字符串 * 默認值：無 * 描述：字體顏色的值 * 可選值：[ ] <br/> # <span style="color:#619BE4">caret-color</span> ***** 設置插入光標顏色 <br/> ### 參數說明 <b style="color:#808080;">str:</b> * 類型：字符串 * 默認值：無 * 描述：字體顏色的值 * 可選值：[ ] <br/> # <span style="color:#619BE4">direction</span> ***** 規定文本的方向 / 書寫方向 <br/> ### 參數說明 <b style="color:#808080;">str:</b> * 類型：字符串 * 默認值：無 * 描述：可選方向 * 可選值：[ ltr | rtl | inherit ] <br/> # <span style="color:#619BE4">unicode-bidi</span> ***** 與 direction 屬性一起使用，來設置或返回文本是否被重寫，以便在同一文檔中支持多種語言 <br/> ### 參數說明 <b style="color:#808080;">str:</b> * 類型：字符串 * 默認值：無 * 描述：規則 * 可選值：[ normal | embed | bidi-override | initial | inherit ] <br/> # <span style="color:#619BE4">writing-mode</span> ***** 定義了文本在水平或垂直方向上如何排布 <br/> ### 參數說明 <b style="color:#808080;">str:</b> * 類型：字符串 * 默認值：無 * 描述：定義了文本在水平或垂直方向上如何排布，作用于table * 可選值：[ horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr ] <br/> # <span style="color:#619BE4">white-space</span> ***** 控制空白字符的顯示 <br/> ### 參數說明 <b style="color:#808080;">str:</b> * 類型：字符串 * 默認值：無 * 描述：指定元素內的空白怎樣處理 * 可選值：[ normal | pre | nowrap | pre-wrap | pre-line | inherit ] <br/> # <span style="color:#619BE4">word-break</span> ***** 控制單詞如何被拆分換行 <br/> ### 參數說明 <b style="color:#808080;">str:</b> * 類型：字符串 * 默認值：無 * 描述：指定非CJK腳本的斷行規則 * 可選值：[ normal | break-all | keep-all ] <br/> # <span style="color:#619BE4">overflow-wrap | word-wrap</span> ***** 控制長度超過一行的單詞是否被拆分換行 <br/> ### 參數說明 <b style="color:#808080;">str:</b> * 類型：字符串 * 默認值：無 * 描述：長單詞如何換行 * 可選值：[ normal | break-word ] <br/> # <span style="color:#619BE4">word-spacing</span> ***** 加或減少字與字之間的空白 <br/> ### 參數說明 <b style="color:#808080;">str:</b> * 類型：字符串 * 默認值：無 * 描述：字間距的數值 * 可選值：[ ] <br/> # <span style="color:#619BE4">letter-spacing</span> ***** 增加或減少字符間的空白 <br/> ### 參數說明 <b style="color:#808080;">str:</b> * 類型：字符串 * 默認值：無 * 描述：字符間距的數值 * 可選值：[ ] <br/> # <span style="color:#619BE4">text-overflow</span> ***** 文字單行超出顯示的樣式 <br/> ### 參數說明 <b style="color:#808080;">str:</b> * 類型：字符串 * 默認值：無 * 描述：待補充 * 可選值：[ clip | ellipsis | string{自定義修剪文本} ] <br/> # <span style="color:#619BE4">text-align</span> ***** 指定元素文本的水平對齊方式 <br/> ### 參數說明 <b style="color:#808080;">str:</b> * 類型：字符串 * 默認值：無 * 描述：待補充 * 可選值：[ left | right | center | justify | inherit ] <br/> # <span style="color:#619BE4">text-justify</span> ***** 當文本的 text-align 屬性被設置為 :justify 時的齊行方法 <br/> # <span style="color:#619BE4">text-align-last</span> ***** 規定如何對齊文本的最后一行 <br/> ### 參數說明 <b style="color:#808080;">str:</b> * 類型：字符串 * 默認值：無 * 描述：待補充 * 可選值：[ auto | left | right | center | justify | start | end | initial | inherit ] <br/> # <span style="color:#619BE4">text-decoration</span> ***** 規定添加到文本的修飾，下劃線、上劃線、刪除線等 <br/> ### 參數說明 <b style="color:#808080;">str:</b> * 類型：字符串 * 默認值：無 * 描述：待補充 * 可選值：[ none | underline | overline | line-through | blink | inherit ] <br/> # <span style="color:#619BE4">text-indent</span> ***** 規定文本塊中首行文本的縮進 <br/> ### 參數說明 <b style="color:#808080;">str:</b> * 類型：字符串 * 默認值：無 * 描述：縮進數字大小 * 可選值：[ ] <br/> # <span style="color:#619BE4">text-transform</span> ***** 控制文本的大小寫 <br/> ### 參數說明 <b style="color:#808080;">str:</b> * 類型：字符串 * 默認值：無 * 描述：文本的大小寫 * 可選值：[ none | capitalize | uppercase | lowercase | inherit ] <br/> # <span style="color:#619BE4">text-shadow</span> ***** 文字陰影 <br/> ### 參數說明 <b style="color:#808080;">h-shadow:</b> * 類型：字符串 * 默認值：無 * 描述：必需。水平陰影的位置。允許負值。 * 可選值：[ ] <b style="color:#808080;">v-shadow:</b> * 類型：字符串 * 默認值：無 * 描述：必需。垂直陰影的位置。允許負值。 * 可選值：[ ] <b style="color:#808080;">blur:</b> * 類型：字符串 * 默認值：無 * 描述：可選。模糊距離。 * 可選值：[ ] <b style="color:#808080;">color:</b> * 類型：字符串 * 默認值：無 * 描述：可選。陰影的顏色。請參閱 CSS 顏色值。 * 可選值：[ ] <br/> # <span style="color:#619BE4">content</span> ***** 偽元素專用屬性，承載的內容 <br/> ### 參數說明 <b style="color:#808080;">str:</b> * 類型：字符串 * 默認值：無 * 描述：承載的內容 * 可選值：[ ] <br/> # <span style="color:#619BE4">counter-increment</span> ***** 偽元素專用屬性，遞增序號 <br/> ### 參數說明 <b style="color:#808080;">str:</b> * 類型：字符串 * 默認值：無 * 描述：遞增序號 * 可選值：[ ] <br/> ### 示例內容 <span style="color:red">1. 使用案例</span> ``` h2:before { counter-increment: firstName; content: "Section " counter(firstName) ". "; } ``` <br/> # <span style="color:#619BE4">counter-reset</span> ***** 偽元素專用屬性，重置遞增序號 <br/> ### 參數說明 <b style="color:#808080;">str:</b> * 類型：字符串 * 默認值：無 * 描述：重置遞增序號 * 可選值：[ ] <br/> # <span style="color:#619BE4">quotes</span> ***** q專用屬性，引用的符號 <br/> ### 參數說明 <b style="color:#808080;">str:</b> * 類型：字符串 * 默認值：無 * 描述：自定義引用符號 * 可選值：[ ] <br/>