创建时间:2021-11-11
统计字数:1111
统计字数:1111
阅读时间: 4min
本文链接:https://chends.com/2021/11-11-more-font-in-one-tag/
---
一段文本内，有汉字、英文、数字、标点等等，如何为其应用不同的字体呢？
有这个需求吗？其实挺常见，很多字体在部分元素上的表现并不好，一种字体通吃一切是不现实的，就以我们天天在看天天在用的微软雅黑说事。
```html
我是“微软雅黑”
我是“宋体”
```
可以看出同为相同的中文引号，`“”` 不同字体下的显示并不太相同。
一段文本内如果有部分文字需要其他的字体，我们通常的做法是：将需要其他字体的文本用一个标签包裹起来，然后在为这个标签设置相应的字体即可。
但是这样做有两个问题：
1. 违背表现和结构相分离的原则。
2. 并非每个场景下，我们都有可能去新增标签。
回到分享本文的初衷，实际有遇到这样一个bug:
斜体快捷键上 Ctrl + I, 由于默认字体是微软雅黑，导致实际的效果看起来是下图这样的：
此处就面临第二种局面，此处并不具备修改HTML结构，给单独的 `I` 外部包裹一个标签来设置字体。
先直接看解决方案，实现代码如下：
```css
@font-face {
font-family: 'luckysheet-font-i';
src: local('SimSun');
unicode-range: U+49;
}
.jfk-tooltip-contentId {
font-family: 'luckysheet-font-i', 'Microsoft YaHei';
}
```
应用上面代码后，对比效果为：
核心应用知识为 `@font-face` 以及其中的 `unicode-range` 属性。
1. `font-family` 首先声明了一个字体，名称为 luckysheet-font-i，
2. `src` 指定它所使用的字体资源就是本地名为宋体（simsun）的字体资源。
3. `unicode-range` 表示字符编码的范围，即只有在这些范围内的字符才会应用此字体。
关于unicode-range有以下几种语法
```css
/* 支持的值 */
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??; /* 多个值 */
```
关于u+后面的中则是此字符对应的unicode编码，各种语言都有获取字符编码的方式，如使用JavaScript获取字符对应的编码可以使用以下方法:
```js
'要获取的字符'.charCodeAt(0).toString(16);
```
在 `unicode-range` 属性值中使用获取的字符编码时，需要在前面加上 `U+` .
再来几个应用实例：
```html
仅对数字生效1234567890
仅对汉字生效1234567890
仅对“引号”生效1234567890
```
效果
---
> [查看HTML](https://chends.com/2021/11-11-more-font-in-one-tag/)