4

CooperBlackとCooperHiliteの2つのフォントがあります。この画像のように、それらを重ねて配置したいと思います：http: //viewerslikeu.squarespace.com/storage/720x360_1.png

テイカーはいますか？

4

5 に答える 5

5

純粋にCSSでそれを行う1つの方法は、:after疑似要素を使用することです。

このフィドルを確認してください：http：//jsfiddle.net/4xgdv/

元の要素はでありrelative、元の要素を適切にオーバーレイすることを保証するためにあります。pseudo childabsolute0, 0

HTML

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

CSSdiv を削除できます。すべての要素に適用できるようにする部分

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を使用して::beforeや::afterなどのCSS疑似要素を選択して操作する

于 2012-06-14T10:40:36.993 に答える
4

position:relative最初と2番目のフォントに追加し、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に追加し、これら2つの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

2つの要素（または同様の要素）を絶対に配置<div>すると効果が得られますが、1つに高い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 に答える