使用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’);

}