大部分内容来源于： http://www.zhangxinxu.com/wordpress/2016/11/css-unicode-range-character-font-face/
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta name="description" content="CSS font-face微软雅黑和苹方字体自定义示意页面" />
<meta name="keywords" content="css, font-face, font, 字体, 微软雅黑, 苹方" />
<meta name="author" content="" />
<title>引号使用宋体其他使用微软雅黑或苹方字体</title>
<style>
@font-face {
font-family: BASE;
src: local('PingFang SC'),
local("Microsoft Yahei");
}
@font-face {
font-family: quote;
src: local('SimSun');
/*使用本文的unicode-range，也就是我们使用unicode-range指定就引号使用宋体*/
unicode-range: U+201c, U+201d;
}
h1 {
font-weight: 400;
font-family: BASE;
}
.quote {
font-family: quote, BASE;
}</head>
<body>
<h1>我是“微软雅黑”或者是“苹方字体”</h1>
<h1 class="quote">我是“微软雅黑”或者是“苹方字体”，但是引号是宋体</h1></html>
unicode-range的值和语法:
unicode-range的值正如名称所示，是unicode值，就是U+以及后面可以表示各种字符和文字的几个数字或字母，初始值为：U+0-10FFFF，也就是所有字符集。语法如下，参考自MDN：
/* 支持的值 */
unicode-range: U+26; /* 单个字符编码 */
unicode-range: U+0-7F;
unicode-range: U+0025-00FF; /* 字符编码区间 */
unicode-range: U+4??; /* 通配符区间 */
unicode-range: U+0025-00FF, U+4??; /* 多个值 */
其中，?可以理解为占位符，表示0-F的值，因此，U+4??表示从U+400到U+4FF。
unicode-range的语法 就是U+跟上对应字符的charCode值。
于是，前端领域字符表示方式又多了一员：
1. HTML中字符输出使用&#x配上charCode值；
2. 在JavaScript文件中为防止乱码转义，则是\u配上charCode值；
3. 而在CSS文件中，如CSS伪元素的content属性，直接使用\ 配上charCode值。
4. unicode-range是U+配上charCode值。
那有哪些常用的unicode值范围呢？以及如何获得任意字符的unicode值呢？
unicode-range的常用unicode值及获取 对于我们中文用户，最常用的有下面这些：
- 汉字：[0x4e00,0x9fa5]（或十进制[19968,40869]）
- 数字：[0x30,0x39]（或十进制[48, 57]）
- 小写字母：[0x61,0x7a]（或十进制[97, 122]）
- 大写字母：[0x41,0x5a]（或十进制[65, 90]）
截图效果如下：
左侧的汉字都是可以点击的，然后，我又顺便花时间做了个可以预览unicode-range范围字符内容的页面，例如unicode-range对应字符显示工具兼显示基本汉字demo
地址后面的range=写上对应的unicode-range范围内容，就可以知道对应的都是那些字符了，例如，上面语法那里出现过的U+0025-00FF，我们看看都是对应哪些内容，我们把url后面改成如下图：
结果原来指的是这些字符：
某个具体的字符unicode值如何获取？
这就需要我之前在“使用　等空格实现最小成本中文对齐”一文中提到的小工具了，这里：任意字符转换成HTML识别格式工具页面
例如：
上面的
a9就是我们需要的charCode值，&#x是在HTML中显示字符实体用的，这里不用管，然后套永在unicode-range属性值中就是U+9aU+a9，一开始的宋体引号例子，我就是使用这个工具获取到U+201c和U+201d的。
unicode-range适合使用的场景
我看到有部分前端小伙伴使用unicode-range的场景是这样的，一段内容，英文数字等使用某个字体，中文使用另外一个字体，于是，使用unicode-range弄了一段自定义编码，看上去很酷，毕竟使用了很多人都不知道的unicode-range，实际上，这并不是unicode-range真正适合的应用场景（虽然确实也实现了效果），为什么呢？
比方说你希望数字英文是Helvetica字体，中文是苹方或微软雅黑，直接把英文字体放在前面就可以了！
.font {
font-family: Helvetica, 'Pingfang SC', 'microsoft yahei';
}
因为，据我所知，这些英文字体是没有中文字符集映射的，也就是，英文字体实际上对中文是没有任何作用的。考虑到font-family的字体解析是从前往后依次的，所以，自然而然上面的代码数字英文是Helvetica字体，中文是苹方或微软雅黑，完全不需要使用unicode-range做吃力不讨好的事情。
那unicode-range适合使用的场景究竟是什么呢？
在我看来，是对中文内容中的某部分中文字符做特殊字体处理，或者是英文字体中部分字符做特殊字体处理，这个才是适合的。比方说，上面使用宋体引号的案例，因为都是中文字体，因此，才有使用unicode-range的价值。
unicode-range的兼容性
我擦，caniuse打不开。
兼容性相关JSON数据参见这里。
MDN上显示为：
基本上，IE9+浏览器开始支持，Firefox 44开始支持不错，至于Chrome和移动端，大家自然可以愉快地玩耍。总而言之，兼容性还是很不错的，至少在实际项目中使用我觉得很OK啦。IE8什么的字体效果差点就差点，毕竟不是影响功能的CSS属性。
结语
在处理unicode-range的时候，突然感叹，要是@font-face规则中可以定义文字的默认颜色就好了，这样，我们要在前端实现搜索高亮效果，根本就不需要对HTML做任何事情，直接把对于的搜索内容转换成unicode编码，使用unicode-range匹配，自动变得，那就厉害了，可惜不支持。毕竟仅仅是字体匹配似乎不是很明显。
本人附加个小示例，功能是可以动态指定指定文字或符号 为特殊字体：
<style id="hCss">
@font-face {
font-family: BASE;
src: local('PingFang SC'),
local("Microsoft Yahei");
}
@font-face {
font-family: quote;
src: local('SimSun');
/*使用本文的unicode-range，也就是我们使用unicode-range指定就引号使用宋体*/
unicode-range: U+201c, U+201d;
}
h1 {
font-weight: 400;
font-family: BASE;
}
.quote {
font-family: quote, BASE;
}
</style>
<script>
function toUnicode(str){
if(typeof str=='undefined'||str==null||str==''){ return null; }
var returnArr = [];
for(var i=0,iLen=str.length; i<iLen; i++) {
var char = str.charAt(i),// 获取字符
code = str.charCodeAt(i), // 数字编码值
str0 = String.fromCharCode(code),// 编码互转
code16 = code.toString(16), // 转为16进制数组 "4e2d"
ustr = "U+"+code16;//"\\u"+code16; // 变成字面量表示法 "\u4e2d"
returnArr.push(ustr);
}
return returnArr;
}
var arr = toUnicode("\“微软雅黑\”");
var hCss = document.querySelector('#hCss') || null;
var fontFace = '@font-face{font-family: pa; src: local(\'SimSun\'); unicode-range:'+arr.join(',')+';} .payattention{font-family:pa, BASE;}';
hCss.append(fontFace);
</script>
1754
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
