Применить буквицы к каждому слову в ссылке

Question

Я бы хотел воссоздать эффект меню, видимый на http://www.thedecoratorsource.co.uk, используя шрифты CSS и буквицы.

Я знаю, что могу использовать

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

, которое даст мне первое слово с большим первым символом, но я хочу применить его к каждому слову. Я предполагаю, что нет способа сделать это с помощью CSS (3). Будет ли моя лучшая ставка с JavaScript? У меня уже есть Moo на странице, так что это мой предпочтительный метод.

Я не хочу добавлять дополнительный HTML в мои ссылки для достижения этой цели.

Спасибо

Answer 1

Это не заглавные буквы (это когда у вас есть большая заглавная буква в начале абзаца, которая занимает три или четыре строки).Это маленькие шапки.

Самый простой способ - найти шрифт маленьким заглавным шрифтом и использовать каждое слово с заглавной буквы.К сожалению, единственный шрифт, который я могу найти на веб-шрифте Google 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

Попробуйте:

вариант шрифта: small-caps;

Работает во всех браузерах.

Answer 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('');
    });
  });

Answer 5

вы можете использовать toUpperCase ();Функция JavaScript, чтобы сделать все буквы заглавными.Пример:

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

, поэтому в вашем случае я бы взял все содержимое элементов, которые вы хотите использовать для своей выгоды, и применил к буквам функцию toUpperCase ().:

<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 6

Похоже, Lettering.js поможет с этим, хотя это для jQuery, а не Moo.