logo标签列表

如何使用CSS叠加两种字体

cssfonts
4
我不确定，但我认为这是做不到的，考虑一下通过某种方式创建一个组合字体并使用它。 - eric.itzhak
你可以使用 position:absolute; 创建两个不同的元素，以便它们可以重叠在彼此之上... - Bongs
你是在寻找一个纯CSS的解决方案，还是可以接受必须修改你的HTML代码来实现这个功能？ - techfoobar
1
你有什么问题吗？我找不到你自己尝试解决的努力。 - Vladimir Starkov
@techfoobar 纯CSS会很好，但从下面的答案来看，我想我必须修改HTML。 - Tom
@ThomasLeFeuvre - 请看下面我对CSS的解决方案的回答。可以加一点JS（将扩展我的答案以使其成为通用解决方案）。 - techfoobar
5个回答
5

纯CSS实现这个的一种方法是使用:after伪元素。

请查看这个示例：http://jsfiddle.net/4xgdv/

原始元素是 relative，它的伪子元素是absolute，位于0, 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">我的文本..</div>并将以下JS与上面的CSS结合使用即可。您可以将以下JS放置到页面的<head>中。

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

更新后的示例：http://jsfiddle.net/4xgdv/1/

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

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

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;
}
2
将不同字体的文本分别放在两个Div中，对两个Div添加CSS属性position:absolute，然后将这两个Div用一个position:absolute的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>
我认为您不需要设置z-index，因为第二个子div将会后渲染并默认在顶部。 - Bongs
1
@Bongs 你说得对，但是如果他/她需要添加更多具有绝对定位的 div，最好还是保险点。 - SVS
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;
}
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/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接