css字体相关样式的处理

连字符断行

实现文本两端对齐的方式，可以使用hyphens，它接收三个值none、manual 和auto。manual是它的初始值，将hyphens设置成auto可以实现。为了确保它奏效，需要在HTML标签的lang属性中指定合适的语言。

效果如下：

插入换行

上面这种格式的实现，看似简单有很让人头疼，这种格式的DOM形式：

<dl>
  <dt>Name:</dt>
  <dd>Lea Verou</dd>
  <dt>Email:</dt>
  <dd>[e-mail]</dd>
  <dd>[e-mail]</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; 
  }

效果如下：