Outlook 2010電子郵件呈現

Question

我正在嘗試在電子郵件中設置全局字體。 郵件是使用表構建的，以保持兼容性，但是有一個表只是不接受我的樣式。 我做了什么：

{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>

Answer 1

當涉及到電子郵件呈現時，Outlook實在是讓人頭疼。

唯一安全的方法是添加style="font-family: Verdana, Arial, Helvetica, sans-serif;" 每個段落和div 我們都知道這很糟糕-但是告訴微軟...

Answer 2

僅在html電子郵件上使用內聯樣式。 在某些電子郵件客戶端中將刪除它。 Gmail就是一個例子。

您需要將其添加到每個包含文本的td中。

style="font-family: Verdana, Arial, Helvetica, sans-serif;"

Answer 3

正如其他人所說，您需要在所有對象上將樣式類展平為內聯樣式。

我遇到了類似的問題，並編寫了一個C＃函數以將樣式展平為HTML。

使用帶有MVC的C＃將CSS壓縮為HTML