如何用css覆盖两种字体

Tom*_*Tom 4 css fonts

我有两种字体,Cooper Black 和 Cooper Hilite。我想将它们放在彼此之上,如下图所示:http : //viewerslikeu.squarespace.com/storage/720x360_1.png

有接班人吗?

tec*_*bar 5

好吧,纯粹使用 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