遇到需求如下:提供了两种字体文件,要求页面中中文使用方正兰亭黑体,英文使用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: ‘mixF