Question

我想改变某个字母的风格。所以字母（U + 1F600）的样式为background-image: new-emoji-url;。在CSS中有没有办法做到这一点？我试过了

 {
    background-image: new-emoji.svg;
}

但那没用。我做错了什么？这甚至可能吗？

我也试过在fontastic上制作一个Icon字体，但是SVG图标变形了。

感谢您的帮助！

Answer 1

你不能这样做，因为css中没有字母选择器。如果你想要，你可以将某个特定字母包装在某个标签中（有/没有类），并使用此标签/类添加css。

如果你想要，可以使用javascript：

＆＃13;

$(function() {
  $('div').html(
    $('div').html().split(/i/).join("<span class='colored'>i</span>")
  );
});

＆＃13;

div span.colored {
  color: white;
  background: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>This is my text</div>

＆＃13;

Answer 2

使用CSS无法做到这一点，但是你可以使用javascript在加载时扫描页面并用你的自定义背景包装你的字母的所有实例，这是使用jQuery的实现：

$('div').each(function () {
    $(this).html($(this).html().replace(/(\&#128512;)/g, '<span style="background-image: new-emoji.svg; yellow">$1</span>'));
});

将'div'替换为包含您要替换的字符的元素。

Answer 3

首先，您不能直接在CSS中设置字符样式。您可以根据标记名称，ID，类，伪元素，伪类和属性进行样式设置。

因此，如果您想在代码中用自己的SVG替换每个“”，您可以通过以下几种方式实现它：

如果您正在使用PHP，请使用str_replace查找角色的每个实例，并将其替换为您的SVG文件，作为<img>元素或空标记（例如：a <span>）将您的SVG设为background-image。

// CSS
.my-emoji {
    background-image: url(my-emoji.svg);
    // don't forget "display", "height" and "width" attributes
}

// PHP
str_replace("", "<span class='my-emoji'></span>", $my_content);
// Then output $my_content where you want it.

如果您使用的是Javascript，则可以对replace()执行相同操作。

// CSS
//same as #1

// JS
var res = my_content.replace("", "<span class='my-emoji'></span>");
// Then output my_content where you want it.

如果您可以完全控制HTML，则可以使用标记包装“”的每个实例，并使用CSS设置样式。

// HTML
<span class="my-emoji"></span>

// CSS
.my-emoji {
    text-indent: -9999px;
    background-image: url(my-emoji.svg);
    // don't forget "display", "height" and "width" attributes
}

在CSS中使用url()时，小心不要忘记background-image。在您的示例中，您提供了background-image: new-emoji.svg;它本来就没用过，它是background-image: url(new-emoji.svg)。

CSS - 更改某个字母的样式

3 个答案: