4

我有两种字体，Cooper Black 和 Cooper Hilite。我想把它们放在一起，如下图：http: //viewerslikeu.squarespace.com/storage/720x360_1.png

有接盘侠吗？

4

5 回答 5

5

好吧，纯粹使用 CSS 的一种方法是使用:after伪元素。

检查这个小提琴：http: //jsfiddle.net/4xgdv/

原始元素 isrelative和it pseudo childis absoluteat0, 0以确保它正确地覆盖原始元素。

HTML

<div class="doublefont">HELLO</div>

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

使其通用

您可以添加一点 JS 以自动使页面上的所有元素都带有一个类doublefont以显示叠加字体。也就是说，你只需要简单地放入类似<div class="doublefont">My text..</div>的元素，下面的 JS 结合上面的 CSS 就可以完成剩下的工作。您可以将以下 JS 放入<head>您的页面中。

$('.doublefont').each(function() {
     $(this).attr('content', $(this).html());
});

更新小提琴：http: //jsfiddle.net/4xgdv/1/

另外，看看这个相关的答案。这是我得到attr(content)提示的地方。

使用 jQuery 选择和操作 CSS 伪元素，例如 ::before 和 ::after

于 2012-06-14T10:40:36.993 回答
4

添加position:relative到您的第一个和第二个字体并添加top:-20px或任何（值应该是负数）是字体的大小并指定z-index:2您想要高于z-index:1的字体和您想要低于的字体......

例子

.first {
font-size:20px;
position:relative;
z-index:2;
}
.second {
position:relative;
top:-20px;
z-index:1;
}
于 2012-06-14T10:41:25.043 回答
2

将具有不同字体的两个文本放在单独的 Div 中并添加 css position:absolute 到两个 div 并用绝对位置的 div 包装这两个 div。

<div style="position:relative">
  <div style="position:absolute; z-index:2;">Content with different fonts(On Bottom)</div>
  <div style="position:absolute; z-index:3;">Content with different fonts (On top)</div>
</div>
于 2012-06-14T10:41:55.273 回答
1

这在不改变 HTML 的情况下是可能的，但您必须使用一些 javascript (jQuery)。

$('p.layerfont').each(function(index) {
    $(this).wrap('<div class="layerwrap" />');
    var ptext = $(this).text();
    $(this).css('position: absolute;');
    $(this).after('<p class="toplayer">'+ptext+'</p>');
});

这将每个段落包装在一个包含的 div 中，然后添加另一个具有相同文本的段落，这两个段落绝对位于彼此之上。

http://jsfiddle.net/zxaEh/

于 2012-06-14T11:11:15.120 回答
1

绝对定位两个<div>元素（或类似元素）会产生效果，但不要忘记给一个更高的 z-index 以使其成为“叠加”字体。

JSFiddle

HTML

<html>
    <head></head>
    <body>
        <div class="first-font-positioned">This is my Frankenfont</div>
        <div class="second-font-positioned">This is my Frankenfont</div>
    </body>
</html>

CSS

.first-font-positioned{
    font-family: Cooper Hilite;
    font-size:30px;
    position:absolute;
    top:100px;
    left:100px;
    z-index:100;
}

.second-font-positioned{
    font-family: Cooper Black;
    font-size:30px;
    position:absolute;
    top:100px;
    left:100px;
}
于 2012-06-14T10:49:01.527 回答