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

【问题标题】：Apply drop caps to each word in a link对链接中的每个单词应用首字下沉
【发布时间】：2011-01-18 16:29:11
【问题描述】：

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

我知道我可以使用

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

这会给我第一个字符更大的第一个单词，但我想将它应用于每个单词。我猜没有办法用 CSS(3) 做到这一点。我最好用javascript吗？我已经在页面上添加了 Moo，所以这将是我的首选方法。

我不想在我的链接中添加额外的 HTML 来实现这一点。

谢谢

【问题讨论】：

有text-transform: capitalize，但这并不能让你到达那里。
您是否尝试将所有字母大写？
@kjy112 不，capitalize 只会将每个单词的第一个字母大写。 w3.org/TR/CSS2/text.html#caps-prop
我指的是使用 javascript 而不是 css。
@hemlock 哈哈，没什么大不了的，但现在我知道 css 中有一个大写字母

标签： javascript html css capitalization

【解决方案1】：

这不是首字下沉（即段落开头有一个大写字母，需要三到四行）。这是小型股。

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

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

【讨论】：

关闭，但 font-variant: small-caps 可以完成工作，但字体需要合适。迄今为止最接近的答案。我会看看是否有人可以推荐一种字体。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

看起来Lettering.js 会对此有所帮助，尽管它是针对 jQuery 而不是 Moo。

【讨论】：

【解决方案4】：

根据这些其他答案，我不确定我是否理解这个问题。但是，根据我的理解，如果你想要那种确切的效果，这必须用 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('');
    });
  });

【讨论】：

【解决方案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

【讨论】：

【解决方案6】：

试试这个：

字体变体：小型大写字母；

它适用于所有浏览器。

【讨论】：

仅当您嵌入的字体在实际字体文件中有小型大写字母时。