gpt4 book ai didi

css - 如何用css叠加两种字体

转载 作者:技术小花猫 更新时间:2023-10-29 11:52:44 26 4
gpt4 key购买 nike

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

有人要吗?

最佳答案

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

检查这个 fiddle :http://jsfiddle.net/4xgdv/

原始元素是relative及其 pseudo childabsolute0, 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());
});

更新 fiddle :http://jsfiddle.net/4xgdv/1/

另外,看看这个相关的答案。这是我从哪里得到 attr(content)提示。

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery

关于css - 如何用css叠加两种字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11031262/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com