css - CSS - 更改某个字母的样式

Question

我想更改某个字母的样式。所以字母 (U+1F600) 的样式是background-image: new-emoji-url;. 有没有办法在 CSS 中做到这一点？我努力了

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

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

我也尝试过在 fontastic 上制作图标字体，但 SVG 图标被扭曲了。

谢谢你的帮助！

Answer 1

使用 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 2

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

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

1. 如果您使用 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.
   

2. 如果您使用的是 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.
   

3. 如果您对 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)。

Answer 3

您不能这样做，因为 css 中没有字母选择器。如果您愿意，可以将该特定字母包装在某个标签中（带/不带类）并使用此标签/类来添加 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>