html - 为文本的每个字符指定不同颜色的最小 HTML/CSS

Question

我需要为 HTML 页面中文本的每个字符指定不同的颜色。文本很长，生成的 HTML 文件大小应尽可能小。换句话说，使用的颜色格式标签应该尽可能少。您建议如何执行此任务？

Answer 1

您需要将每个字符包装在一个元素中，所以看起来最小的代码就像

<a style=color:#123456>x</a>

或者

<font color=#123456>x</font>

对于每个字符 x。代码长度相等，但在后者中，数字符号“#”实际上可以省略（省略它是错误的，但根据浏览器实践和 HTML5 草案，错误处理实际上意味着#提供该值不构成浏览器已知的颜色名称。这是有风险的，所以我会选择第一个。

如果颜色实际上并非完全不同，而是可能重复，那么使用

<a class=¿>x</a>

与 CSS 定义一起

.¿{color:#123456}

可能会导致更短的代码。然后你需要一个类名生成器；您可以将类名保留为单个字符，但需要注意确保类选择器符合 CSS 语法。

Answer 2

我真的不知道是否有办法在 CSS 中做到这一点，但这是我在 JavaScript 中的代码

    var textID = document.getElementById("text"); // go and take the Text from the ID
var text = textID.innerHTML; // Take the text from the
var toChange = text.split(""); // Separrate each letter into array
var newText = ""; // buffer text
var aClassName = ["red", "green", "blue"]; // class name that you want
var colorNumber = 0; // counter to loop into your class

for (var i=0, ii=toChange.length; i<ii; i++){
        if(colorNumber == aClassName.length){ // if you reach the end of your class array
        colorNumber = 0; //Set it back to 0
    }
    // Add between each letter the span with your class
    newText += "<span class="+aClassName[colorNumber]+">"+toChange[i]+"<\/span>";
    colorNumber++
}
// Output your text into the web
textID.innerHTML = newText;

http://jsfiddle.net/WPSrX/

Answer 3

我借此机会尝试回答这个问题。诚然，这不是一个直接的答案，而是另一种看待它的方式，它可以使您的代码保持在绝对最低限度：如果您想要的是一种非侵入式水印；我会建议最简单的解决方案来设置文本的不透明度，并在 css 中设置文本阴影。你可以尝试这样的事情：

.myText
{
color: white; (or whatever)
opacity:0.5;
text-shadow:....
}

文字阴影有很多选择；但这是一个你可以玩的发电机。

如果您希望根据图像更改颜色，我想您也可以通过 javascript 生成这两种颜色。

Answer 4

你没有分享代码，所以我没有什么可以改进的，所以最好的办法就是向你展示一些速记 CSS 和最小长度的 CSS 类......

HTML

<span class="r">red</span>

CSS

.r {color: #f00;}