unicode-range 字体混搭(转）
最先想到的方法是定义两个拥有不同字体CSS类分别赋予不同的元素。
<div class="font1"></div>
<div class="font2"></div>但是这个方法是最笨的，而且是不能完全达到要求，因为有些后端传来的字符串无法在之前就猜到时中文字符还是其他的。比如：
<div class="font_x">${news_title}</div>所以，我参考了一些文章，发现了unicode-range这个属性，用来解决这个问题。
干货如下：
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
@font-face {
font-family: 'mixFont';
src: url('fonts/STHeiti-Light.ttf');
unicode-range: U+4E00-9FCB;/*汉字字符集*/
}
@font-face {
font-family: 'mixFont';
src: url('fonts/HelveticaThin.ttf');
}
body{
font-family:mixFont, Arial;
font-size: 2rem;
}
@font-face {
font-family: 'STHeiti';
src: url('fonts/STHeiti-Light.ttf');
}
span{
font-family: STHeiti;
}
</style>
</head>
<body>
这里是一些中文字符,These are couples of characters excepect Chinese.*&(%$(^651644'Hello world' <span> 'Hello world' so as to comparetion.</span>
</body>
</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 字体混搭(转）的更多相关文章
- 常用中文字体 Unicode 编码
各大网站的字体选择 网站 字体 腾讯 font: 12px "宋体","Arial Narrow",HELVETICA; 淘宝 font: 12px/1.5 t ...
- CSS常用字体Unicode 编码
在 CSS 中设置字体名称,直接写中文是可以的.但是在文件编码(GB2312.UTF-8 等)不匹配时会产生乱码的错误. 为此,在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误. ...
- CSS 中文字体 Unicode 编码表
CSS 中文字体 Unicode 编码表 在 CSS 中设置字体名称,直接写中文是可以的.但是在文件编码(GB2312.UTF-8 等)不匹配时会产生乱码的错误. 为此,在 CSS 直接使用 Unic ...
- Solidworks提示字体Arial Unicode MS安装不正确，PDF文件中一个或多个文本字串可能遗失怎么办
从以下网站下载Arial Unicode MS字体,WIN7的直接安装即可,XP的放到windows\fonts文件夹内.重启Solidworks即可 http://font.chinaz.com/1 ...
- 【Qt开发】【ARM-Linux开发】 QT在ARM上显示字体的问题
在PC机上利用QT开发的应用程序在设置字体时,在PC上运行,可根据自己的设置,字体随之变大或变小.而移植到ARM上运行时发现,显示字体与所设置的字体不用,字体普遍偏小.经过上网搜索发现,是环境变量字库 ...
- 常用 Unicode 符号列表
Unicode 中包含了各种符号,我们可以作为图标来使用.这里整理一下常用的一些符号. 一.拉丁字母补全(Latin-1 Supplement):U+0080 至 U+00FF Unicode 编号 ...
- CSS Unicode 编码
CSS 中文字体 Unicode 编码表 在 CSS 中设置字体名称,直接写中文是可以的.但是在文件编码(GB2312.UTF-8 等)不匹配时会产生乱码的错误. 为此,在 CSS 直接使用 Unic ...
- 关于阿里图标库Iconfont生成图标的三种使用方式（fontclass/unicode/symbol）
1.附阿里图标库链接:http://www.iconfont.cn/ 2.登录阿里图标库以后,搜索我们需要的图标,将其加入购物车,如图3.将我们需要的图标全部挑选完毕以后,点击购物车图标4.这时候右侧 ...
- 关于iconfont字体图标的使用
今天用iconfont遇到了字体图标的使用问题.关于使用字体图标的方式在这里有介绍三种方式(css和js的引入和平时一样) 首先你要分清是用单个字体图标icon,还是多个字体图标icon 关于使用代码 ...
随机推荐
- ABAP 自建透明表维护
*&---------------------------------------------------------------------* *& Report ZMMR011 ...
- uva 489.Hangman Judge 解题报告
题目链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...
- 让复杂Json数据和对象自由转换 --- Gson
Gson是谷歌用于对Json操作的库,里面有着强大而又方便的功能,最常用的就是 fromJson():将json数据转化为对象: toJson():将对象转化为json数据! 对于普通的json数据使 ...
- URAL 2019 Pair: normal and paranormal (贪心) -GDUT联合第七场
比赛题目链接 题意:有n个人每人拿着一把枪想要杀死n个怪兽,大写字母代表人,小写字母代表怪兽.A只能杀死a,B只能杀死b,如题目中的图所示,枪的弹道不能交叉.人和怪兽的编号分别是1到n,问是否存在能全 ...
- js方法类库封装的简易示例
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></s ...
- Vi文档
Vi简介 Vi是一种广泛存在于各种UNIX和Linux系统中的文本编辑程序. Vi不是排版程序,只是一个纯粹的文本编辑程序. Vi是全屏幕文本编辑器,它没有菜单,只有命令. Vi不是基于窗口的,所以, ...
- uitableviewcell cell.accessoryType 右箭头
实现右侧的小灰色箭头 只要将cell的accessoryType属性设置为 UITableViewCellAccessoryDisclosureIndicator就可以了. 代码为:cell.acc ...
- 《Thinking in Java》十七章_容器深入研究_练习12(Page484)
练习12: 练习使用HashMap / LinkedHashMap / TreeMap import java.util.HashMap; import java.util.LinkedHashMap ...
- iOS，Objective-C，相册功能的实现。
#import "ViewController.h" #define kuan [UIScreen mainScreen].bounds.size.width #define ga ...
- c# 扩展方法奇思妙用基础篇八：Distinct 扩展（转载）
转载地址:http://www.cnblogs.com/ldp615/archive/2011/08/01/distinct-entension.html 刚看了篇文章 <Linq的Distin ...