HTMLメールテンプレートの問題は、[フォントとボーダー底]

Question

私は電子メールテンプレートに問題持っています：

1. ので

を動作していないWindows上

フォントフォールバックが表示されないボーダー底：私はすべてのインライン

1. 国境問題を置くインラインジェネレータによってHTMLを実行します。

   <tr class="bottom-border"> 
   
   .bottom-border { 
       border-bottom: 1px solid #eff3f6; 
   } 
   

2. フォントの問題：

   @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700); 
   
   body { 
       font-family: 'Open Sans', "Helvetica", "Verdana", "Arial", sans-serif !important; 
   } 
   

フォントの問題が文句を言わないWindows上で動作し、まだイムにそれを言っていないにも関わらず、出力のTimes New Romanに思えます。 MAC上ではOpen Sansを出力します

Answer 1

Aha、私はフォントに問題があるのを見ます。

本文にフォントスタイルを追加する必要があります。

<table style="font-family: 'Open Sans', "Helvetica", "Verdana", "Arial", sans-serif !important;"> 

次に、ネストした表があるので、これもまたそれらにも適用する必要があります。

また、境界が適用されていない理由を知るために、インラインジェネレータの出力を確認する必要があります。

Answer 2

Outlook HATES webfonts。それらは表示されず、フォントスタックの先頭にあるように見える場合は、スタック全体を空にして、代わりにデフォルトのフォントを使用します。これに対抗するために、私はあなたのために、以下のいくつかのステップがあります：

1. あなたは上のHelveticaの周りに二重引用符（ "） を使用してのあなたのスタイル属性を台無しにしていることが でのスタイル属性を閉じています。あなたのフォント のスタックを取り除く2番目の二重引用符（ちょうどhelveticaの前）。それはまた、検証の問題の可能性があります。 は引用符を必要とするので、取り除くか、ちょうど 一重引用符（ '）を使います。
2. フォントを含むタグ（TD、 DIV、Pなど）にフォントをインラインで配置する必要があります。これは、スタックWそれは ウェブフォントです。
3. これで、コンテナ内にspanタグを追加する必要があります。あなたのwebfontがそこに宣言されている テキストの周りに追加する必要があります。

は限りボーダー下のように：

1. クラスを使用しないでください。あなたはそれをインライン化する必要があります。 例：<td style="border-bottom: 1px solid #eff3f6;">
2. TRタグにスタイルを適用しないでください.DTで使用すると、CSSの包括的なサポート が完全にサポートされます。