1

タイポグラフィの課題

アップデート：

上記のタイポグラフィを実現するには、jquery / css のトリックを使用する必要があります。

.underlinedまず、下線を完全に制御するために、背景画像を設定するクラスを作成する必要があります。残念ながら、border-bottom を設定するだけでは、フォントの x-height を使用するため、うまくいきません。

次に、文字列内で小文字の gなどの特定の文字を見つけて、クラスを削除するか、その特定の文字に追加のクラスを適用する必要があります。.underlined

文字列内のg、j、p、q、yを一致させ、それにクラスを適用するにはどうすればよいですか?

これに似ているはずですが、正規表現などを使用しますか?

http://jsfiddle.net/hMEHB/2/

セレクターを試してみました:containsが、文字列を分割して元に戻すのに苦労しました。

4

1 に答える 1

2

フィドルでマークアップを使用すると、次のようなものが必要になると思います。

var descenders = {"g": true, "j": true, "p": true, "q": true, "y": true};
$('a').each(function (i, elem) {
    var self = $(elem),
        textNodes = self.text().split(''),
        i = 0;
    for (i = 0; i < textNodes.length; i += 1) {
        if (descenders[textNodes[i]]) {
            textNodes[i] = '<span class="descender">' + textNodes[i] + '</span>';
        } else {
            textNodes[i] = '<span class="underline">' + textNodes[i] + '</span>';
        }
    }
    self.html(textNodes.join(''));
});

更新されたフィドル: http://jsfiddle.net/hMEHB/15/

于 2013-06-09T16:04:31.310 に答える