最先想到的方法是定义两个拥有不同字体CSS类分别赋予不同的元素。

  1. <div class="font1"></div>
  2. <div class="font2"></div>

但是这个方法是最笨的，而且是不能完全达到要求，因为有些后端传来的字符串无法在之前就猜到时中文字符还是其他的。比如：

  1. <div class="font_x">${news_title}</div>

所以，我参考了一些文章，发现了unicode-range这个属性，用来解决这个问题。

干货如下：

  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4.     <style type="text/css">
  5.         @font-face {
  6.             font-family: 'mixFont';
  7.             src: url('fonts/STHeiti-Light.ttf');
  8.             unicode-range: U+4E00-9FCB;/*汉字字符集*/
  9.         }
  10.         @font-face {
  11.             font-family: 'mixFont';
  12.             src: url('fonts/HelveticaThin.ttf');
  13.         }
  14.         body{
  15.             font-family:mixFont, Arial;
  16.             font-size: 2rem;
  17.         }
  18.         @font-face {
  19.             font-family: 'STHeiti';
  20.             src: url('fonts/STHeiti-Light.ttf');
  21.         }
  22.         span{
  23.             font-family: STHeiti;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     这里是一些中文字符,These are couples of characters excepect Chinese.*&(%$(^651644'Hello world' <span> 'Hello world' so as to comparetion.</span>
  29. </body>
  30. </html>

代码中，使用自定义字体定义了两次mixFont，第一次用unicode-range来控制了应用相应的字体(STHeiti-Light)的应用范围即U+4E00-9FCB，而这正是汉字的Unicode字符集。第二次用不同的字体（HelveticaThin）定义mixFont，而没有加unicode-range，这样会应用于汉字字符集之外的字符上。
之后，将mixFont应用到body上就可以了，这样干净利落地完成了区分字体。
接着，为了对比测试结果，又创建了一个STHeiti字体应用到span上，这样能清晰的对比字体之间的差异。

文／乘着风（简书作者）
原文链接：http://www.jianshu.com/p/7980ec695326
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。

unicode-range 字体混搭(转）的更多相关文章

  1. 常用中文字体 Unicode 编码

    各大网站的字体选择 网站 字体 腾讯 font: 12px "宋体","Arial Narrow",HELVETICA; 淘宝 font: 12px/1.5 t ...

  2. CSS常用字体Unicode 编码

    在 CSS 中设置字体名称,直接写中文是可以的.但是在文件编码(GB2312.UTF-8 等)不匹配时会产生乱码的错误. 为此,在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误. ...

  3. CSS 中文字体 Unicode 编码表

    CSS 中文字体 Unicode 编码表 在 CSS 中设置字体名称,直接写中文是可以的.但是在文件编码(GB2312.UTF-8 等)不匹配时会产生乱码的错误. 为此,在 CSS 直接使用 Unic ...

  4. Solidworks提示字体Arial Unicode MS安装不正确，PDF文件中一个或多个文本字串可能遗失怎么办

    从以下网站下载Arial Unicode MS字体,WIN7的直接安装即可,XP的放到windows\fonts文件夹内.重启Solidworks即可 http://font.chinaz.com/1 ...

  5. 【Qt开发】【ARM-Linux开发】 QT在ARM上显示字体的问题

    在PC机上利用QT开发的应用程序在设置字体时,在PC上运行,可根据自己的设置,字体随之变大或变小.而移植到ARM上运行时发现,显示字体与所设置的字体不用,字体普遍偏小.经过上网搜索发现,是环境变量字库 ...

  6. 常用 Unicode 符号列表

    Unicode 中包含了各种符号,我们可以作为图标来使用.这里整理一下常用的一些符号. 一.拉丁字母补全(Latin-1 Supplement):U+0080 至 U+00FF Unicode 编号 ...

  7. CSS Unicode 编码

    CSS 中文字体 Unicode 编码表 在 CSS 中设置字体名称,直接写中文是可以的.但是在文件编码(GB2312.UTF-8 等)不匹配时会产生乱码的错误. 为此,在 CSS 直接使用 Unic ...

  8. 关于阿里图标库Iconfont生成图标的三种使用方式（fontclass/unicode/symbol）

    1.附阿里图标库链接:http://www.iconfont.cn/ 2.登录阿里图标库以后,搜索我们需要的图标,将其加入购物车,如图3.将我们需要的图标全部挑选完毕以后,点击购物车图标4.这时候右侧 ...

  9. 关于iconfont字体图标的使用

    今天用iconfont遇到了字体图标的使用问题.关于使用字体图标的方式在这里有介绍三种方式(css和js的引入和平时一样) 首先你要分清是用单个字体图标icon,还是多个字体图标icon 关于使用代码 ...

随机推荐

  1. plsql客户端显示菜单等

    不小心把plsql的左边的都关了,如图 菜单条---工具---浏览器. 即可.

  2. [Android Pro] Fragment中使用SurfaceView切换时闪一下黑屏的解决办法

    方法一.在Activity的onCreate中添加如下代码 getWindow().setFormat(PixelFormat.TRANSLUCENT); reference to :  http:/ ...

  3. October 4th 2016 Week 41st Tuesday

    Patience! The windmill never strays in search of the wind. 耐心等待!风车从不跑去找风. Sometimes we need to be pa ...

  4. UVa1592_数据库

    #include<iostream> #include<cstdio> #include<vector> #include<utility> #incl ...

  5. Android中通过反射获取资源Id

    package com.cp.utils; import android.content.Context; public class CPResourceUtil { public static in ...

  6. DB2 嵌入式应用中定义游标（开放平台上）

    DECLARE CURSOR statement The DECLARE CURSOR statement defines a cursor. Invocation Although an inter ...

  7. jq 全选和反选以及判断那条被选中

    <body><div><input type="checkbox" id="a" />全选</div><d ...

  8. CLR via C#(14)-可空值类型，关于？和？？的故事

    我们都知道,值类型是不能为Null的,但是在实际应用中有些情形却需要将值类型置为null.因此,CLR中引用了可空值类型的用法.今天的文章中见到最多的符号估计就是?了吧. ?——初识可空值类型 1.  ...

  9. Android 下拉刷新

    以前旧版用的是开源的PullToRefresh第三方库,该库现在已经不再维护了: chrisbanes/Android-PullToRefreshhttps://github.com/chrisban ...

  10. OCJP(1Z0-851) 模拟题分析（五）over

    Exam : 1Z0-851 Java Standard Edition 6 Programmer Certified Professional Exam 以下分析全都是我自己分析或者参考网上的,定有 ...