在链接中为每个单词应用首字下沉效果

Question

我希望能够使用CSS字体和首字母大写效果，重新制作出在http://www.thedecoratorsource.co.uk上看到的菜单效果。

我知道可以使用：

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

我希望你能提供一个可以找到第一个字母更大的单词的方法，但我需要对每个单词应用该方法。 我猜CSS（3）没有这样的方法。 那么JavaScript是最好的选择吗？ 我已经在页面上使用了Moo，所以这是我首选的方法。

我不想通过添加额外的HTML来实现此目的。

谢谢

- Jeepstone

---

有 text-transform: capitalize 但那并不能完全满足你的需求。 - Hemlock

你是想将所有字母都大写吗？ - KJYe.Name

@kjy112 不对， capitalize 只会将每个单词的第一个字母大写。http://www.w3.org/TR/CSS2/text.html#caps-prop - Hemlock

我指的是使用JavaScript而不是CSS。 - KJYe.Name

@hemlock 哈哈没什么大不了的，但是我现在知道CSS中有一个capitalize函数。 - KJYe.Name

我想要的是font-variant:small-caps;，但有一个额外的复杂性，我正在使用@font-face，除非字体有小型大写字母，否则它会恢复默认值（或者我这样认为）。 - Jeepstone

Answer 1

这不是大写字母缩小版（即开头有一个占据三到四行的大写字母）。这是小型大写字母。

最简单的方法是找一个小型大写字体，并将每个单词都变成大写。可惜在谷歌网络字体API中我能找到的唯一一个带有小型大写字母的字体可能没有正确的字符：

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

- Spacedman

---

接近了，但是font-variant: small-caps可以胜任这项工作，但字体需要合适。到目前为止最接近的答案。我会看看是否有人能推荐一个字体。 - Jeepstone

Answer 2

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

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

- jacobangel

Answer 3

看起来Lettering.js可以帮助解决这个问题，尽管它是为jQuery而不是Moo设计的。

- Olly Hodgson

Answer 4

尝试这个：

font-variant: small-caps;

它适用于所有浏览器。

- Salas

---

只有当您嵌入的字体在实际的字体文件中具有小型大写字母时，才能使用它。 - Jeepstone

Answer 5

你可以使用 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。

- KJYe.Name

Answer 6

根据其他答案，我不确定我是否理解了问题。但是，根据我的理解，如果您想要实现这种效果，必须使用JS来完成。不过，这并不需要太多的代码。

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

- Hemlock