电子邮件中没有像在 HTML 中那样显示粗勾号

Question

我最初询问过这个并得到了常规 HTML 的答案，但是以下代码在通过电子邮件发送时显示不一样：

<div style="color:white; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10004;</div>
<div style="color:yellow; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10004;</div>
<div style="color:green; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10004;</div>

这是因为出现Microsoft sees it as an emoji.

我尝试了以下代码，但没有任何变化：

<div class="unicode" style="color:white; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10004;</div>

我得到的是默认值：

这是我目前正在 using/tweaking 尝试让它工作的 jinja2 模板（参见 tbody 部分）：

jinja_tmplt = """<!DOCTYPE html>
<html lang=\"en-US\">
{% for html_CI in html_CI_list %}
    {% set columns = html_CI.tech_DF.columns.values[1:] %}
    <h1>{{ html_CI.tech_grp }}</h1><br/>
    {{ html_CI.tech_DF.to_html(index=False) }}<br>
    <style>.table tbody tr:nth-child(even) {background-color: #ABC233;} .table tbody tr:nth-child(odd) {background-color: #6CC04A;}</style>
        <table border="1" class="dataframe table table-striped">
            <thead>
                <tr style="text-align: center;">
                {% for col_hdr in columns %}
                    <th style="background-color: #005C21; text-align: center; color:white">{{ col_hdr }}</th>
                {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for row in html_CI.tech_DF.itertuples() %}
                    <tr style="text-align: center;">
                    {% for elem_data in row[2:] %}
                        {% set loop_num = loop.index0 %}
                        {% if loop_num == 0 %}
                            <td>{{ elem_data }}</td>
                        {% else %}
                            <td><div style="color:white; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10004;</div></td>
                        {% endif %}
                    {% endfor %}
                    </tr>
                {% endfor %}
            </tbody>
        </table>
{% endfor %}
</html>"""

请注意 table 样式着色也适用于 HTML 但不适用于电子邮件。

Answer 1

Pseudo-elements

你试过了吗：

div::before {
  content:'14';
}

尝试所有的复选标记，也许有一些不被视为表情符号：

11   &#9745;
05   &#9989;
13   &#10003;
14   &#10004;
f5f8  &#128504;
f5f9  &#128505;

演示

div::before {
  content:'14';
}

<div style="color:white; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;"></div>
<div style="color:yellow; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;"></div>
<div style="color:green; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;"></div>

Answer 2

:before 不适用于 Gmail、Outlook、Yahoo 或笔记。

https://www.campaignmonitor.com/css/selectors/before/

以下复选标记适用于每个主要的电子邮件客户端。它们可以调整大小和颜色。它们的确切外观可能因电子邮件客户端或用于显示它们的字体而异：

✓ ✓ - 复选标记
✔ ✔ - 粗勾号

颜色示例：

<span style="color: #ff0000;">✓ - Check Mark: red </span>

<span style="color: #0000ff;">✔ - Heavy Check Mark: blue</span>

祝你好运。

Answer 3

看起来唯一的选择是使用... None 以上的方法可以满足我的需要。

我确实需要使用以下代码，但是 none 其他选项（div 等）适用于电子邮件。

&#10003;

这是使用的 Jinja ... 将它们放在一起：

页眉
风格
模板
页脚

这是代码...

JINJA_HDR = """<!DOCTYPE html>
    <html lang=\"en-US\">"""

JINJA_FTR = """</html>"""


def get_style():
    """


    """

    html_style = """<style>
            table.greenCisco {
              border: 2px solid #005C21;
              background-color: #6CC04A;
              width: 100%;
              text-align: center;
              border-collapse: collapse;
            }
            tr:nth-child(even) {
                background: #ABC233;
            }
            tr:nth-child(odd) {
                background: #6CC04A;
            }
            table.greenCisco td, table.greenCisco th {
              border: 2px solid #000000;
              padding: 3px 2px;
            }
            table.greenCisco tbody td {
                color: #FFFFFF;
            }
            table.greenCisco thead {
              background: #005C21;
              border-bottom: 1px solid #444444;
            }
            table.greenCisco thead th {
              font-size: 15px;
              font-weight: bold;
              color: #FFFFFF;
              text-align: center;
              border-left: 2px solid #D0E4F5;
            }
            table.blueTable tfoot {
              font-size: 13px;
              font-weight: bold;
              color: #FFFFFF;
              background: #D0E4F5;
              text-align: center;
              border-top: 2px solid #444444;
            }
        </style>"""

    return html_style

def get_Jinja(df_list:list):
    """
    This function takes in a list of DataFrames and returns 
    a Jinja parsed string of table data used in email.

    """

    # skipping checking the input for now - kkeeton 20190122
    jinja_tmplt = """{% for html_CI in html_CI_list %}
        {% set columns = html_CI.tech_DF.columns.values[1:] %}
        <h1>{{ html_CI.tech_grp }}</h1><br/>
        <table class="greenCisco">
            <thead>
                <tr>
                {% for col_hdr in columns %}
                    <th>{{ col_hdr }}</th>
                {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for row in html_CI.tech_DF.itertuples() %}
                    {% set row_num = loop.index0 %}
                    {% if row_num % 2 == 0 %}
                        <tr bgcolor="#ABC233">
                    {% else %}
                        <tr bgcolor="#6CC04A">
                    {% endif %}
                    {% for elem_data in row[2:] %}
                        {% set loop_num = loop.index0 %}
                        {% if loop_num == 0 %}
                            <td>{{ elem_data }}</td>
                        {% else %}
                            {% if elem_data == 0 %}
                                <td><div style="color:white; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10003;</div></td>
                            {% elif elem_data == 1 %}
                                <td><div style="color:yellow; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10003;</div></td>
                            {% elif elem_data == 2 %}
                                <td><div style="color:green; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10003;</div></td>
                            {% endif %}
                        {% endif %}
                    {% endfor %}
                    </tr>
                {% endfor %}
            </tbody>
            <tfoot valign="center">
                <tr colspan="0"><span style="color:white; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10003;</span> <b>Pending</b> <span style="color:yellow; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10003;</span> <b>In Progress</b> <span style="color:green; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10003;</span> <b>Complete</b></tr>
            </tfoot>
        </table>
    {% endfor %}"""

    return jinja_tmplt

电子邮件中没有像在 HTML 中那样显示粗勾号

Heavy Check Mark Not Showing In Email As It Does In HTML

html

unicode

outlook

emoji

Pseudo-elements

演示