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 关于使用代码 ...
随机推荐
- alv中编辑的时候quan字段小数位数被截取掉
alv中编辑的时候quan字段小数位数被截取掉:位数太多(最大只能为 0) 解决方法: ls_fcat-fieldname = 'ZKBSL'. ls_fcat-coltext = '卡板数 ...
- Aix下如何运行Java程序
windows下:java -classpath %classpath%;bb.jar;aa.jar [main class]main class是打包的主类,已经指定了主类,可以不输入.另外,IBM ...
- rsync使用
1)拷贝本地文件.当SRC和DES路径信息都不包含有单个冒号":"分隔符时就启动这种工作模式. 如:rsync -a ./test.c /backup 2)使用一个远程 ...
- js生成验证码并验证
前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.as ...
- nodejs链接mongodb数据库
nodeJs链接mongodb数据库有两种方式,第一种是利用官方自己开发的npm包mongodb链接,第二种是利用第三方npm包mongoose链接:这里如果是window操作系统,建议用mongoo ...
- Centos以rpm方式进行安装MySql
安装过很多次mysql了,却没好好总结过,每次安装完了都忘,下次还要重新Google,这次总结下,自己以后也有的查. 1.安装采用的的rpm包的方式,安装前要先看系统内是否安装了旧版本的MySql和m ...
- 项目差异class文件提取-->上线用
package fileReader; import java.io.BufferedReader; import java.io.File; import java.io.FileInputStre ...
- 月考（cogs 1176）
[题目描述] 在上次的月考中Bugall同学违反了考场纪律还吃了处分,更可气的是在第二天的校会时 间学校就此事做了全校通报. 现已知在当天校会时间有总共N个同学听到了有关Bugall的处分决定. B ...
- 常用shell命令操作
1.找出系统中所有的*.c 和*.h 文件 (-o 或者) $find / -name "*.cpp" -o -name "*.h" 2.设定 eth0 的 I ...
- NYOJ题目817英文藏头诗
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtEAAAKXCAIAAADLqoEhAAAgAElEQVR4nO3dO1LrzNbG8W8S5AyE2D