一段文本内，有汉字、英文、数字、标点等等，如何为其应用不同的字体呢？

有这个需求吗？其实挺常见，很多字体在部分元素上的表现并不好，一种字体通吃一切是不现实的，就以我们天天在看天天在用的微软雅黑说事。

<span style='font-family:"Microsoft YaHei";font-size:30px;'>我是“微软雅黑”</span>
<span style='font-family:"SimSun";font-size:30px;'>我是“宋体”</span>

不同的引号
不同的引号

可以看出同为相同的中文引号，“” 不同字体下的显示并不太相同。

一段文本内如果有部分文字需要其他的字体，我们通常的做法是：将需要其他字体的文本用一个标签包裹起来，然后在为这个标签设置相应的字体即可。

但是这样做有两个问题：

  1. 违背表现和结构相分离的原则。
  2. 并非每个场景下，我们都有可能去新增标签。

回到分享本文的初衷，实际有遇到这样一个bug:

分不清是I还是l
分不清是I还是l

斜体快捷键上 Ctrl + I, 由于默认字体是微软雅黑，导致实际的效果看起来是下图这样的：

分不清是I还是l
分不清是I还是l

此处就面临第二种局面，此处并不具备修改HTML结构，给单独的 I 外部包裹一个标签来设置字体。

先直接看解决方案，实现代码如下：

@font-face {
    font-family: 'luckysheet-font-i';
    src: local('SimSun');
    unicode-range: U+49;
}
.jfk-tooltip-contentId {
    font-family: 'luckysheet-font-i', 'Microsoft YaHei';
}

应用上面代码后，对比效果为：

现在很明显了
现在很明显了

核心应用知识为 @font-face 以及其中的 unicode-range 属性。

  1. font-family 首先声明了一个字体，名称为 luckysheet-font-i，
  2. src 指定它所使用的字体资源就是本地名为宋体（simsun）的字体资源。
  3. unicode-range 表示字符编码的范围，即只有在这些范围内的字符才会应用此字体。

关于unicode-range有以下几种语法

/* 支持的值 */
unicode-range: U+26;        /* 单个字符编码 */
unicode-range: U+0-7F;
unicode-range: U+0025-00FF;    /* 字符编码区间 */
unicode-range: U+4??;       /* 通配符区间 */
unicode-range: U+0025-00FF, U+4??; /* 多个值 */

关于u+后面的中则是此字符对应的unicode编码，各种语言都有获取字符编码的方式，如使用JavaScript获取字符对应的编码可以使用以下方法:

'要获取的字符'.charCodeAt(0).toString(16);

在 unicode-range 属性值中使用获取的字符编码时，需要在前面加上 U+ .

再来几个应用实例：

<p class="demo1">仅对数字生效1234567890</p>
<p class="demo2">仅对汉字生效1234567890</p>
<p class="demo3">仅对“引号”生效1234567890</p>
<style>
    @font-face {
        font-family: "demo1";
        src: local("SimHei");
        unicode-range: U+30-39;
    }
    .demo1 {
        font-family: "demo1", "Microsoft YaHei";
    }

    @font-face {
        font-family: "demo2";
        src: local("KaiTi");
        unicode-range: U+4e00-9fa5;
    }
    .demo2 {
        font-family: "demo2", "Microsoft YaHei";
    }

    @font-face {
        font-family: "demo3";
        src: local("SimSun");
        unicode-range: U+201C, U+201D, U+FF0C, U+3002;
    }
    .demo3 {
        font-family: "demo3", "Microsoft YaHei";
    }
</style>

效果

运行效果
运行效果