2012-07-13 79 views
0

我想在电子邮件中设置全局字体。邮件是使用表建立的,以保持兼容性,但有一个表只是不接受我的风格。我做了什么:Outlook 2010电子邮件渲染

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

所以你看我试过的一切,我可以设置字体(而不是使用Times New Roman字体,如Outlook喜欢做),但它仍然不工作。我还能做什么?

---- -----编辑完整的电子邮件----

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

回答

1

在涉及电子邮件渲染时,Outlook是a **中的一个痛点。

要做的唯一安全的事情就是为每个段落和div添加style="font-family: Verdana, Arial, Helvetica, sans-serif;"。我们都知道它很烂 - 但告诉微软...

0

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

您需要将其添加到包含文本的每个td

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

正如你看到的,我用收效甚微内嵌样式,奇怪的是,它的工作原理在整个邮件,但没有在{foreach名称= aussen项目=从= $ order_products order_values} part(产品循环) – rootman 2012-07-13 15:09:27

+0

@rootman你能显示生成的html吗? – Undefined 2012-07-13 15:10:04

+0

它在产品循环中不起作用,因为您没有在产品循环的td或产品循环中的h2,p或div上定义字体系列。 – trismi 2017-05-02 13:44:56

0

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

我有一个类似的问题,并写了一个C#函数来将样式平铺到HTML中。

Flatten CSS into HTML using C# w/ MVC

相关问题