我有两种字体,Cooper Black 和 Cooper Hilite。我想将它们放在彼此之上,如下图所示:http : //viewerslikeu.squarespace.com/storage/720x360_1.png
有接班人吗?
好吧,纯粹使用 CSS 来实现的一种方法是使用:after伪元素。
检查这个小提琴:http : //jsfiddle.net/4xgdv/
原始元素 isrelative和它的pseudo childis absoluteat0, 0以确保它正确覆盖原始元素。
HTML
<div class="doublefont">HELLO</div>
Run Code Online (Sandbox Code Playgroud)
CSS 您可以删除 div。部分使其适用于所有元素
div.doublefont {
position: relative;
color: red;
font-family: arial;
}
div.doublefont:after {
content: "HELLO";
color: blue;
font-family: tahoma;
position: absolute;
top: 0;
left: 0;
}
Run Code Online (Sandbox Code Playgroud)
使其通用
你可以添加一点 JS 来自动让页面上的所有元素都带有一个类,doublefont以显示叠加的字体。也就是说,你只需要简单地放入像这样<div class="doublefont">My text..</div>的元素,下面的 JS 结合上面的 CSS 将完成剩下的工作。您可以将以下 JS 放入<head>页面的 。
$('.doublefont').each(function() {
$(this).attr('content', $(this).html());
});
Run Code Online (Sandbox Code Playgroud)
更新小提琴:http : //jsfiddle.net/4xgdv/1/
另外,看看这个相关的答案。这是我得到attr(content)提示的地方。
使用 jQuery 选择和操作 CSS 伪元素,例如 ::before 和 ::after