如何调整Twemoji表情尺寸?解决默认72x72改为16x16的问题
解决Twemoji渲染16x16尺寸表情的问题
我来帮你搞定这个问题!你之前用{size:16}参数无效,是因为Twemoji的size选项需要传入字符串格式的尺寸目录名,而不是数字。下面是几种可行的解决方案:
方法1:正确使用size参数获取16x16 PNG
Twemoji的CDN目录里的尺寸是16x16、36x36、72x72这样的字符串命名,所以把参数改成字符串格式的'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格式的表情(矢量图缩放无模糊),可以指定folder和ext参数,再用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




