Question

是否可以使用CSS在网页上使用图像精灵来处理文字？

<html>
    <head>
        <style>
        p { background-image: url('font.gif') }
        p 'character' { width: 4px; height: 5px }
        p 'a' { background-position: 0 0 }
        p 'b' { background-position: -6px 0 }
        p 'c' { background-position: -10px 0 }
        etc...
        </style>
    </head>
    <body>
        <p>This is some test text. It doesn't mean anything.</p>
    </body>
</html>

Answer 1

我不确定为什么要以这种方式使用图形文本，但请尝试使用此代码。

<html>
<head>
    <style>
    p { background-image: url('font.gif');width: 4px; height:5px;display:inline-block;}
    p .A { background-position: 0 0 }
    p .B { background-position: -6px 0 }
    p .C { background-position: -10px 0 }
    </style>
</head>
<body>
    <p class="C"></p><p class="A"></p><p class="B"></p>
</body>
</html>

Answer 2

I think using javascript to manipulate the text is a good idea.


<html>
    <head>
        <style>

            span {
                background-image: url('font.gif');
                display: inline-block;
                width: 10px;
                height: 14px;
            }
            .a {
                background-position: 0 0
            }

            .b {
                background-position: -6px 0
            }

            .c {
                background-position: -10px 0
            }
        </style>
        <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    </head>
    <body>
    <p id="text">This is some test text. It doesn't mean anything.</p>
    </body>
    <script>
        var p = $("#text");
        var text = p.text();
        p.html('');
        for (var i in text) {
            p.append('<span class="' + text[i] + '"></span>');
        }
    </script>
</html>

我不知道你为什么要这样做，如果你只是想改变字体，你可以使用 @字体面，像

<style>
@font-face {
    font-family:myfont;
    src:url(font.ttf);
}

* {
    font-family:myfont;
}

</style>

使用图像精灵和CSS的文本

2 个答案: