本篇介绍 css 几种文本修饰的案例。
1、现实中的文字效果
1.1 凸版印刷效果
背景知识：text-shadow
凸版印刷需要考虑两种情况：浅底深色字和深色浅底字
浅底深色字代码示例
凸版印刷效果之下投影：浅底深色字要下投影
.letterpress-down {
background: hsl(210, 13%, 60%);
color: hsl(210, 13%, 30%);
text-shadow: 0 .03em .03em hsla(0, 0%, 100%, .8);
}
浅底深色字效果图
深色浅底字代码示例
凸版印刷效果之上投影：深色浅底字要上投影
.letterpress-up {
background: hsl(210, 13%, 40%);
color: hsl(210, 13%, 75%);
text-shadow: 0 -.03em .03em hsla(0, 0%, 100%, 1);
}
深色浅底字效果图
1.2 空心字效果
背景知识：text-shadow
两种实现方式：通过重叠多重轻微模糊的投影和 SVG 来描边
通过重叠多重轻微模糊的投影代码示例：
描边细的空心字效果：通过重叠多层轻微模糊的投影来描边
.stroke-text-thin {
background: deeppink;
color: white;
text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
}
重叠多重轻微模糊效果图
通过 SVG 实现描边代码示例：
描边粗的空心字效果：通过SVG来实现
.stroke-text-thick {
font: 300%/1 rockwell, serif;
background: deeppink;
color: white;
}
.stroke-text-thick text {
fill: currentColor;
}
.stroke-text-thick svg {
overflow: visible;
}
.stroke-text-thick use {
stroke: black;
stroke-width: 6;
stroke-linejoin: round;
}
SVG 描边效果图
1.3 文字外发光效果
背景知识：text-shadow
代码示例：
两种实现方法：1、叠加基层text-shadow，但不能平稳退化；2、使用css滤镜，可以平稳退化
.text-blur {
background-color: #203;
color: #ffc;
/* color: white; /*使用css滤镜，可以平稳退化*/
transition: 10s;
}
.text-blur:hover {
color: transparent;
text-shadow: 0 0 .3em, 0 0 .3em;
/*filter: blur(.1em);/*使用css滤镜，可以平稳退化*/
}
文字外发光效果
1.4 文字凸起效果
背景知识：text-shadow
实现方法：加一长串的颜色逐渐变暗的累加投影，最后在底部加上一层强烈的模糊的暗投影
代码示例：
实现方法：加一长串的颜色逐渐变暗的累加投影，最后在底部加上一层强烈的模糊的暗投影
.text-3D {
height: 30px;
background-color: #58a;
color: #fff;
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;
}
3D 效果图
2、连字符断行
背景知识：hyphens
文本折行一直是个痛点，到现在浏览器的支持程度也不是很好！！
以下代码只在 Firefox 浏览器下才能实现，hyphens 兼容参考。
代码示例
连字符断行.hyphenation {
width: 7.7em;
font: 180%/1.4 Baskerville, serif;
text-align: justify;
hyphens: auto;
}
这里需要借用一个新的属性：hyphens；有三个属性值：normal、none、auto，当设置了auto属性值时，就会实现断词折行；但这必须在html标签的lang 属性中指定合适语言。如果一定要使浏览器进行断词，则可以使用一些软连字符。但是这个在chrome里不支持这个属性！！
“The only way to get rid of a temptation is to yield to it.”
连字断行效果1
连字断行效果2
3、环形文字
背景知识：基本 SVG 知识
代码示例：
环形文字/* body {
font: bold 100% Helvetica, sans-serif;
}*/
.circular-text {
width: 25em;
height: 25em;
margin: 4em auto 0;
font-size: 18px;
}
.circular-text svg {
display: block;
overflow: visible;
transition: 10s linear transform;
}
.circular-text path {
fill: none;
}
// 创建一个工具函数
function $$(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}
// 为了不重复写代码，用js动态创建SVG的方法
$$(".circular-text").forEach(function(el) {
// 创建SVG的命名空间
var NS = "http://www.w3.org/2000/svg";
var xlinkNS = "http://www.w3.org/1999/xlink";
var svg = document.createElementNS(NS, "svg");
var circle = document.createElementNS(NS, "path");
var text = document.createElementNS(NS, "text");
var textPath = document.createElementNS(NS, "textPath");
svg.setAttribute("viewBox", "0 0 100 100");
circle.setAttribute("d", "M0,50 a 50,50 0 1,1 0,1 z");
circle.setAttribute("id", "circle");
textPath.textContent = el.textContent;
// 这个地方容易写错
textPath.setAttributeNS(xlinkNS, "xlink:href", "#circle");
text.appendChild(textPath);
svg.appendChild(circle);
svg.appendChild(text);
el.textContent = "";
el.appendChild(svg);
})
环形文字效果图
