字体大小可以根据Unicode范围来设置吗？

前端开发 2026-07-09

我想改变符号的大小，但它们不能再被包装在额外的HTML标签中。是否有办法在设置font-size时目标化一个Unicode范围？比如，

span.name[...unicode range...] { font-size: 20px; }

或者它们可以通过 @font-face加载（如这里所述https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@font-face/unicode-range），然后为font-face设置字号吗？

谢谢。

<div><span class="name">🚨Abc</span></div>
<div><span class="name">🗐 Abc</span></div>

在 @alohci的评论之后添加的，随后在下面 @myf的 [回答] 中修正。谢谢。

@font-face {
  font-family: "MySymbols";
  src: local('Twemoji Mozilla');
  unicode-range: U+1F6A8; /* U+1F?? */
  size-adjust: 200%;
}

span.name {
  font-family: "MySymbols", "Noto Sans";
  font-size: 25px;
}

<div><span class="name">🚨Abc</span></div>
<div><span class="name">🗐 Abc</span></div>

解决方案

有趣的是，你几乎已经自己把事情做完了；size-adjust 与 unicode-range 的挑选组合对 @font-face 看起来确实有效。你需要特别留意的唯一细节，是 local() 地址部分的后缀标识符，以及实际的Unicode码点。

使用单一“franken-font”族的POC（多个字形在同一个名字下处理不同范围）其基础是Cascadia Mono，并附加放大元音（并且通过“wght”轴实现“加粗”），还包含来自另一种字体的一个也被“放大”的Emoji。最终的Emoji将按普通字号渲染，使用浏览器认为合适的字体：

@font-face
{
 font-family: C;
 src: local('CascadiaMono-regular'), url('https://fonts.gstatic.com/s/cascadiamono/v5/TUZ2zw5pquJF3iuizJDZYqr1aZIn0A.woff2');
 font-variation-settings: "wght" 200;
}
@font-face
{
 font-family: C;
 src: local('CascadiaMono-regular'), url('https://fonts.gstatic.com/s/cascadiamono/v5/TUZ2zw5pquJF3iuizJDZYqr1aZIn0A.woff2');
 unicode-range: U+61, U+65, U+69, U+6f, U+75, U+79;
 /* aeiouy */
 font-variation-settings: "wght" 600;
 size-adjust: 200%;
}
@font-face
{
 font-family: C;
 src: local('Twemoji Mozilla'), url('https://xem.github.io/unicode13/Twemoji.ttf');
 unicode-range: U+1F984;
 /* 🦄 */
 size-adjust: 200%;
}
html { font-family: C; color-scheme: dark light; text-align: center; }

<p>abcdefghijklmnopqrstuvwxyz🦄💩

这应当能在Firefox上工作（它内置Emoji字体 Twemoji Mozilla），在Windows上也可以不经过网络直接使用Cascadia字体（或随系统附带Cascadia），为实现互操作性而加入了网络回退，但不能保证它们会无限期有效。

备注：

为什么叫“franken-font”

这种方法似乎比每次都组装回退堆栈更方便一些；其实这也是最初的设计思路。对比

font-family: "Enlarged vowels", "Rest of Latin", "Enlarged Emoji", "Rest of Emoji";

其中每个族名会只有一个 @font-face { font-family: …; etc… }，与

font-family: "Franken font";

不同之处在于所有字形都归属于单一超族，而各自的字形声称拥有不同的样式、字重、拉伸和范围：@font-face { font-family: "Franken font"; unicode-range: …; etc… }。

如何识别哪些（本地的）字体支持哪些字符，以及如何使用 `local()` 标识符来寻址

让我们来看一个示例文档，其中所有字体选项都按浏览器默认设置：

<p>&#x1F1E8;&#x1F1ED; &#x1F984; &#x0159;
<p>🇨🇭 🦄 ř

（两段都包含相同的Unicode字符）使用开发者工具检查该文档应能显示实际使用的字体；例如Firefox有一个专门的字体面板来显示：

这揭示了所选元素（甚至整篇文档——未展示的部分）中存在的所有字体名称。第二处重复的名称是实际的“fullName”，在系统字体中可以在 local() 函数中使用。

要验证某种字体实际支持哪些字形（以及更多细节），我推荐 wakamaifondue.com：例如从 <Firefox install directory>\fonts\TwemojiMozilla.ttf 找到字体文件并将其上传到此Web应用，也会显示出 fullName（Twemoji Mozilla），以及 PostScript name（TwemojiMozilla——这也是一个有效的 local() 标识符）