如何使用css覆蓋兩種字體

我有兩種字體，Cooper Black和Cooper Hilite。我想將它們放在彼此之上，如此圖所示：http://viewerslikeu.squarespace.com/storage/720x360_1.png 如何使用css覆蓋兩種字體

任何接受者？

來源

2012-06-14 tom

我不知道，但我認爲這不能做，只考慮創建一個組合的字體以某種方式使用的那一個。 –

你可以用'position：absolute;'來創建兩個不同的元素，因此可以重疊其中一個... – Bongs

正在尋找一個純CSS解決方案，或者你可以不必爲此更改HTML嗎？ – techfoobar

那麼，純粹使用CSS的一種方法是使用僞元素:after。

檢查此琴：http://jsfiddle.net/4xgdv/

的原始元素是relative其pseudo child是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">My text..</div>這樣的元素，下面的JS與上面的CSS結合起來就可以完成剩下的工作。您可以將以下JS放入頁面的<head>中。

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

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

而且，看看這個相關的答案。這是從我得到的attr(content)提示。

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

來源

2012-06-14 10:40:36 techfoobar

添加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-14 10:41:25 shahbaz

把這兩樣，在單獨的事業部的&添加CSS p個不同字體的文本命題：絕對兩個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-14 10:41:55 SVS

我不認爲你需要設置'z-index'，因爲第二個子div將在之後渲染並默認處於最高。 – Bongs

@Bongs Ya你是對的，但是如果他/她必須增加幾個絕對定位的div。只是想在安全的一面。 – SVS

是啊對... +1爲:) – Bongs

絕對定位兩個<div>元素（或類似）將製造出效果，但不要忘了給一個較高的Z-指數，使其成爲「疊加」的字體。

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-14 10:49:01 Widor

這將有可能在不改變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>'); 
});

這包裝在一個包含分區段的每個，然後添加具有相同文本兩者都絕對定位在彼此的頂部的另一個段落。

http://jsfiddle.net/zxaEh/

來源

2012-06-14 11:11:15

如何使用css覆蓋兩種字體

回答

相關問題