Question

我想使用CSS字体和首字下沉重新创建在http://www.thedecoratorsource.co.uk看到的菜单效果。

我知道我可以使用

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

这将给我第一个带有更大第一个追逐者的词，但我想将它应用于每个词。我猜测用CSS（3）没办法做到这一点。用javascript打赌最好吗？我已经在页面上安装了Moo，所以这将是我首选的方法。

我不想在链接中添加额外的HTML来实现此目的。

由于

Answer 1

这不是首字母大写（当你在段落开头有一个大写字母时需要三到四行）。这是小型帽子。

最简单的方法是找到一个小型大写字体，并将每个单词大写。可悲的是，我可以在google web font api上找到的唯一具有小型大写字体的字体可能没有正确的字符：

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

Answer 2

为什么不在菜单中尝试这个：

li {text-transform: uppercase;}
li:first-letter { font-size:150%; }

Answer 3

看起来Lettering.js对此有帮助，虽然它适用于jQuery，而不是Moo。

Answer 4

你可以使用toUpperCase（）; javascript函数使所有字母大写。例如：

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

所以，在你的情况下，我会抓住你想要大写的所有元素的内容，并将toUpperCase（）函数应用于字母。

Mootools版本： 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

Answer 5

基于这些其他答案，我不确定我是否理解这个问题。但是，根据我的理解，如果你想要那个确切的效果，必须用JS来完成。虽然不是很多moo。

这将在每个单词的第一个字母周围添加一个范围，并为其应用一个类。在那之后，你可以对你的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('');
    });
  });

Answer 6

试试这个：

font-variant：small-caps;

适用于所有浏览器。

对链接中的每个单词应用首字下沉

6 个答案: