3

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

我知道我可以使用

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

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

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

谢谢

4

6 回答 6

2

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

最简单的方法是找到一个小型大写字体，并将每个单词大写。可悲的是，我在 google web font 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

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

于 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() 函数应用于字母。

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

于 2011-01-18T16:45:31.387 回答
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

试试这个：

字体变体：小型大写；

它适用于所有浏览器。

于 2011-02-19T19:20:44.500 回答