字體是布局中重要的一個環(huán)節(jié)。對字體的調整影響到網頁的整體效果。我們設置字體時，可以參照word里面對字體的調整，更好地記憶調整內容。

最常見的字體調整

• 字庫 font-family

當我們需要對我們的字體類型修改時，需要指定字庫。

p {
  font-family: "Trebuchet MS", 微軟雅黑, Verdana, sans-serif;
}

按照給定的字庫順序依次尋找，直到找到存在的某一個字庫，并且應用。如果給定的字庫都在計算機的字體庫中查詢不到，則會使用默認字庫，通常是Time New Roman，中文是宋體。
字庫名稱有空格時需要用引號引用，以示完整。

定義網絡字庫 @font-face

當我們需要的字體很大幾率在客戶機中不存在，則可以使用提供的網絡字庫，使得網頁可以按照期望的樣式展示。

@font-face {
    font-family: <字體名>;
    src: <字體路徑> [<格式>][,<字體路徑> [<格式>]]*;
    [font-weight: <粗細>];
    [font-style: <樣式>];
}

例如

@font-face {
  font-family: 'Bungee Inline'; /*定義字體庫名稱*/
  font-style: normal; /*字體樣式*/
  font-weight: 400; /*字體*/
  src: local('Bungee Inline') /* local 表示從本地字庫中查找指定字庫*/, local('BungeeInline-Regular'), url(https://fonts.gstatic.com/s/bungeeinline/v2/Tb-1914q4rFpjT-F66PLCfn8qdNnd5eCmWXua5W-n7c.woff) format('woff') /*url表示從網絡給定鏈接下載字庫  format是字體的格式*/;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; /*字體支持的unicode范圍*/
}

h2{
    font-family: 'Bungee Inline';
}

關于format()說明

字體的兼容寫法

   @font-face {
    font-family: '字體名';
    src: url('字體名.eot'); /* IE9 兼容模式 */
    src: url('字體名.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('字體名.woff') format('woff'), /* 現代瀏覽器 */
             url('字體名.ttf')  format('truetype'), /* Safari, Android, iOS */
             url('字體名.svg#grablau') format('svg'); /* Legacy iOS */
   }

但是常規(guī)只需要 eot和woff這兩種就可以了

 --------當字體準備完成之后，開始正式的字體修飾--------------

• 顏色 color

字體顏色是最常見的修飾方式，不同的字體顏色產生不同的視覺效果

<style>
p {
  color: red;
}
</style>

色值可以從顏色名對照表中查找瀏覽器設定好的默認值，也可以用任意的色值方案 -- 十六進制 ，rgb ，hsl 提供色值或者帶有alpha通道的rgba，hsla設置半透明字體色彩。

在word里，字體有背景色，但是在css里沒有針對字體的背景色，因此沒有一個屬性叫 "font-background-color"，
但是css提供了一個'background-color' 在調整盒模型時說明用途

• 字體尺寸 font-size

可以使用像素單位( px )的字體字號，也可以使用磅值（pt），但是不會使用相對尺寸，em rem，因為在換算成像素時，小數部分將會使字體模糊

<style>
p {
  font-size: 20px;
}
</style>

通常瀏覽器都有最小字體，在chrome中最小字號為 12px以保證文本內容清晰顯示

• 加粗 font-weight

區(qū)間為 100 - 900 （100的整數倍）九檔，常用的，默認值 normal =400 ，bold =800

• lighter 更細一些，相比父元素字體而言

• bolder 更粗一些，相比父元素字體而言

• 傾斜 font-style

我不知道為什么style叫斜體，但是它就是這么定義的，可能是風格吧傾斜風格。
在這個屬性中有兩種傾斜方式

• 使用斜體字 italic 。當該字體提供斜體時，可以使用該屬性，將常規(guī)字體替換為斜體字體，如果字體本身沒有攜帶斜體字，則不會生效

• 使字體傾斜 oblique 。當該字體不提供斜體字時，將由樣式渲染字體為斜體。

• normal 這個默認使用常規(guī)字體

• 文本裝飾線 text-decoration

該屬性是一個復合屬性，包括：

• text-decoration-color 裝飾線顏色
• text-decoration-line text-decoration-line 是一個多值屬性，可以同時設定多個值
  • underline 下劃線
  • overline上劃線
  • line-through 貫穿線
  • blink 文本閃爍 該屬性并不是很受支持，并且有了css動畫，該屬性將被廢棄
• text-decoration-style 線條風格
  • solid 實線
  • double 雙實線
  • dashed 虛線
  • dotted 點線
  • wavy 波浪線
• text-decoration-skip 這是一個css3的屬性，用來跳過不顯示裝飾線的元素，不過目前支持力度有限
  • objects 跳過內聯塊
  • spaces 跳過空白符

雖然我們可以同時設定上劃線，下劃線，貫穿線，但是卻沒辦法單獨設置他們的樣式顏色，盡管css3標準組織已經提出了 相關解決方案，遺憾的是大多數瀏覽器都是不支持的。

• 文字描邊 text-stroke

當我們想為文字外側再套一層顏色時，就需要使用到文字描邊。
該屬性也是復合屬性分為 text-stroke-color描邊顏色 和 text-stroke-width描邊厚度 兩部分。
目前IE 和FF (40 以下) 版本不支持，其余瀏覽器需要添加內核前綴。

• 文本大小寫轉換 text-transform

決定文字內容(主要是西方字體) 大寫（uppercase）還是小寫（lowercase）還是首字母大寫（capitalize）的方式呈現

• 小型的大寫字母 font-variant

當你的大寫字母比小寫字母高出很多時，使用小型大寫字母，將小寫的內容轉為大寫字母來替代原有的大寫字母內容?！緝H針對小寫字母】

<style>
p {
  font-variant : small-caps;
}
</style>
<p>this is small caps</p>

• 文本陰影 text-shadow

這個元素將以內容文本為藍本，從當前文本的下方產生文字投影。
這個屬性一共有四個屬性值，分別是

• 水平偏移 相對于原文本的X軸方向上的偏移
• 垂直偏移 相對于原文本的Y軸方向上的偏移
• 模糊半徑 如果為0則陰影不會產生模糊效果
• 投影顏色 如果不設置默認是黑色

投影其實就是燈光照射到物體上產生的陰影，當不同角度的燈光照射進來時，產生了不同程度的投影。因此投影也是可以有多個的

<style>
p {
  text-shadow : 1px -1px 2px blue , 1px 5px 0 red;
}
</style>

• 方向 direction

這個屬性其作用目的是修改內聯塊的排列方向，僅針對內聯塊（inline-block），默認是ltr( LEFT-TO-RIGHT )、rtl(RIGHT-TO-LEFT)

  <style>
    div {
      direction: rtl;
    }
  </style>
  <div>
      <button>內聯塊1</button>
      <button>內聯塊2</button>
      <span> 文本內容1 , </span>
      <span> 文本內容2 。 </span>
      <span style="background-color: greenyellow"> 文本內容3 ； </span>
  </div>

看下面的效果

image.png

很神奇的發(fā)現，內聯塊1，2的顯示順序調換了，這是因為該屬性修改的是內聯塊的展示方向，會依次從右向左排列，但是另一部分，三個內聯元素排列順序沒有變化，是對的，但是沒搞懂，為什么最后一個文本內容末尾的符號會被提升到前面去，不應該跟隨在文字后面么這不知道是一個 “BUG” 還是別出心裁的設計。

但是我們想象一下民國時期，從右向左書寫方式，這時候需要用到文本的寫作方向來調整了

• 文本的方向 unicode-bidi

這個屬性需要配合上面的direction一起使用才可以生效

在現代計算機應用中，最常用來處理雙向文字的算法是Unicode 雙向算法（Unicode Bidirectional Algorithm），簡稱為 bidi 算法。而unicode字符本身分為強字符、中性字符、弱字符

• 強字符：強字符方向是確定的，但是在bidi算法中會影響到中性字符的書寫方向。 比如中文、拉丁文字

• 中性字符：方向是不確定的，上下文與bidi算法無關，但是會受到強字符影響。比如，一般符號

• 弱字符：方向是確定的，但是不會對bidi算法產生影響。比如 阿拉伯數字以及跟數字相關的符號

  一個區(qū)域內有總體方向，決定從這個區(qū)域的哪邊開始書寫文字，通常稱為基礎方向。
  瀏覽器會根據你的默認語言來設置默認的基礎方向，如英語、漢語的基礎方向為從左到右，阿拉伯語的基礎方向為從右到左。
  

Web中控制文字方向的方式有三種：

• html實體（‎、‏）【隱式轉換】 ‎與‏可以用來打斷方向串的連續(xù)性，影響中性字符的方向。
• bid與bdo標簽+dir屬性
• css屬性（direction + unicode-bidi）

具體關于 字符方向的，這里有解答
但是還是不理解上述所說的，末尾符號問題。

• 書寫模式 writing-mode

• horizontal-tb 默認從左向右從上到下
• vertical-rl 垂直方向從右向左 類似古代中文書籍書寫方式
• vertical-lr 垂直方向從左往右

當設置為垂直書寫方式時，塊元素的寬度將會以content的寬度為準，如果需要設置寬度則需要顯示的給出。該屬性可被繼承

• 空白符 white-space

很多時候，我們需要保留文內空白符，通常比較傻的情況就是用 這個html語義字符替代，其實css本身就提供了我們對空白符的處理，何必傻兮兮的去替換。
pre 預先使用等寬字體顯示格式化文本，不合并空白，文字超出邊界時不換行
pre-wrap 不合并空白，和邊界發(fā)生碰撞時折行
pre-line 保持文本換行，但是不保留空白，邊界碰撞時換行
nowrap 不換行，不保留空白，直到文本結束或者遇到 <br/>

• tab尺寸 tab-size

當我們開啟了空白符時，這是可以設定tab-size的尺寸，在一般的編輯器中，一個tab等于4個space，默認也是如此，因此當我們調整tab與space互轉時，就可以用到了。

• 文字換行 word-break

對于英文等拉丁文，有時長單詞會超出邊界。這是因為單詞被視為整體，不允許折行。這時候就會產生比較大的問題--布局撐破。盡管很少情況下會遇到，這時，我們使用break-all強制換行，即使單詞是整體，也會被折行顯示，滿足布局需要。
對于中文，如果不想換行可以使用keep-all，就表現的和英文單詞一致，是不會折行的。

• 段落折行 overflow-wrap (word-wrap)

IE下定入標準是word-wrap，被W3C組織收編之后修改為overflow-wrap，本質還是不變的。
設定超過邊界時換行，以獲得更好的展示效果。中英文混排時，會從中英文邊界換行。

• break-word 設定折行

• 文本對齊 text-align

比較常用的文本對齊是 left right center，css3中新增justify兩端對齊。但是justify不會處理最后一行和第一行。（單獨一行是第一行也是最后一行）
新增的start和end 對齊方式依賴于direction設定的方向，即文檔的開始方向。start表示向文檔開始方向對齊，因此direction:rtl時，表現與left right表現相反。
而match-parent 匹配父級，當匹配父級的start或者end時，基于父級的direction計算得到結果，而inherit則沒有限定。
justify-all，同時處理行和行尾的兩端對齊，但是并未得到支持。因此還是使用下面的方式最為穩(wěn)妥。

• 行尾對齊 text-align-last

  上述的text-align不能處理單獨行，因此需要使用該屬性單獨處理

• 兩端對齊方式設定 text-justify

當設定了文本的兩端對齊后，需要對兩端對齊方式進行設定，然而目前并沒有瀏覽器支持。所以先放棄

• 單詞間距 word-spacing

說白話就是一個空格有多寬。

• 字母間距 letter-spacing

就是字母跟字母間的間隔，當然中文也可以

• 段落縮進 text-intend

設定段首縮進像素，然而這個屬性只針對塊元素和行內塊。畢竟內聯元素的自己也做不了主。
*## 行高 line-height
行高，即字體最底端與字體內部頂端之間的距離

行高和基準線

• 垂直對齊 vertical-align

垂直對齊就是基于行高和基準線的對齊方式。有baseline 基準線 sub 上標 super 下標
top 元素頂端與行內元素最高的頂端對齊
bottom 元素的頂端與行中最低的元素的頂端對齊
middle 把此元素放置在父元素的中部
text-top 把元素的頂端與父元素字體的頂端對齊
text-bottom 把元素的底端與父元素字體的底端對齊