0

我正在尝试在电子邮件中设置全局字体。Mail 是使用表格构建的以保持兼容性，但有一张表格不接受我的样式。我做了什么：

{literal}
<style>
    *,table, div, p, td, tr, #tabledetails, .tabledetails {
    margin: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif !important;
    color: #000000;
    font-size: 12px;
    }
</style>
{/literal}

...

<table id="tabledetails" class="tabledetails" width="100%" border="0" cellspacing="0" cellpadding="4" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">...

<td class="left" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">{$order_values.products_quantity} x</td>

因此，如您所见，我尽我所能来设置字体（而不是像 Outlook 喜欢做的那样使用 Times New Roman），但它仍然不起作用。我还能做什么？

---- 编辑 ----- 完成电子邮件 ----

<link href="{$_system_mail_css}" type="text/css" rel="stylesheet">
{literal}
<style>
*,table, div, p, td, tr, #tabledetails, .tabledetails {
    margin: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif !important;
    color: #000000;
    font-size: 12px;
}
</style>
{/literal}

<table cellpadding="0" cellspacing="0" class="email_container" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
    <tr>
        <td colspan="3" class="email_toplogo">
        <div class="email_toplogo"><img src="{$_system_logo_url}" /></div>
        </td>
    </tr>
    <tr>
        <td class="email_table_left_bg" valign="top">
        <div class="email_table_left"></div>
        </td>
        <td class="email_table_center_bg" valign="top">
        <div class="email_content">
        <h1>Hallo {$order_data.delivery_firstname} {$order_data.delivery_lastname},</h1>
        <p>vielen Dank für Ihre Bestellung im Onlineshop von super cool company name i shouldnt tell anyone ;).
                      Wir werden Ihre Bestellung schnellstmöglich ausführen. Sie bekommen bei jeder Statusänderung Ihrer Bestellung eine automatisch generierte Email.</p>
                      <hr>
                 <P>Nachfolgend finden Sie Ihre Bestelldetails zur Kontrolle:</p>
        <p>{txt key=TEXT_ORDER_NUMBER}: {$order_data.orders_id}</p>
        <p>{txt key=TEXT_ORDER_DATE}: {$order_data.date_purchased}</p>
<p>E-Mail: {$order_data.customers_email_address}</p>
        <table cellpadding="0" cellspacing="0" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;">
        <tr>
        <td style="width: 250px;">
        <div class="shippingaddress">
        <h2>{txt key=TEXT_SHIPPING_ADDRESS}</h2>
        <p>{if $order_data.delivery_company}
        {$order_data.delivery_company}<br />
        {/if} {$order_data.delivery_firstname} {$order_data.delivery_lastname}<br />
        {$order_data.delivery_street_address}<br />
        {if $order_data.delivery_suburb} {$order_data.delivery_suburb}<br />
        {/if} {$order_data.delivery_postcode} {$order_data.delivery_city}<br />
        {if $order_data.delivery_state}{$order_data.delivery_state}
        {/if}{$order_data.delivery_country}<br />
        </p>
        </div>
        </td>
        <td>
        <div class="paymentaddress">
        <h2>{txt key=TEXT_PAYMENT_ADDRESS}</h2>
        <p>{if $order_data.billing_company} {$order_data.billing_company}<br />
        {/if} {$order_data.billing_firstname} {$order_data.billing_lastname}<br />
        {$order_data.billing_street_address}<br />
        {if $order_data.billing_suburb} {$order_data.billing_suburb}<br />
        {/if} {$order_data.billing_postcode} {$order_data.billing_city}<br />
        {if $order_data.billing_state}{$order_data.billing_state}
        {/if}{$order_data.billing_country}<br />
        </p>
        </div>
        </td>
        </tr>
        </table>
    {if $payment_info}<hr><h2>{txt key=TEXT_PAYMENT_INFOS}</h2>
        <p>{$payment_info}</p>{/if} 
        <hr>
<table id="tabledetails" class="tabledetails" width="100%" border="0" cellspacing="0" cellpadding="4" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">
            <tr class="headerrow">
                <td class="left">{txt key=TEXT_QTY}</td>
                <td class="left">{txt key=TEXT_ARTICLE}</td>
                <td class="left">{txt key=TEXT_PRODUCTS_MODEL}</td>
                <td class="right">{txt key=TEXT_SINGLE_PRICE}</td>
                <td class="right">{txt key=TEXT_TOTAL_PRICE}</td>
            </tr>
            {foreach name=aussen item=order_values from=$order_products}
            <tr class="{cycle values="contentrow1,contentrow2"}">
                <td class="left" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">{$order_values.products_quantity} x</td>
                <td class="left" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">{$order_values.products_name}</strong></td>
                <td class="left" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">{$order_values.products_model}</td>
                <td class="right" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">{$order_values.products_price.formated}</td>
                <td class="right" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">{$order_values.products_final_price.formated}</td>
            </tr>
            {$order_values.products_information.html_content}
            {/foreach}
            <tr>
                <td colspan="5" align="right" class="subtotal">
                <div align="right">
                <p>{txt key=TEXT_SUB_TOTAL}: {$total.product_total.formated}</p>
                {foreach name=aussen item=order_total_values from=$order_total_data}
                <p>{$order_total_values.orders_total_name}:
                {$order_total_values.orders_total_price.formated}</p>
                {/foreach} {foreach name=aussen item=tax_data from=$total.total_tax}
                <p>{txt key=TEXT_TAX} {$tax_data.tax_key}%:
                {$tax_data.tax_value.formated}</p>
                {/foreach}
                <p><span class="doubleline">{txt key=TEXT_TOTAL}: {$total.total.formated}</span></p>
                </div>
            </tr>
        </table>
        </div>
<hr>
        <div class="email_footer">{$_system_footer_html}</div>
        </td>
        <td class="email_table_right_bg" valign="top">
        <div class="email_table_right"></div>
        </td>
    </tr>
</table>

---- 编辑 2 ---- 产品列表部分的生成代码

<table id="tabledetails" class="tabledetails" width="100%" border="0" cellspacing="0" cellpadding="4" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">
    <tr class="headerrow">
        <td class="left">Anzahl</td>
        <td class="left">Artikel</td>
        <td class="left">Art.Nr.</td>
        <td class="right">Einzelpreis</td>
        <td class="right">Gesamtpreis</td>
    </tr>
                <tr class="contentrow1">
        <td class="left" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">1.00 x</td>
        <td class="left" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">Mavic Rennradschuh Zxellium 2011 black / white / yellow mavic</strong></td>
        <td class="left" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">14207</td>
        <td class="right" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;"><span class="price"> 220,00 EUR</span></td>
        <td class="right" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;"><span class="price"> 220,00 EUR</span></td>
    </tr>
            <tr class="contentrow1">        <td class="right" valign="top"></td>        <td class="left" valign="top">                  <h3>                Schuhgröße:             </h3>                                           </td>       <td class="right" valign="top"></td>        <td class="right" valign="top"></td>        <td class="right" valign="top"></td>    </tr>       <tr class="contentrow1">        <td class="right" valign="top"></td>                        <td class="left" valign="top">                              42                              </td>                                       <td class="right" valign="top"> </td>                           <td class="right" valign="top">                                                                                                                                         </td>                               <td class="right" valign="top">                                                                                 </td>       </tr>   
                <tr>
        <td colspan="5" align="right" class="subtotal">
        <div align="right">
        <p>Zwischensumme: <span class="price"> 220,00 EUR</span></p>
                        <p>Nachnahme:
        <span class="price"> 3,60 EUR</span></p>
                        <p>DHL - versichert:
        <span class="price"> 0,00 EUR</span></p>
                        <p>inkl. MwSt. 19%:
        <span class="price"> 35,70 EUR</span></p>
                        <p><span class="doubleline">Gesamtsumme: <span class="price"> 223,60 EUR</span></span></p>
        </div>
    </tr>
</table>
4

3 回答 3

1

在电子邮件呈现方面，Outlook 是个痛点。

唯一安全的做法是在style="font-family: Verdana, Arial, Helvetica, sans-serif;"每个段落和 div 中添加一个。我们都知道这很糟糕 - 但告诉微软......

于 2012-07-13T15:00:47.367 回答
0

正如其他人所说，您需要将样式类扁平化为所有对象的内联样式。

我遇到了类似的问题，并编写了一个 C# 函数将样式展平到 HTML 中。

使用带有 MVC 的 C# 将 CSS 扁平化为 HTML

于 2014-03-04T10:37:33.903 回答
0

仅在 html 电子邮件中使用内联样式。它将在某些电子邮件客户端中被删除。Gmail 就是一个例子。

您需要将此添加到每个td包含的文本中。

style="font-family: Verdana, Arial, Helvetica, sans-serif;"
于 2012-07-13T15:05:30.500 回答