我的冒险之旅是从一个相当简单的任务开始的。我有一个满文字在传统的脚本，我想改变所有的元音在这个词（忽略连字），以不同的颜色
<p>ᠠᠮᠪᡠᠯᠠ ᠪᠠᠨᡳᡥᠠ</p>
<p><span class="red">ᠠ</span>ᠮᠪᡠᠯ<span class="red">ᠠ</span> ᠪᠠᠨ<span class="red">ᡳ</span>ᡥ<span class="red">ᠠ</span></p>顺便说一句，这不是我测试的实际生产代码，只是我能记住的，所以如果有任何错别字，请原谅我。（class .red只是定义了颜色：red;）.
当然，这并没有奏效。作为一个草书，当我把一个字母包裹在一个跨度里时，我在单词内部创造了一个人工的断裂。所以我很好奇：阿拉伯文也是草书。。所以我随便找了一句阿拉伯语
<p> مرحبًا، كيف يم<span class="red">ن</span>نني مساعدتك؟ </p>它（对我）起了作用。
然后，我尝试考虑其他解决方案，但没有什么比使用HarfBuzz或重新实现字形替换，连接，字距调整规则在HTML画布上手动似乎做的伎俩，这两个都不会是我的一个简单的网站想法的想法，坦率地说，这两个我目前没有能力做到。也许我可以手动编辑字体并将每个字形链接到一个（可能是非法的）unicode代码点，但这肯定会违反一些在线字体许可证。我也试过自由变量选择器，但没有用（你不能得到每一个可能的组合只是与这些，有些字体甚至不支持它们）。
很可惜，这么简单的工作，这么快就陷入了死胡同;这就是少数草书在数码时代的烦恼。任何指示将不胜感激！
1条答案
按热度按时间c0vxltue1#
A.使用SVG：一种选择是将文本转换为SVG图像，并将颜色应用于图像中的特定元素。您可以为每个字符创建单独的文本元素，并使用CSS单独设置它们的样式。SVG为您提供了更大的灵活性来操作和设置单个字符的样式。但是，请记住，出于性能方面的考虑，这种方法可能不适合大型文本。
B.使用
:nth-letter选择器：请记住，目前浏览器对
:nth-letter的支持是有限的，因此在各种浏览器中测试此代码以确保其按预期工作非常重要。