使用CSS3的unicode-range实现页面字体混搭

遇到需求如下：提供了两种字体文件，要求页面中中文使用方正兰亭黑体，英文使用BlaBlaSans，从而实现中英文使用不同字体。

 

首先能想到最常见的解决方案

---

实现两个class，分别设置font-family为这两个字体，再将这两个类分别应用于中文与英文元素上

此方案存在的问题：

• 工作量大，繁琐

• 无法判断元素内容为中英文时无法满足要求，比如由接口返回的内容

• 由repeat循环产生的元素中有的是英文有的是中文的情况，无法满足要求

• ...

 

总而言之该方案既繁琐，又会存在很多无法满足的情况。经过查询，我发现了css3提供了一个unicode-range属性来解决这一问题：

 

unicode-range

---

css3中的@font-face已经被广泛应用于字体设置，为人所熟知，但它有一个unicode-range属性却很容易被我们忽略掉。

unicode-range 的作用是为@font-face所设置的字体限定一个应用范围，使用unicode编码来设置范围。

eg.

@font-face {

    font-family: ‘mixFont’;

    src: url(‘../fonts/lantingHei.eot’);

    unicode-range: U+4E00-9FCB;

}

@font-face {

    font-family: ‘mixFont’;

    src: url(‘../fonts/BlaBlaSans.eot’);

}

在上述代码中，我们设置了两个相同font-family名称的font-face，并给第一个设置了应用范围。

这样当字符处于该范围内时（此处设置的是汉字字符）就会应用lantingHei字体，其他不属于该范围内的字符都会应用BlaBlaSans字体。

当然我们还可以根据需求划分更多的字符区间并给每个区间应用不同的字体。

 

bzw，汉字字符的unicode范围为：U+4E00-9FCB，英文字符：U+00-024F