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 关于使用代码 ...
随机推荐
- yum简单安装salt master与minion
首先得先安装epel的yum源: rpm -ivh http://mirrors.skyshe.cn/epel/6/x86_64/epel-release-6-8.noarch.rpm 1.SaltS ...
- springmvc多文件上传
@RequestMapping(value = "/upload", method = RequestMethod.POST) public void upload(@Reques ...
- 完美解决：Could not retrieve mirrorlist http://mirrorlist.centos.org/?release=6&arch=x
如题: 原因:没有配置resolv.conf 解决方法: 到/etc目录下配置resolv.conf加入nameserver IP,如: nameserver 8.8.8.8nameserver 8. ...
- 点击按钮出现60秒倒计时js代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- eclipse maven tomcat7 热部署
.配置tomcat a.配置jdk b.CATALINA_HOME=c:\tomcat CATALINA_BASE=c:\tomcat .tomcat配置密码 C:\Program Files\oth ...
- C 替换字符方法--1
#include "stdafx.h" //linux 底下要去掉这一行 #include <stdio.h> #include<stdlib.h> #in ...
- css设置网页文本选中样式
网页的默认的文本选中颜色是蓝底白字(大多应该是吧),这个样子: 感觉并不是特别好看,可以通过CSS3的一个特性,一个CSS3的伪类选择器::selection来设置文本被选中时的状态,比如本博客的主题 ...
- php基础面试题1
问题1:谈谈你对的PHP的基本认识. 回答:PHP是Hypertext Preprocessor(超文本预处理器)的简称,是一种用来开发动态网站的服务器端脚本语言. 问题2:什么是MVC? 回答:MV ...
- html练习
border-left:100px solid transparent; 左边框隐藏 transform:rotate(45deg); div旋转45度 用css做一个三角形 <sty ...
- CLR via C#（02）-基元类型、引用类型、值类型
http://www.cnblogs.com/qq0827/p/3281150.html 一. 基元类型 编译器能够直接支持的数据类型叫做基元类型.例如int, string等.基元类型和.NET框架 ...