是否有一种优雅的方法来处理对一个单词使用多种字体的支持?

Is there an elegant way to handle supporting using multiple fonts with a word

本文关键字：一个 单词使 支持 字体 方法 一种 是否 处理      更新时间：2023-09-26

我刚刚收到一位平面设计师的简报，他想在网页上的大部分文本使用font-X，但在某些特定字符(e,k,l,s)上也选择使用font-Y。

除非有一个技巧，我不知道处理这个，这似乎是一个正确的痛苦在…

如果这是一个不能更改为"每个单词只能使用一种字体"的要求，是否有一种优雅的方法来处理它?

从html结尾的角度来看，代码似乎需要像

这样。
<div class="use_font_x">
    H<span class="use_font_y">ell</span>o Wor<span class="use_font_y">l</span>d<span class="use_font_y">s</span>
</div>

我在想一些javascript/jquery可以用来拿起dom元素的font-X，然后解析它们，并添加在跨度的特殊字符，需要font-Y ?

或者可能有一些CSS指令来指示特定字符应该使用什么字体(一厢情愿的想法?:)

谢谢

为了节省您的痛苦，我会(让图形设计师)设计一个混合这两种字体的自定义字体文件。

如果由于某种原因您被诅咒了，无法使用ThomasM的解决方案，请尝试以下方法。警告text只需要文本。不能有HTML元素

text.replace(/[ekls]/ig,'<span class="use_font_y">$&</span>');

CSS3确实提供了unicode-range规则，您可以在其中指定用于特定字符的字体。最初的意图是覆盖混合语言页面和其他情况下，其中字符不可用的特定字体，但可以在这里使用，详见http://24ways.org/2011/unicode-range。

正如24ways的文章所警告的那样，目前Firefox和旧版本的Internet Explorer都不支持此功能。

相关文章：