CSS

Question

我想改变某个字母的样式。所以字母 (U+1F600) 的样式为 background-image: new-emoji-url;。在 CSS 中有什么方法可以做到这一点吗？我试过了

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

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

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

感谢您的帮助！

Answer 1

您不能这样做，因为 css 中没有字母选择器。如果需要，您可以将该特定字母包装在某个标签中 (with/without class) 并使用此 tag/class 添加 css.

如果需要，可以使用 javascript：

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

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

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

Answer 2

无法使用 CSS 执行此操作，但是您可以使用 javascript 在加载时扫描页面并将您的信件的所有实例用您的自定义背景包裹在一个范围内，这里是使用 jQuery:

实现

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

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

Answer 3

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

所以如果你想在你的代码中用你自己的 SVG 替换每个“”，你有几种方法可以实现它：

如果您使用 PHP，请使用 str_replace 查找角色的每个实例并将其替换为您的 SVG 文件作为 <img> 元素或空标签（例如：<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中使用background-image时注意不要忘记url()。在您的示例中，您给出了 background-image: new-emoji.svg;它永远不会起作用，它是 background-image: url(new-emoji.svg).

CSS - 改变某个字母的样式

CSS - Change style of a certain letter

fonts

emoji

fontastic