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 关于使用代码 ...
随机推荐
- salt安装与简单使用---基于centos6.5
1.简介SaltStack 是一个服务器基础架构集中化管理平台,具备配置管理.远程执行.监控等功能,一般可以理解为简化版的puppet和加强版的func.SaltStack 基于Python语言实现, ...
- php面向对象：封装
OOP三大特性:封装.继承.多态. 封装的目的:为了让类更安全封装的做法:1.类里面的成员变量做为private2.使用成员方法来间接访问成员变量3.在该方法里面加限制条件 注意:php类里面不允许出 ...
- increadbuild重装
客户端和服务端都重装,可能需要去任务管理其中停止相关的服务,重装之前要去注册表中删除旧的注册表项.一般情况下incredibuild对应的位置是:64位系统HKEY_CLASSES_ROOT\\Wow ...
- HTML 表格垂直对齐方式
HTML表格标记教程(25):行的垂直对齐属性VALIGN在垂直方向上,可以设定行的对齐方式,分别有居上.居中.居下3种.基本语法<TR VALIGN="TOP">&l ...
- ios waxpatch lua语法
Wax Lua 使用方法 说一下 Wax 的特点,它支持你在脚本里使用任何 OC 的类,同样也支持你创建一个类. 使用一个类时你会这样使用: 1 2 NSString -- Returns the N ...
- 解决window删除文件时提示: 源文件名长度大于系统支持的长度
import java.io.File; /** */ public class DeleteFiles { public static void deleteFiles( File file ){ ...
- 打开Genesis设置单位为mm
打开Genesis界面: 点击Configuration: 可看到只要设置get_def_units的值即可: 打开C:\genesis\sys\config配置文件,在最后一行加入:get_def_ ...
- Java遍历List的时候删除item
参考:http://blog.csdn.net/longyulu/article/details/8315068 在Java中有时候我们会需要对List里面的符合某种业务的数据进行删除,但是如果不了解 ...
- NYOJ之水仙花数
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsAAAAInCAIAAAAZDHiCAAAgAElEQVR4nO3dPVLjzNoG4G8T5CyEFC
- 【Java EE 学习 21 上】【其它类型的监听器】【使用HttpSessionActivationListener监听session的活化和钝化】
一.ServletContextListener Method Summary void contextDestroyed(ServletContextEvent sce) R ...