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; }

效果如下：