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 关于使用代码 ...
随机推荐
- Mysql 基础1
Mysql int 整型float 小数double 小数varchar(20) 字符串bit 布尔型数据datetime 日期时间类型text 长文本 money 存货币image 存二进制数据 数 ...
- 控制器与xib关联(用xib布局控制器)
IOS Xib使用——为控制器添加Xib文件 Xib文件是一个轻量级的用来描述局部界面的文件,它与StoryBoard类似,都是使用Interface Bulider工具进行编辑.但是StoryBoa ...
- 狼抓兔子（bzoj 1010）
Description 现在小朋友们最喜欢的"喜羊羊与灰太狼",话说灰太狼抓羊不到,但抓兔子还是比较在行的, 而且现在的兔子还比较笨,它们只有两个窝,现在你做为狼王,面对下面这样一 ...
- Git命令之上传与同步
操作步骤,可参考:http://blog.csdn.net/chenyufeng1991/article/details/47299461. 1.在本地仓库中,即项目目录下创建文件,如: 2.查看当前 ...
- 苹果应用 Windows 申请 普通证书 和Push 证书 Hbuilder 个推(2)
s上一篇 讲述了android 如何打包,这一篇 看一下如何IOS下打包 在苹果上申请证书,及其麻烦,我写下来,有需要的直接拿走即可: 首先 苹果的证书分两种 一种是 development 证书,另 ...
- 访问javaweb服务器sessionid存放问题
sessionid存放在cookies里面,key是JSESSIONID
- Linux 查看 删除进程
这东西,时间久不用总容易忘....记下来! 1. 在 LINUX 命令平台输入 1-2 个字符后按 Tab 键会自动补全后面的部分(前提是要有这个东西,例如在装了 tomcat 的前提下, 输入 to ...
- codevs 1080 线段树练习
链接:http://codevs.cn/problem/1080/ 先用树状数组水一发,再用线段树水一发 树状数组代码:84ms #include<cstdio> #include< ...
- php单双引号
1.定义字符串 定义字符串时,只有一种引号被视为定义符,即单引号或双引号.于是,如果一个字符串由双引号开始,那么只有双引号被分析器解析.这样,你就可以在双引号串中包含任何其他字符,甚至单引号.下面的引 ...
- json_encode() 和 json_decode()
php json_decode返回数据js的处理,json_decode后,返回到前台的数据如:encode_str => {"green":10,"size&qu ...