You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何调整Twemoji表情尺寸?解决默认72x72改为16x16的问题

解决Twemoji渲染16x16尺寸表情的问题

我来帮你搞定这个问题!你之前用{size:16}参数无效,是因为Twemoji的size选项需要传入字符串格式的尺寸目录名,而不是数字。下面是几种可行的解决方案:

方法1:正确使用size参数获取16x16 PNG

Twemoji的CDN目录里的尺寸是16x1636x3672x72这样的字符串命名,所以把参数改成字符串格式的'16x16'就能生效:

$(document).ready(function () {
  document.body = twemoji.parse(document.body, { size: '16x16' });
});

这样生成的HTML会变成:

<img draggable="false" class="emoji" alt="😀" src="https://twemoji.maxcdn.com/2/16x16/1f600.png">

方法2:渲染SVG并通过CSS控制尺寸(更灵活)

如果想用SVG格式的表情(矢量图缩放无模糊),可以指定folderext参数,再用CSS设置尺寸:

JavaScript代码

$(document).ready(function () {
  document.body = twemoji.parse(document.body, {
    folder: 'svg',
    ext: '.svg'
  });
});

CSS样式

.emoji {
  width: 16px;
  height: 16px;
  vertical-align: middle; /* 可选,让表情和文字对齐更自然 */
}

这种方式生成的是SVG图片,你可以随时通过CSS调整尺寸,不需要修改JS代码。

方法3:自定义URL路径(完全可控)

如果需要更灵活的URL定制,可以用transform函数自己拼接表情图片的地址:

$(document).ready(function () {
  document.body = twemoji.parse(document.body, {
    transform: function(icon, options) {
      // icon是表情的十六进制编码(比如1f600),这里拼接16x16的PNG路径
      return `https://twemoji.maxcdn.com/2/16x16/${icon}.png`;
    }
  });
});

这个方法适合你需要更换CDN或者自定义路径的场景。


内容的提问来源于stack exchange,提问作者Karlom

火山引擎 最新活动