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

本文介绍了如何利用CSS3的unicode-range属性来实现页面中中文和英文使用不同字体的需求,避免了通过设置多个class带来的繁琐和局限性。通过设定字体的unicode应用范围,可以智能地根据字符编码选择相应的字体,简化了工作流程并解决了动态内容的字体匹配问题。
摘要由CSDN通过智能技术生成

遇到需求如下:提供了两种字体文件,要求页面中中文使用方正兰亭黑体,英文使用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
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值