html中⽂字空⼼如何设置,css中字体⽂本⼩诀窍本篇介绍 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;css特效文字
}
.circular-text path {
fill: none;
}
这个不能通过纯css实现只能通过SVG实现
/
/ 创建⼀个⼯具函数
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 = "/2000/svg";
var xlinkNS = "/1999/xlink";
var svg = ateElementNS(NS, "svg");
var circle = ateElementNS(NS, "path");
var text = ateElementNS(NS, "text");
var textPath = ateElementNS(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.setAttributeNS(xlinkNS, "xlink:href", "#circle"); text.appendChild(textPath);
svg.appendChild(circle);
svg.appendChild(text);
el.appendChild(svg);
})
环形⽂字效果图

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。