3

CSS フォントとドロップ キャップを使用して、 http: //www.thedecoratorsource.co.ukで見られるメニュー効果を再現したいと思います。

私は使用できることを知っています

p.introduction:first-letter {
font-size : 300%;
}

これにより、最初の文字が大きい最初の単語が得られますが、それを各単語に適用したいと思います。CSS(3)でこれを行う方法はないと思います。私の最善の策はjavascriptですか？私はすでにページに Moo を持っているので、これが私の好みの方法です。

これを実現するために、余分な HTML をリンクに追加したくありません。

ありがとう

4

6 に答える 6

2

これはドロップ キャップではありません (つまり、3 行または 4 行の段落の先頭に大きな大文字がある場合です)。これがスモールキャップスです。

最も簡単な方法は、小さな大文字のフォントを見つけて、すべての単語を大文字にすることです。悲しいことに、Google Web フォント API で見つけることができる小さな大文字を持つ唯一のフォントは、正しい文字を持っていない可能性があります。

http://code.google.com/webfonts/family?family=Walter+Turncoat&subset=latin

于 2011-01-18T16:50:39.027 に答える
1

メニューでこれを試してみませんか：

li {text-transform: uppercase;}
li:first-letter { font-size:150%; }
于 2011-01-18T16:44:27.500 に答える
0

これらの他の回答に基づいて、私は質問を理解するかどうかわかりません。しかし、私の理解に基づいて、正確な効果が必要な場合は、JSでこれを行う必要があります。でも、あまり気にしないでください。

これにより、各単語の最初の文字の周りにスパンが追加され、それにクラスが適用されます。その後、cssの最初の文字に対して好きなことを行うことができます。

  $$('p.introduction').each(function(el) {
    var text = el.textContent || el.innerText;
    el.innerHTML = text.replace(/\b(\w)([^\b]*?)/g, function(match, first, remainder) {
      return ['<span class="first-letter">', first, '</span>', remainder].join('');
    });
  });
于 2011-01-18T16:52:48.687 に答える
0

これを試して：

font-variant: small-caps;

すべてのブラウザで動作します。

于 2011-02-19T19:20:44.500 に答える
0

Moo ではなく jQuery 用ですが、 Lettering.jsがこれに役立つようです。

于 2011-01-18T16:44:53.373 に答える
0

toUpperCase(); を使用できます。すべての文字を大文字にする JavaScript 関数。例：

var str="This is my 1st new tutorial 123";
var a1 = str.toUpperCase();
document.write(a1);

したがって、あなたの場合、大文字にしたいすべての要素のコンテンツを取得し、 toUpperCase() 関数を文字に適用します。

バージョン: HTML:

<ul id='mylist'>
    <li><a href='#'>test 1</a></li>
    <li><a href='#'>test 2</a></li>
    <li><a href='#'>test 1</a></li>
    <li><a href='#'>test 4</a></li>
    <li><a href='#'>test 5</a></li>
</ul>

Mootools JS:

$$('#mylist li').each(function(el) {
    console.log(el.getElement('a').innerHTML.toUpperCase());
});

ここにjsfiddleがあります

于 2011-01-18T16:45:31.387 に答える