unicode-range字体混搭
来源:互联网 发布:笔记本自带看图软件 编辑:程序博客网 时间:2024/05/21 06:19
前些日子遇到一个技术难点:中文的字体要不同于数字和英文。
最先想到的方法是定义两个拥有不同字体CSS类分别赋予不同的元素。
<div class="font1"></div><div class="font2"></div>但是这个方法是最笨的,而且是不能完全达到要求,因为有些后端传来的字符串无法在之前就猜到时中文字符还是其他的。
<div class="font_x">${news_title}</div>所以,我参考了一些文章,发现了unicode-range这个属性,用来解决这个问题。
干货如下:
<html><head><title></title><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上,这样能清晰的对比字体之间的差异。
主要参考文章:妙用unicode-range
0 0
- unicode-range字体混搭
- CSS unicode-range特定字符使用font-face自定义字体
- css 字体的unicode码
- CSS字体unicode编码表
- 获取字体内所有Unicode编码
- CSS常用字体的Unicode编码
- QQ空间的字体/unicode编码在字体中的用处
- Range
- Range
- range
- range()
- Range
- range
- Range
- Range
- Range
- range
- range
- EasyAR尝鲜系列教程之自定义Marker的实现
- HDU——1232 畅通工程
- 关于Java的Classpath详解
- 并查集(转发)
- 默默的一只小透明的编程之路---永远在开始的路上
- unicode-range字体混搭
- Android Facebook分享功能实现
- ios开发之安装开发文档
- 利用libvirt命令动态挂载数据盘的方法
- CSS3:nth-child()伪类选择器,Table表格奇偶数行定义样式
- LoadRunner参数化详解
- linux c获取mac地址
- 严格限定泛型类型采用多重界限
- ——黑马程序员——C语言构造类型—结构体(一)