PAYATHON 2026

能否按 unicode range 设置 font-size？

技术老齐

CSS 选择器不能按 Unicode 范围为字符单独设置 font-size。如果无法增加 HTML 标签，可以用 @font-face 的 unicode-range 配合 size-adjust，缩放指定字符使用的字体。

为什么选择器做不到

span.name[...] 中的方括号是属性选择器，只能匹配 HTML 属性，不能匹配文本中的 Unicode 码点。给 span.name 设置 font-size，会影响整个元素中的文本。

unicode-range 用于限定某个 @font-face 可以处理的字符范围。浏览器选择字体时，可以让指定符号使用这个字体，其他字符使用后备字体。字体文件还必须包含相应字形，才能用于显示这些字符。CSS Fonts 规范：unicode-range

用 size-adjust 缩放指定符号

先为符号定义一个字体名称，用 unicode-range 限定字符，用 size-adjust 设置缩放比例，再把这个字体放到元素字体列表的最前面。

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

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

HTML 无需改动：

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

如果本地字体可用、包含对应字形，且浏览器支持 size-adjust：

  • 🚨 的码点是 U+1F6A8，会使用 "MySymbols"，按 200% 缩放。
  • Abc 不在指定范围内，会使用后备字体，保持正常比例。
  • 🗐 也不在该范围内，因此不会被这条规则放大。

size-adjust: 200% 会将该字体的字形和字体度量放大到原来的两倍，元素的 font-size 计算值仍然是 25px。这相当于让该字体按两倍字号绘制。由于字形本身的设计尺寸不同，符号可见部分的高度不一定恰好是 50px。CSS Fonts 规范：size-adjust

如何指定其他字符范围

unicode-range 支持单个码点、连续区间，也可以用逗号分隔多个范围：

/* 单个字符 */
unicode-range: U+1F6A8;

/* 连续区间 */
unicode-range: U+1F600-1F64F;

/* 多个范围 */
unicode-range: U+1F6A8, U+1F600-1F64F;

按需要选择一种写法，放入对应的 @font-face 中。

U+1F?? 中的每个 ? 代表一位十六进制数字，因此它表示 U+1F00-1FFF，不包含 U+1F6A8。如果只调整 🚨，直接写 U+1F6A8 最准确。CSS Fonts 规范：范围语法

使用时需要注意什么

local("Twemoji Mozilla") 只会查找用户设备上的本地字体，不会自动下载。如果字体不存在或缺少目标字形，浏览器会使用后备字体，符号也就不会按这里设置的比例缩放。如果需要稳定提供该字体，可以将 src 改为指向实际字体文件的 url(...)，并确认字体包含目标字符，且允许用于网页。

缩放还会影响字符占用的宽度和字体度量，可能改变换行与行高。如果页面设置了较小的固定 line-height，应检查放大后的符号是否与相邻行重叠，或被容器裁切。

要缩小符号，调低比例即可。例如，size-adjust: 80% 会让该字体在 25px 基准下按相当于 20px 的比例绘制。

备注：内容仅供参考。