HTML 中使用 Emoji

学习目标

理解 Emoji 在 Web 中的本质：Unicode 字符
掌握在 HTML 中插入 Emoji 的三种方式
能够使用十进制与十六进制 Unicode 引用 Emoji
学会通过 CSS 控制 Emoji 的显示大小与样式
了解编码设置对 Emoji 显示的关键作用

Emoji 本质 Unicode

Emoji 并非图片，而是 Unicode 标准中定义的特殊字符。每个 Emoji 都有一个唯一的代码点，例如：

Emoji	名称	十进制	十六进制
😄	开心笑脸	`128516`	`U+1F604`
✌️	胜利手势	`9996`	`U+270C`
⌚	手表	`128350`	`U+1F55E`

浏览器根据系统字体支持情况，将这些 Unicode 字符渲染为彩色图标。

关键前提：HTML 文档必须使用 UTF-8 编码，否则 Emoji 会显示为乱码。

插入 Emoji 的三种方法

直接输入

推荐

最简单、最直观的方式：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Emoji 示例</title>
</head>
<body>
    <p>今天心情很好！😊</p>
    <p>午餐吃了 🍕 和 🥤</p>
</body>
</html>

优点：代码可读性强，易于维护
注意：确保编辑器保存为 UTF-8 编码

使用十进制引用

格式：&#数字;

<p>&#128522; 这是一个微笑表情（十进制）</p>
<p>&#127829; 这是一个生日蛋糕 🎂</p>

适用于无法直接输入 Emoji 的环境（如某些旧系统或受限编辑器）。

使用十六进制引用

格式：&#x十六进制值;（注意 x 小写）

<p>&#x1F60A; 微笑表情（十六进制）</p>
<p>&#x1F382; 生日蛋糕（十六进制）</p>

十六进制写法更接近 Unicode 标准表示（如 U+1F60A → 😊）。

完整示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Emoji 多种写法</title>
</head>
<body>
    <h2>三种插入方式对比</h2>
    
    <!-- 直接输入 -->
    <p>直接输入：😊</p>
    
    <!-- 十进制 -->
    <p>十进制引用：&#128522;</p>
    
    <!-- 十六进制 -->
    <p>十六进制引用：&#x1F60A;</p>
    
    <h2>常用 Emoji 分类示例</h2>
    
    <p><strong>食物：</strong>🍕 &#x1F355; | 🍔 &#127828; | 🍎 &#x1F34E;</p>
    <p><strong>交通：</strong>🚗 &#128663; | ✈️ &#x2708; | 🚂 &#128682;</p>
    <p><strong>人物：</strong>👨‍💻 &#x1F468;&#x200D;&#x1F4BB; | 👩‍🚀 &#128125;</p>
</body>
</html>

提示：复杂 Emoji（如带肤色、性别组合）可能由多个 Unicode 字符组成（如零宽连接符 ‍）。

使用 CSS 控制

由于 Emoji 是文本字符，可像普通文字一样设置样式：

调整大小

<style>
    .emoji-large {
        font-size: 2.5em;
    }
    .emoji-small {
        font-size: 0.8em;
    }
</style>

<p>正常大小：😊 | 
   <span class="emoji-large">大号：😊</span> | 
   <span class="emoji-small">小号：😊</span>
</p>

改变颜色

部分浏览器支持

.colored-emoji {
    color: red; /* 在部分系统上可改变 Emoji 颜色 */
}

注意：大多数操作系统会忽略 color 属性，强制使用彩色渲染。但字体大小、阴影等仍有效。

添加特效

.emoji-shadow {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    font-size: 2em;
}