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

时间:2011-12-13 19:13:33

标签: javascript html css fonts

我刚收到一位平面设计师的简报,他希望将font-X用于网页上的大部分文字,但是也选择使用font-Y来表示某些特定字符(e,k,l,或多个)。

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

如果这个要求不能改为“每个单词只使用一个字体”,那么有一种优雅的方法可以解决这个问题吗?

从最终的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可以用来获取font-X的DOM元素,然后解析它们并为需要font-Y的特殊字符添加跨度?

否则也许有一些CSS指令来指示特定字符​​应该使用什么字体(一厢情愿?:)

由于

3 个答案:

答案 0 :(得分:5)

为了避免痛苦,我会(让平面设计师)设计一个混合两种字体的自定义字体文件。如果没有你处于痛苦的世界,我就看不到其他任何解决方案;)

答案 1 :(得分:1)

如果由于某种原因你被诅咒并且无法使用ThomasM的解决方案,请试试这个。警告text需要只包含文字。它不能包含HTML元素。

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

答案 2 :(得分:1)

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

然而,正如24ways文章警告的那样,Firefox或旧版Internet Explorer目前不支持此功能。