css字體相關樣式的處理

連字符斷行

實現文本兩端對齊的方式，可使用hyphens，它接收三個值none、manual 和auto。manual是它的初始值，將hyphens設置成auto能夠實現。爲了確保它奏效，須要在HTML標籤的lang屬性中指定合適的語言。

效果以下：

插入換行

上面這種格式的實現，看似簡單有很讓人頭疼，這種格式的DOM形式：

<dl>
  <dt>Name:</dt>
  <dd>Lea Verou</dd>
  <dt>Email:</dt>
  <dd>lea@verou.me</dd>
  <dd>lea@verou.me</dd>
  <dt>Location:</dt>
  <dd>Earth</dd>
</dl>

因爲dt和dd都是塊級元素，致使了名字和值都會換行，有一種很好的處理辦法：

dt, dd {
    display: inline;
}

dd + dt::before {
    content: '\A';
    white-space: pre;
}

dd + dd::before {
    content: ', ';
    font-weight: normal;
}

Unicode字符中A表明換行符。經過設置 white-space: pre，保留源代碼中的這些空白符和換行

文本行的斑馬條紋的實現

主要思路是：在CSS 中用漸變直接生成背景圖像，而且用em 單位來設定背景尺寸，這
樣背景就能夠自動適應font-size 的變化了。
具體的實現以下：

<pre class="code">
    urlParams.gitName = record.gitName;
    for (let item in record) {
       if (record[item] == currentId) {
           urlParams.stage = item;
       }
    }
    localStorage.setItem('urlParams', JSON.stringify(urlParams));
</pre>

.code {
    padding: .5em;
    line-height: 1.5;
    tab-size: 4; /* 接受一個數字或者一個長度值控制代碼縮進 */
    background: beige;
    background-size: auto 3em;
    background-origin: content-box;
    background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);
}

效果以下：

美化&符號

在寫頁面時，有時會出現通過美化過的&符號，若是用src單獨指定某一種字體的話會增長http請求的次數，經過local這個函數能夠解決這個問題，它能夠指定本地字體的名稱。

在使用font-face將local這個函數引入時，須要指定要渲染的某一個特定的字符，就須要使用unicode-range，它只在@font-face 規則內部生效，它並非一個CSS屬性

unicode-range它的語法是基於「Unicode碼位」，所以須要知道字符的十六進制碼位，經過
"&".charCodeAt(0).toString(16);（返回26） 獲得&的十六進制編碼

@font-face {
    font-family: Ampersand;
    src: local('Baskerville-Italic'),
    local('GoudyOldStyleT-Italic'),
    local('Palatino-Italic'),
    local('BookAntiqua-Italic');
    unicode-range: U+26;
}
h1 {
    font-family: Ampersand, Helvetica, sans-serif;
}

最終的效果以下：

自定義下劃線的方法

處理css默認樣式下劃線的方法可使用background-image及其相關的屬性，經過它設置漸變達到效果。
具體的實現以下：

span {
    background: linear-gradient(gray, gray) no-repeat;
    background-size: 100% 1px;
    background-position: 0 1.15em;
    /* 若是下劃線在遇到字母時會自動斷開避讓,經過設置text-shadow模擬*/
    text-shadow: .05em 0 white, -.05em 0 white;
  }

效果以下：

文字凸起、空心、發光的等效果的實現

• 實現凸版印刷字體的效果

使用投影的效果達到，具體的實現以下：

.div {
    background: hsl(210, 13%, 60%);
    color: hsl(210, 13%, 30%);
    text-shadow: 0 1px 1px hsla(0,0%,100%,.8);
  }

最終的效果：

• 空心字效果的實現

方法是使用用text-shadow 屬性的擴張參數就可以讓投影變大，看起來就像給文字勾邊了同樣；或者是使用svg

用text-shadow:

div {    
    color: white;
    text-shadow: 1px 1px black, -1px -1px black,
                 1px -1px black, -1px 1px black;
}

最終效果：

用svg的方法：

<h1>
    <svg width="2em" height="1.2em">
      <use xlink:href="#css" />
      <text id="css" y="1em">CSS</text>
    </svg>
</h1>

h1 {
    font: 500%/1 Rockwell, serif;
    background: deeppink;
    color: white;
  }
  h1 text {
    fill: currentColor;
  }
  h1 svg { 
    overflow: visible
  }
  h1 use {
    stroke: black;
    stroke-width: 6;
    stroke-linejoin: round;
  }

效果以下：

svg的實現方式雖然語法複雜，可是它的視覺效果倒是最好的。

• 文字外發光的效果
  實現的方法就是使用重疊的text-shadow便可，不須要考慮偏移量，顏色也只需跟文字保持一致。

.hi {
    background: #203;
    color: #ffc;
    text-shadow: 0 0 .1em, 0 0 .3em;
  }

效果以下：

• 文字凸起的效果

.css3d {
    background: #58a;
    color: white;
    text-shadow: 0 1px hsl(0,0%,85%),
    0 2px hsl(0,0%,80%),
    0 3px hsl(0,0%,75%),
    0 4px hsl(0,0%,70%),
    0 5px hsl(0,0%,65%);
    0 5px 10px black;
}

效果以下：

• 環形文字的實現
  使用svg實現

<div class="circular">
   <svg viewBox="0 0 200 200">
       <path d="M 0,50 a 50,50 0 1,1 0,1 z"
        id="circle" />
        <text><textPath xlink:href="#circle">
          Each data point or cell of a cube is the
        </textPath></text>
    </svg>
</div>

.circular {
    width: 300px;
    height: 300px;
    margin: 3em auto 0;
  }
  .circular svg {
    display: block;
    overflow: visible;
  }
  .circular path { 
    fill: none; 
  }

效果以下：