邮件底部的小心思：我的个性化邮件签名设计之旅

生活随记 个性签名 作品集
生活随记
发布日期:   2025-04-19
文章字数:   7.2k
阅读时长:   39 分
阅读次数:   加载中...

设计我的电子邮件签名

平时发邮件总感觉文字签名太普通了，想弄个专属的“个人名片”放在邮件底部，既能显得有点逼格，也能顺便介绍下自己，让对方稍微了解一下我。于是我自己动手设计了一个电子邮件签名，过程里碰了不少坑，整了几版才搞定，折腾完后写篇文章给大家讲讲HTML邮件的槽点和我自己梳理一下设计过程。

首先要讲的是：

个人电子邮件签名应该包括什么？

首先要有你的名字 要不然叫什么签名，毫无疑问，这将是签名的基石。名字呢应该在一个显眼的位置，想想你们收到的名片，名字通常位于中间部分，并且相对靠上、字号更大。

其次是联系方式，个人的电子邮件签名肯定不用考虑什么商业因素，因此不必放过多的联系方式，联系方式放你发送邮件的邮箱地址即可（也就是你的常用个人邮箱啦）。

为什么要放发件地址？对方不会自己看邮件发件人吗？其实放发件地址是为了更快的告诉对方你的身份，毕竟大多数普通人打开邮件是直接先看标题再看正文的，发件人那行小字大多是直接忽视，尤其是在快速浏览邮件时。而在签名里放置邮箱可以让对方快速知道你是谁，并且可以记住你的地址，方便下次联系、回信。

然后是一段个性签名之类的，可以 展现B格 让对方知道你是啥类型的人，是展现个人风格和品味的好地方。如果你是发邮件交朋友的话还可以给对方留一个第一印象，所以不要瞎选个性签名，到时个性签名和人设撞了就尴尬了。

还有就是你的头像，这个很重要，我可以毫不过分的说头像是互联网的身份证照，文字给人的印象是需要去理解才能记住，而一张具有个性的图片通常看一眼就能留下印象。不信你们可以去试试把自己的社交账号头像改掉，看看还有多少人能认出你（那些名字很有特色的除外啊）。

最后是一些小装饰，比如你的博客、个人项目页面之类的，这一方面可以 引流 让对方知道了解你的途径，一方面可以让页面不那么空。这里我选择放我的网站链接和网站账户。

总结一下就是：

  1. 醒目的全名： 清晰地表明你的身份。
  2. 常用邮箱地址： 方便对方快速识别和记住你的联系方式。
  3. 个人头像： 重要的视觉元素，有助于留下深刻印象。
  4. 个性签名（可选，尽量加上）： 展现你的个人风格或信仰。
  5. 个人链接（可选）： 提供了解你的更多途径。

开始设计

原型：H5版

1.0版

初版是所有内容居中显示，最开始打算把我的头像放顶上，后来发现太难看了，所以我删了，但总体也不咋好看。

可以看到这个版本还是比较简单，用它做文章末尾的装饰或许还行，但作为邮件名片显然有点不够格了。

点击展开代码 
<div style="
  background: linear-gradient(135deg, #B2C89E, #eef1de);
  padding: 15px; 
  border-radius: 10px; 
  margin: auto;
  max-width: 600px; 
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
  color: #a3a300; 
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  border: 1px solid #ddd;">
    <!-- 姓名 -->
    <div style="text-align: center; font-weight: bold; font-size: 1.4em; margin-bottom: 0;">
        Ethaniel
    </div>
    <!-- 个性签名部分 -->
    <div style="margin-top: 2px; font-style: italic; font-size: 0.85em; text-align: center;">
        "用音乐记录生活，用代码连接未来。"
    </div>
    <hr style="border: none; height: 1px; background-color: #a3a300; margin: 10px 0;">
    <!-- 联系方式 -->
    <div
        style="text-align: center; margin-top: 10px; font-size: 0.9em; display: flex; align-items: center; justify-content: center;">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#a3a300"
            stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: middle;">
            <rect x="3" y="5" width="18" height="14" rx="2" ry="2" />
            <polyline points="3,5 12,13 21,5" />
        </svg>
        <a href="mailto:[email protected]"
            style="margin-left: 5px; color: #a3a300; text-decoration: none;">[email protected]</a>
    </div>
    <div style="text-align: center; line-height: 1.6; margin-top: 3px;">
        <a href="https://music.100713.xyz" style="color: #a3a300; text-decoration: none; margin: 0 8px;">音乐空间</a>
        <a href="https://100713.xyz" style="color: #a3a300; text-decoration: none; margin: 0 8px;">博客</a>
        <a href="https://flash.100713.xyz" style="color: #a3a300; text-decoration: none; margin: 0 8px;">Flash收藏站</a>
    </div>
    <div style="text-align: center; margin-top: 5px;">
        <!-- GitHub -->
        <a href="https://github.com/2010HCY" target="_blank"
            style="margin: 0 8px; display:inline-flex; align-items:center; text-decoration: none; color: #a3a300;">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" style="margin-right: 4px;">
                <path
                    d="M12 0C5.372 0 0 5.372 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.82-.258.82-.577 0-.285-.011-1.041-.017-2.046-3.338.726-4.042-1.611-4.042-1.611-.546-1.387-1.333-1.757-1.333-1.757-1.089-.744.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.832 2.807 1.303 3.492.996.108-.775.418-1.305.762-1.605-2.665-.305-5.467-1.334-5.467-5.931 0-1.31.468-2.381 1.236-3.222-.124-.303-.535-1.523.117-3.176 0 0 1.008-.322 3.301 1.23.956-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.29-1.552 3.295-1.23 3.295-1.23.654 1.653.243 2.873.119 3.176.77.841 1.235 1.912 1.235 3.222 0 4.61-2.807 5.624-5.479 5.921.43.371.813 1.096.813 2.209 0 1.595-.015 2.878-.015 3.273 0 .321.219.694.825.576C20.565 21.796 24 17.298 24 12c0-6.628-5.372-12-12-12z" />
            </svg>
            <span style="vertical-align: middle;">GitHub</span>
        </a>
        <!-- LinuxDO -->
        <a href="https://linux.do/u/ethaniel/summary" target="_blank"
            style="margin: 0 8px; display:inline-flex; align-items:center; text-decoration: none; color: #a3a300;">
            <svg width="20" height="20" viewBox="0 0 120 120" fill="currentColor" style="margin-right: 4px; ">
                <clipPath id="a">
                    <circle cx="60" cy="60" r="47" />
                </clipPath>
                <circle fill="#f0f0f0" cx="60" cy="60" r="50" />
                <rect fill="#1c1c1e" clip-path="url(#a)" x="10" y="10" width="100" height="30" />
                <rect fill="#f0f0f0" clip-path="url(#a)" x="10" y="40" width="100" height="40" />
                <rect fill="#ffb003" clip-path="url(#a)" x="10" y="80" width="100" height="30" />
            </svg>
            <span style="vertical-align: middle;">LinuxDO</span>
        </a>
        <!-- Steam -->
        <a href="https://steamcommunity.com/id/2010hcy/" target="_blank"
            style="margin: 0 8px; display:inline-flex; align-items:center; text-decoration: none; color: #a3a300;">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 259"
                style="margin-right: 4px;">
                <path
                    d="M127.779 0C60.42 0 5.24 52.412 0 119.014l68.724 28.674a35.812 35.812 0 0 1 20.426-6.366c.682 0 1.356.019 2.02.056l30.566-44.71v-.626c0-26.903 21.69-48.796 48.353-48.796 26.662 0 48.352 21.893 48.352 48.796 0 26.902-21.69 48.804-48.352 48.804-.37 0-.73-.009-1.098-.018l-43.593 31.377c.028.582.046 1.163.046 1.735 0 20.204-16.283 36.636-36.294 36.636-17.566 0-32.263-12.658-35.584-29.412L4.41 164.654c15.223 54.313 64.673 94.132 123.369 94.132 70.818 0 128.221-57.938 128.221-129.393C256 57.93 198.597 0 127.779 0zM80.352 196.332l-15.749-6.568c2.787 5.867 7.621 10.775 14.033 13.47 13.857 5.83 29.836-.803 35.612-14.799a27.555 27.555 0 0 0 .046-21.035c-2.768-6.79-7.999-12.086-14.706-14.909-6.67-2.795-13.811-2.694-20.085-.304l16.275 6.79c10.222 4.3 15.056 16.145 10.794 26.46-4.253 10.314-15.998 15.195-26.22 10.895zm121.957-100.29c0-17.925-14.457-32.52-32.217-32.52-17.769 0-32.226 14.595-32.226 32.52 0 17.926 14.457 32.512 32.226 32.512 17.76 0 32.217-14.586 32.217-32.512zm-56.37-.055c0-13.488 10.84-24.42 24.2-24.42 13.368 0 24.208 10.932 24.208 24.42 0 13.488-10.84 24.421-24.209 24.421-13.359 0-24.2-10.933-24.2-24.42z"
                    fill="#1A1918" />
            </svg>
            <span style="vertical-align: middle;">Steam</span>
        </a>
    </div>
</div>

效果如下（部分老旧浏览器可能出现错乱，因为博客CSS原因可能会有所不同）

点击展开查看效果
Ethaniel
"用音乐记录生活，用代码连接未来。"

1.1版

这个版本更好看，更完美，这个版本的布局是左右结构，左边是我的头像logo，右边是我的名字、签名、邮箱等等，这个版本就是最终的样子，接下来干的事都是做兼容性适配。

点击展开代码 
<div style="
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #B2C89E, #eef1de);
  padding: 15px; 
  border-radius: 10px; 
  margin: auto;
  width: 100%;
  max-width: 600px;
  max-height: 165px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
  color: #a3a300; 
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  border: 1px solid #ddd;">
    <!-- Logo区域 -->
    <div style="width: 120px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;">
        <img style="height: 100%; width: 120px;"
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaQAAAGkAQMAAABEgsN2AAAABlBMVEWhz1Hw8PBzFgw4AAAAnklEQVR4Ae3aMQqAMAwF0IIH8Ei9mkftERyd1MVOWVrBUvD98cPLHpJ0vcieKIqiKIrqUFt6UoujFitFURRFURRFURRFzaBKak+OKj/DzlosdXyhKIqiKIqiKIqiqI9U1w4b9+WQpi2boiiKoiiKoiiKosYrF3CKoiiKoiiKoihq/C9xUC2/xDGFoiiKoiiKoiiKomZQvaEoiqKoH6kbFYxkM/0L5boAAAAASUVORK5CYII=">
    </div>
    <!-- 右侧内容部分 -->
    <div style="flex:1; display:flex; flex-direction: column; justify-content: center; margin-left: 15px;">
        <div style="text-align: left; font-weight: bold; font-size: 1.4em; margin-bottom: 0;">
            Ethaniel
        </div>
        <div style="margin-top: 0px; font-style: italic; font-size: 0.85em; text-align: left;">
            "用音乐记录生活，用代码连接未来。"
        </div>
        <hr style="border: none; height: 1px; background-color: #a3a300; margin: 5px 0;">
        <div style="text-align: left; margin-top: 2px; font-size: 0.9em; align-items: center; justify-content: center;">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                stroke="#a3a300" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                style="vertical-align: middle;">
                <rect x="3" y="5" width="18" height="14" rx="2" ry="2" />
                <polyline points="3,5 12,13 21,5" />
            </svg>
            <a href="mailto:[email protected]"
                style="margin-left: 5px; color: #a3a300; text-decoration: none; ">[email protected]</a>
        </div>
        <div style="margin-left: 0px; text-align: left; line-height: 1.6; margin-top: 2px;">
            <a href="https://music.100713.xyz" style="color: #a3a300; text-decoration: none;">音乐空间</a>
            <a href="https://100713.xyz" style="color: #a3a300; text-decoration: none; margin: 0 8px;">博客</a>
            <a href="https://flash.100713.xyz"
                style="color: #a3a300; text-decoration: none; margin: 0 8px;">Flash收藏站</a>
        </div>
        <div style="text-align: left; margin-top: 2px;">
            <a href="https://github.com/2010HCY" target="_blank"
                style="display:inline-flex; align-items:center; text-decoration: none; color: #a3a300;">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" style="margin-right: 4px;">
                    <path
                        d="M12 0C5.372 0 0 5.372 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.82-.258.82-.577 0-.285-.011-1.041-.017-2.046-3.338.726-4.042-1.611-4.042-1.611-.546-1.387-1.333-1.757-1.333-1.757-1.089-.744.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.832 2.807 1.303 3.492.996.108-.775.418-1.305.762-1.605-2.665-.305-5.467-1.334-5.467-5.931 0-1.31.468-2.381 1.236-3.222-.124-.303-.535-1.523.117-3.176 0 0 1.008-.322 3.301 1.23.956-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.29-1.552 3.295-1.23 3.295-1.23.654 1.653.243 2.873.119 3.176.77.841 1.235 1.912 1.235 3.222 0 4.61-2.807 5.624-5.479 5.921.43.371.813 1.096.813 2.209 0 1.595-.015 2.878-.015 3.273 0 .321.219.694.825.576C20.565 21.796 24 17.298 24 12c0-6.628-5.372-12-12-12z" />
                </svg>
                <span style="vertical-align: middle;">GitHub</span>
            </a>
            <a href="https://linux.do/u/ethaniel/summary" target="_blank"
                style="margin: 0 8px; display:inline-flex; align-items:center; text-decoration: none; color: #a3a300;">
                <svg width="20" height="20" viewBox="0 0 120 120" fill="currentColor" style="margin-right: 4px; ">
                    <clipPath id="a">
                        <circle cx="60" cy="60" r="47" />
                    </clipPath>
                    <circle fill="#f0f0f0" cx="60" cy="60" r="50" />
                    <rect fill="#1c1c1e" clip-path="url(#a)" x="10" y="10" width="100" height="30" />
                    <rect fill="#f0f0f0" clip-path="url(#a)" x="10" y="40" width="100" height="40" />
                    <rect fill="#ffb003" clip-path="url(#a)" x="10" y="80" width="100" height="30" />
                </svg>
                <span style="vertical-align: middle;">LinuxDO</span>
            </a>
            <a href="https://steamcommunity.com/id/2010hcy/" target="_blank"
                style="margin: 0 8px; display:inline-flex; align-items:center; text-decoration: none; color: #a3a300;">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 259"
                    style="margin-right: 4px;">
                    <path
                        d="M127.779 0C60.42 0 5.24 52.412 0 119.014l68.724 28.674a35.812 35.812 0 0 1 20.426-6.366c.682 0 1.356.019 2.02.056l30.566-44.71v-.626c0-26.903 21.69-48.796 48.353-48.796 26.662 0 48.352 21.893 48.352 48.796 0 26.902-21.69 48.804-48.352 48.804-.37 0-.73-.009-1.098-.018l-43.593 31.377c.028.582.046 1.163.046 1.735 0 20.204-16.283 36.636-36.294 36.636-17.566 0-32.263-12.658-35.584-29.412L4.41 164.654c15.223 54.313 64.673 94.132 123.369 94.132 70.818 0 128.221-57.938 128.221-129.393C256 57.93 198.597 0 127.779 0zM80.352 196.332l-15.749-6.568c2.787 5.867 7.621 10.775 14.033 13.47 13.857 5.83 29.836-.803 35.612-14.799a27.555 27.555 0 0 0 .046-21.035c-2.768-6.79-7.999-12.086-14.706-14.909-6.67-2.795-13.811-2.694-20.085-.304l16.275 6.79c10.222 4.3 15.056 16.145 10.794 26.46-4.253 10.314-15.998 15.195-26.22 10.895zm121.957-100.29c0-17.925-14.457-32.52-32.217-32.52-17.769 0-32.226 14.595-32.226 32.52 0 17.926 14.457 32.512 32.226 32.512 17.76 0 32.217-14.586 32.217-32.512zm-56.37-.055c0-13.488 10.84-24.42 24.2-24.42 13.368 0 24.208 10.932 24.208 24.42 0 13.488-10.84 24.421-24.209 24.421-13.359 0-24.2-10.933-24.2-24.42z"
                        fill="#1A1918" />
                </svg>
                <span style="vertical-align: middle;">Steam</span>
            </a>
        </div>
    </div>
</div>
点击展开查看效果
Ethaniel
"用音乐记录生活，用代码连接未来。"
（部分老旧浏览器可能出现错乱，因为博客CSS原因可能会有所不同）

为了兼容性转表格布局

为什么我要使用传统的表格布局？原因是踏马的WebEmail渲染现代的 Flexbox 布局会鬼畜，鬼畜效果如下

为此我为了让我的好友能够在浏览器里查看我精心设计的签名，我不得不转为传统表格布局，源码：

点击展开代码 
<table cellpadding="0" cellspacing="0" width="100%"
    style="max-width:600px; margin:auto; border:1px solid #ddd; border-radius:10px; box-shadow:0 4px 10px rgba(0,0,0,0.1); background:linear-gradient(135deg, #B2C89E, #eef1de); font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; color:#a3a300;">
    <tr>
        <td style="width: 120px; padding:15px; vertical-align: middle; text-align: center;">
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaQAAAGkAQMAAABEgsN2AAAABlBMVEWhz1Hw8PBzFgw4AAAAnklEQVR4Ae3aMQqAMAwF0IIH8Ei9mkftERyd1MVOWVrBUvD98cPLHpJ0vcieKIqiKIrqUFt6UoujFitFURRFURRFURRFzaBKak+OKj/DzlosdXyhKIqiKIqiKIqiqI9U1w4b9+WQpi2boiiKoiiKoiiKosYrF3CKoiiKoiiKoihq/C9xUC2/xDGFoiiKoiiKoiiKomZQvaEoiqKoH6kbFYxkM/0L5boAAAAASUVORK5CYII="
                alt="Logo" style="display:block; width:120px; height:auto;">
        </td>
        <td style="padding:15px; vertical-align: top;">
            <h2 style="margin:0; font-size:1.4em; font-weight:bold;">Ethaniel</h2>
            <p style="margin:0px 0 3px 0; font-style:italic; font-size:0.85em;">"用音乐记录生活，用代码连接未来。"</p>
            <hr style="border:none; height:1px; background-color:#a3a300; margin:5px 0;">
            <p style="margin:0; font-size:0.9em; line-height:1.6;">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                    stroke="#a3a300" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    style="vertical-align: middle;">
                    <rect x="3" y="5" width="18" height="14" rx="2" ry="2" />
                    <polyline points="3,5 12,13 21,5" />
                </svg>
                <a href="mailto:[email protected]"
                    style="margin-left:5px; color:#a3a300; text-decoration:none;">[email protected]</a>
            </p>
            <div style="margin-top:2px; font-size:0.9em; line-height:1.6;">
                <a href="https://music.100713.xyz"
                    style="color:#a3a300; text-decoration:none; margin-right:8px;">音乐空间</a>
                <a href="https://100713.xyz" style="color:#a3a300; text-decoration:none; margin-right:8px;">博客</a>
                <a href="https://flash.100713.xyz" style="color:#a3a300; text-decoration:none;">Flash收藏站</a>
            </div>
            <div style="margin-top:2px;">
                <!-- GitHub -->
                <a href="https://github.com/2010HCY" target="_blank"
                    style="margin-right:8px; text-decoration:none; display:inline-flex; align-items:center; color:#a3a300;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" style="margin-right:4px;">
                        <path
                            d="M12 0C5.372 0 0 5.372 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.82-.258.82-.577 0-.285-.011-1.041-.017-2.046-3.338.726-4.042-1.611-4.042-1.611-.546-1.387-1.333-1.757-1.333-1.757-1.089-.744.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.832 2.807 1.303 3.492.996.108-.775.418-1.305.762-1.605-2.665-.305-5.467-1.334-5.467-5.931 0-1.31.468-2.381 1.236-3.222-.124-.303-.535-1.523.117-3.176 0 0 1.008-.322 3.301 1.23.956-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.29-1.552 3.295-1.23 3.295-1.23.654 1.653.243 2.873.119 3.176.77.841 1.235 1.912 1.235 3.222 0 4.61-2.807 5.624-5.479 5.921.43.371.813 1.096.813 2.209 0 1.595-.015 2.878-.015 3.273 0 .321.219.694.825.576C20.565 21.796 24 17.298 24 12c0-6.628-5.372-12-12-12z" />
                    </svg>
                    <span>GitHub</span>
                </a>
                <!-- LinuxDO -->
                <a href="https://linux.do/u/ethaniel/summary" target="_blank"
                    style="margin-right:8px; text-decoration:none; display:inline-flex; align-items:center; color:#a3a300;">
                    <svg width="20" height="20" viewBox="0 0 120 120" fill="currentColor" style="margin-right:4px;">
                        <clipPath id="a">
                            <circle cx="60" cy="60" r="47" />
                        </clipPath>
                        <circle fill="#f0f0f0" cx="60" cy="60" r="50" />
                        <rect fill="#1c1c1e" clip-path="url(#a)" x="10" y="10" width="100" height="30" />
                        <rect fill="#f0f0f0" clip-path="url(#a)" x="10" y="40" width="100" height="40" />
                        <rect fill="#ffb003" clip-path="url(#a)" x="10" y="80" width="100" height="30" />
                    </svg>
                    <span>LinuxDO</span>
                </a>
                <!-- Steam -->
                <a href="https://steamcommunity.com/id/2010hcy/" target="_blank"
                    style="margin-right:8px; text-decoration:none; display:inline-flex; align-items:center; color:#a3a300;">
                    <svg width="20" height="20" viewBox="0 0 256 259" style="margin-right:4px;">
                        <path
                            d="M127.779 0C60.42 0 5.24 52.412 0 119.014l68.724 28.674a35.812 35.812 0 0 1 20.426-6.366c.682 0 1.356.019 2.02.056l30.566-44.71v-.626c0-26.903 21.69-48.796 48.353-48.796 26.662 0 48.352 21.893 48.352 48.796 0 26.902-21.69 48.804-48.352 48.804-.37 0-.73-.009-1.098-.018l-43.593 31.377c.028.582.046 1.163.046 1.735 0 20.204-16.283 36.636-36.294 36.636-17.566 0-32.263-12.658-35.584-29.412L4.41 164.654c15.223 54.313 64.673 94.132 123.369 94.132 70.818 0 128.221-57.938 128.221-129.393C256 57.93 198.597 0 127.779 0zM80.352 196.332l-15.749-6.568c2.787 5.867 7.621 10.775 14.033 13.47 13.857 5.83 29.836-.803 35.612-14.799a27.555 27.555 0 0 0 .046-21.035c-2.768-6.79-7.999-12.086-14.706-14.909-6.67-2.795-13.811-2.694-20.085-.304l16.275 6.79c10.222 4.3 15.056 16.145 10.794 26.46-4.253 10.314-15.998 15.195-26.22 10.895zm121.957-100.29c0-17.925-14.457-32.52-32.217-32.52-17.769 0-32.226 14.595-32.226 32.52 0 17.926 14.457 32.512 32.226 32.512 17.76 0 32.217-14.586 32.217-32.512zm-56.37-.055c0-13.488 10.84-24.42 24.2-24.42 13.368 0 24.208 10.932 24.208 24.42 0 13.488-10.84 24.421-24.209 24.421-13.359 0-24.2-10.933-24.2-24.42z"
                            fill="#1A1918" />
                    </svg>
                    <span>Steam</span>
                </a>
            </div>
        </td>
    </tr>
</table>

但问题它又又又踏马来了，Gmail、QQ邮箱不支持SVG渲染！为此我不得不将其转换成Base64编码插入，但…出了点玄学问题，我直接SVG转Base64不能显示，但SVG转PNG转Base64就可以，嗯？我还得多转一遍才能用？下面是折腾好的源码：

点击展开代码 
<table cellpadding="0" cellspacing="0" width="100%"
    style="max-width:600px; margin:auto; border:1px solid #ddd; border-radius:10px; box-shadow:0 4px 10px rgba(0,0,0,0.1); background:linear-gradient(135deg, #B2C89E, #eef1de); font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; color:#a3a300;">
    <tr>
        <td style="width: 120px; padding:15px; margin-right:0px; vertical-align: middle; text-align: center;">
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaQAAAGkAQMAAABEgsN2AAAABlBMVEWhz1Hw8PBzFgw4AAAAnklEQVR4Ae3aMQqAMAwF0IIH8Ei9mkftERyd1MVOWVrBUvD98cPLHpJ0vcieKIqiKIrqUFt6UoujFitFURRFURRFURRFzaBKak+OKj/DzlosdXyhKIqiKIqiKIqiqI9U1w4b9+WQpi2boiiKoiiKoiiKosYrF3CKoiiKoiiKoihq/C9xUC2/xDGFoiiKoiiKoiiKomZQvaEoiqKoH6kbFYxkM/0L5boAAAAASUVORK5CYII="
                alt="Logo" style="display:block; width:120px; height:auto;">
        </td>
        <td style="padding:15px; margin-left: 15px; vertical-align: top;">
            <h2 style="margin:0; font-size:1.4em; font-weight:bold;">Ethaniel</h2>
            <p style="margin:0px 0 10px 0; font-style:italic; font-size:0.85em;">"用音乐记录生活，用代码连接未来。"</p>
            <hr style="border:none; height:1px; background-color:#a3a300; margin:5px 0;">
            <p style="margin:0; font-size:0.9em; line-height:1.6;">
                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAABfVBMVEUAAAAAAAD//wCAgAC/vwCZmQCqqgCiogCdnQCkpACqqgCfnwClpQChoQCmpgCengCqqgCiogCfnwCjowCnpwCnpwChoQCfnwCiogCgoACjowClpQCkpACmpgCiogCkpAChoQClpQClpQCkpACjowClpQCkpAChoQCkpACjowCkpACjowChoQCkpACiogCiogClpQCiogCjowCjowCkpACiogCkpACkpACjowCjowCkpACjowCiogCjowCkpACjowCiogCkpACjowCjowCkpACjowCiogCiogCjowCjowCiogCjowCiogCjowCjowCjowCjowCjowCkpACjowCkpACjowCjowCiogCkpACiogCjowCkpACjowCiogCkpACjowCiogCjowCjowCjowCjowCjowCjowCjowCjowCjowCkpACjowCiogCjowCjowCjowCjowCjowCjowCjowCjowCiogCjowCjowCjowCjowCjowCjowCjowCjowCjowDzQ23hAAAAfnRSTlMAAQECBAUJCw0ODxARExQVFRYYGRodHiAhIyQlKissLS4wNjhAQUNESUtMTk9RUlVVWFlbX2BiZWlscHd8fX6AgYGCiImOj5KTlpqcnZ6go6Snqqutrq+wsLO0u7y+vsfJzs/R0tPV2tve3+Hi4+Tl5ujp6uzt7/Hy9vn6/f45g3pQAAAECUlEQVR42uzBgQAAAACAoP2pF6kCAAAAAACYnbtQblwJojB8lpmZmTfMzMzMzHw53M9+mZTpckseadpb871A6rct6YTG+4Y9yq5o6el3oqelIvsRrPjSsUGObXR8QZpu1m2TCtt1NxHd6doDUuOg9jQi+rJCqqx8QSQNpE4Dwjs7SAoNnkVIF6ZJpekLCGeClJpAKD2kVg9CqCDFKiD2mlR7DalpUm0aQoWkXCFklki5JYjkkHo5kBgn9cYhcJsywG2kVkwZoNjBQ93Z432FMsCKYPaSxNbHtzH5uEUSF5DKcxKZuYRYXJwlkedI5QPJLFxDDK4tkswHpJJFASPcx/QurLu3SmbDFJAV/rmeW3pMRhsPYdnj78jouCSXf7bLQ1BwREY/vIRVL34io6M82AnB10My2n0Di17vkdHhZ9gKwft9Mtp/D2vecV/jHeyF4M0u82p9hSWfmXd97zVshuAl9/ktgBV53HX4AnZD8GSHuaOUwoIy5s64+QC2Q3CfG2HVSFsNma3egf0QXFsgs2ak53Q7mS1eQxwhuDRDZp1nkIYzfWQ2exHxhOD8JJmNnkNk58bIbOo84grBuVEymzyPiM5PkdnYOcQXgjO9/Ky3O9v7ziDOEJxuszrrb3GzvfU04g0BaizO+nvr/C099hCU87Pe2mxHEiHRZ718ticTEn3Wi2d7QiHRZ710ticVEn3WC2d7YiHhZ718ticbEn7Wy2d7siG4v0ZmVUiplp/tyYfgFj/ro892FyHyWS+f7W5C5LNePtvdhMhnvXy2uwmRz3rJbHcZIp71gtnuNgSo5Wd9qNnuPATlxM96+WxXEIJibm48lc92FSHsrP/ljXy2uw+RznrBbHcfIpj1gtnuPkQw6wWz3X2IYNYLZrv7EMGsl892BSG4wc36phYym7sOjSH8rOdnu84Qftbzs11nCD/r+dmuMISZ9YzuM1Aawsx6RiugOwSoJ4FK6A9hZz0/25WGsLOen+1KQ9hZz892pSHsrOdnu9IQdtbzs11pCF79TEY/voD+EH7W87Ndewgz6/nZrjgEt5blP21XHYIrM/xs1x/Cz/qp89Afwumif3QBGRyCj9/TH3Y+IrNDcDW/dmigNu8y1IbY50N8iA/xIT7Eh/gQH+JDfIgP8SE+xIf4EB/iQ3yID8migCIoUBT+8IoPFNAIBRrDHyfynALmocB8+ANeLlDQJzj3iYIuRDgEaf4UHDt14g1ZiXQsVR8c66OgnmgHhU08g0PPJuiE4qhHt3V+ugUnbn3q/LW9OyACAASAENbBwGa3gAH+uC0I3I/Tj+kV84aB4GQgARqIsgYyuYFwcSAlHYh7Z3LrlQB+ZElQmURUth1GKkNrG7MhAAAAAAAAxj0l70sLmc/I9gAAAABJRU5ErkJggg==" alt="Mail" style="width:20px; height:20px; vertical-align: middle;">
                <a href="mailto:[email protected]"
                    style="margin-left:5px; color:#a3a300; text-decoration:none;">[email protected]</a>
            </p>
            <div style="margin-top:2px; font-size:0.9em; line-height:1.6;">
                <a href="https://music.100713.xyz"
                    style="color:#a3a300; text-decoration:none; margin-right:8px;">音乐空间</a>
                <a href="https://100713.xyz" style="color:#a3a300; text-decoration:none; margin-right:8px;">博客</a>
                <a href="https://flash.100713.xyz" style="color:#a3a300; text-decoration:none;">Flash收藏站</a>
            </div>
            <div style="margin-top:2px;">
                <!-- GitHub -->
                <a href="https://github.com/2010HCY" target="_blank"
                    style="margin-right:8px; text-decoration:none; display:inline-flex; align-items:center; color:#a3a300;">
                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAgCAYAAACcuBHKAAADK0lEQVR42rXWA5TkTBRA4Zf8tm3bts21bdu2bdu2bdu2bb69NcypxuTMZm+fr6VUBHn5jff8ehIp0BxzsAdncRmnsQMzUA+/4iGIH36+9BwqYSlOQX04hpnI99Ib7z0CiUZefu29SG7nT7JgGTSZLmMmWILv3gIJJ9qib4+z0ACcRGM84nd1PI+x0KChd7htxTF3nh5Fe6TAjaqzilOSx1MSl3cDuYMBtYZ6HMBU7Erm9rAV03HUer/qq69+cBPE8C6WnDgP9ejw8uvv3c3jm6iIjVBcwEFswzpsxyFchGIZCuBl3IfBUI8j+N3eJp7GUqilEMTjdeTHf3gHz+BxPIf3kQp58DzEoyrUwhJ+9yHv3lEOV6EeV5EdEoASUMtFZIa4IvIk0sKBNwfPIoieh90tSI+7zSA+x2uwu4TDCKKDuAq7z/GRGcSPuAt2Y9AbQdQBM2D3IL4z62su1HIe/0MClBOXoZZRZkk8B7tjWIcgW4VTsHvBDOIB2J0HAu0MLsPugZu5M+xux20IsrsiTOtmsySOw+4OPIAgeyjCjB03gzgCu3vwLoLsPdwBu8NmEFth5+J3EecOCab78RvCtdlMbB4Udr/y9r8STGnwZYQD4lzX3OEY7O5GdXHkK7m+/kSVCNvDASwyB5F7MAoaZyMW4QwU21CO643XeLztlTffFx/u4Ptv8/1q2Bv1Suv1d28zgzAy4gIUA/E6MmEfFFexPW6w1fEcJIyXUAfjsBsaxWn8CeGH7xv3e64rL2P4y2++9xiPueOXiMciPAEJ4zmsgvrQD3faF7rf4yA0TsVX3nj/Zh7LYjfO4DAqQKJoCU3CDnwEMVxHVOLMFJGGuABTNhV9Me69X/E/fhGVlhK9/YjWadTCEonLVceROFcZSSve6wjTq2iOr8RxtqlenYRVKnpRoncZkbqI2qLSDQIgzOJ8AK1wEYrDmIKBGIV/IFGUhYZxFtVeevO92yFekf7odpTFfqglbzIGsROF2cZugdhc94orYZxHIxFJhaGe6wAFfHccffA/WqvoJdg3lsSb7ybl3rhL+fE4gf8gUeTGKQzH38zpnZBorgEeIoJDUN3opQAAAABJRU5ErkJggg==" alt="GitHub" style="width:20px; height:20px; margin-right:4px; vertical-align: middle;">
                    <span>GitHub</span>
                </a>
                <!-- LinuxDO -->
                <a href="https://linux.do/u/ethaniel/summary" target="_blank"
                    style="margin-right:8px; text-decoration:none; display:inline-flex; align-items:center; color:#a3a300;">
                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADQUlEQVR42sWXz04TURTGryhFJCaE/yb8EdA38BFMxMRNN/gE6tYF4tIHwAVv0AS1GopGZGc0VLbs3BIkuiCxtE4VSplOO5/3Z7FeJmCqaWmTL9w595zvd+bM3ALmxv1b5jhJOmMVi8TiVgmrtO/75VKpJMSaGHvkRGpieJ3EOQne7qy7rZKAVlZWNDv7UFNTN9XfP2Q1KMSaGHvkkEsNta5nXQ3QsbOeD4JAc3OPNTIyJmNMYOV3dV0sDwwMaXDwkhBrYuyRQy411OIR9XYVhXfwMwwrPZK2FxdT6u3tF8Z9fQPh+PikJiauaGxsXEBcEWOPHHKpoRYPvCqVSo/LQMhEu7PjG6ZiZuYB4CIjxhjI8PBoXSKXGmrxwIsP3i4LHXk+dEni9PRtCg+4m9HRy5j+l6jFAy88+cBwmcZ9QxkV3VIwOXkVk4YILzzxhuGetNo4eFlSqZQYGQWMsZHCE+9UakmwYMKuHbVMJkOCVZs6O7vU0dHZUOGJNwxYMGvvQBCUkltbW5xhf21tTauraaXTjRWeeMOABbPWgOd5KhaLkhSq+Z8QFkzYJp/Px60IBNlsVqchWDBh00Di8MK3UrMVYSVoIH14UT4luMtKGxfcApUNi1aq9Q20/hG0/iVs/TGMVy+8IO9ldSrKO19EfB3agPI/ivL2FVqpyQphwfzzu2C3nPy+s6m9zZS/++Wddj+/bYqst2Us+bBg1hrIVdSd/5aRnhvphdVic4Q/ggUTtvkqxVhkpfnCxhNpwRT15oL0+lxDhSfeMGDBhG28/dqfZExi21+/Kz01B9UmzjZEeOGJNwxYCDYL7r79V2BPPblACj5cP2yiU1putyZt/wylhlo88MITbxgukwYQgVj1hQyGSfTX74iR6ZVRdRrtdcPJpYZaPPDCE2+XdaQBtCN1/J4EoypsLEgvjfTM+NYs1PJ5VacSU/QZE2OPHHKpoRYPvPB0Gcc2EO0uJ83b46Lix0fcFY0ESlrjlClzd66IsUcOudRQi0fU+68NuM8H5UJ1Z6WkHZ/2Pi3JX7+n8vtrijZAjD1yyKWG2qhnXQ0gr6AzHJPII4rbcSa8faUtpAwIsSbGHjluDR5e4eR/z38CRCwmJc9le7gAAAAASUVORK5CYII=" alt="LinuxDO" style="width:20px; height:20px; margin-right:4px; vertical-align: middle;">
                    <span>LinuxDO</span>
                </a>
                <!-- Steam -->
                <a href="https://steamcommunity.com/id/2010hcy/" target="_blank"
                    style="margin-right:8px; text-decoration:none; display:inline-flex; align-items:center; color:#a3a300;">
                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAADTUlEQVR42qXXA4zsXADF8U6389m2bdu2+Wzbtm3btm3btm3r37zT5KbD7p7ktzs+t7cOWVHywP33Wb48ji/xFV7DA7gRbk5gJxZjAiZhq2Vk1+49lj+hBIXPIAv+wBMII17OYQMGoCs2xRpAKEbpdSosgSeRmqxFXfTEOX95SpTSu1Af5fQ4tbkL3+EOzMUZWDfffJN1/MQJivVEuRutkEmDSmscvKttYorKrxYbS3s9GiAjgmYbRmAQpuMA7oS3RK/iBm14F1lQRqSQ7MiCILmAbqiHtTDzBiriN7jJhSXoBCtF0/w8WuIOBEkbFMJJpNOPf6tdbRpG42n9voPn9Nphr7gMfkCQLENuhNBCPzodB/E33sIorMAvuEUb3FFMtvnzrKYjaIZhl5byIrJpGtvq8WMawHJMhJe/8JitqXkMQXJZP+jgffTQdHs5gIH43JgdL0/hC7f461TsOpv1Y2GVn4Y/p3AN3JyHlzC+tnXsDZJzqIM1KlwbZftw8B2WGEtp5jW3+KymLtn0RXd4aYf3UBVv4l3Ux93ogQfwBcw86G7VozXqm3BPghPBKuTDPng5iPn4GH/jE+zQQPaiAn6HmXDIOHLdjA/wL77BgzBzUltrP8TKzbiA07gdRVEC18PMJa/YjLeL/Yo/tGGMw2KMwCXEyuN4AS/q++/Bhj/HVBwzd6joTg3iGAZrqs04+AuV8LSex8tqO8E6PYQj2IlpeAnNcC+83I8G6AgdGhNmsbtxuftxZhzFgRhTeUHl4/Et7sZcfIa2+BvhALtjU7fY0dklJ15T8b4YB4VLuAcva6B9tZRBsgY1bO1K/XEH/kFvjMKHcMTMS9pdXsF9CBR1bfPOTtvxA25HCh5U4VLkMk7qWfAuWiM3nkGQrEZpHPGKD2ruv1Wxm6ewCQv0+te4gCb4DtkDHuPPoCymmBcCblbgHrwFN9fgU9jaqGbhkArz6P0gaa5BX4QV8l1l3olmSBdlSzyL6+EgaDqhGI56l7j+q8zTmoqb8Jo3lfp/LWwEyRk0QzmVEl1l6oG/fKI2uGfTcG29UhtSU5wyLuiTuoV5ApnwF55OYr2exVr0Q49491DJ3rQ9gs+Mm7aHfDdtO7AIEzAFO/2F/lwBKuXlrrIH4NIAAAAASUVORK5CYII=" alt="Steam" style="width:20px; height:20px; margin-right:4px; vertical-align: middle;">
                    <span>Steam</span>
                </a>
            </div>
        </td>
    </tr>
</table>

Base64编码有点长，我个人建议把图片放一个好一点的图床里，我这边为了稳定性才选择内嵌使用Base64，接下来就是最后的效果：

点击展开查看效果

Ethaniel

"用音乐记录生活，用代码连接未来。"

[email protected]

（部分老旧浏览器可能出现错乱，因为博客CSS原因可能会有所不同）

总结一下坑点

  1. WebMail对现代Flexbox 布局支持不佳，需要用传统表格布局
  2. WebMail对SVG支持不佳，需要使用正确的PNG Base64编码插入或者是URL插入
  3. 你需要一个愿意收你的邮件的好友

好了，这就是我亲手设计的邮件签名。简单却又不失个性。花了不少时间折腾这个签名，感觉自己又浪费了点时间。有兴趣的人可以拿去参考一下（记得把联系方式改成你自己的！我可不想被一大堆邮件轰炸），也欢迎留言交流。下面就是最终的样子，直接复制到邮件末尾附上发送就很好看

四版合照：


生活随记 个性签名 作品集
赏
  目录