web-dev-qa-db-ja.com

Outlook2013はfont-familyを無視します

Outlook 2013の電子メールをコーディングするときにフォントファミリを指定するための最良の方法は何ですか？次のようにインラインで追加すると、font-familyは無視されることがわかりました。

<span style="font-family: Helvetica, Arial, sans-serif;">Text</span>

私はこれが機能することを発見しました：

<span><font face="Helvetica, Arial, sans-serif">Text</font></span>

ただし、テキストが追加されるすべての場所にタグを追加する必要があるため、これは面倒です。複数の要素の周りにタグをラップすることは無視されます。フォントを一度設定して忘れる方法はありますか？

htmlcssoutlookhtml-emailoutlook-2003
8
Marc

Outlook 2013で指定されたフォントスタックを使用するように強制する効果的な方法は、問題のテキストを<span>でラップし、!importantを定義するときにfont-familyを使用することです。 Outlookは、ヘッドで定義されているGoogleフォントをすべて削除しますが、他の電子メールクライアントはそれらを使用します。次に例を示します。

<head>
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
</head>

<body>
<table>
  <tr>
    <td style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
      This will always be Helvetica.
    </td>
  </tr>
</table>

<table>
  <tr>
    <td style="font-family: 'Indie Flower', Helvetica, Arial, sans-serif; font-size: 12px;">
       Outlook will display Times New Roman. Others will display Helvetica or Indie Flower.
    </td>
  </tr>
</table>

<table>
  <tr>
    <td style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
      <span style="font-family: 'Indie Flower', Helvetica, Arial, sans-serif !important;">
        Outlook will display Helvetica, others will display Indie Flower.
      </span>
    </td>
  </tr>
</table>
</body>

これはこの素晴らしい記事から来ました： https://www.emailonacid.com/blog/article/email-development/custom-font-stacks-in-Outlook

8
Marc

私はこの問題を抱えていて、問題を修正した次の投稿を見つけました： https://litmus.com/community/discussions/982-Outlook-overrides-font-to-times-new-roman

基本的に、Outlookで目的のフォントファミリ（この場合はArial、Helvetica、またはSan-Serif）を使用する代わりに、電子メールテンプレートのbodyタグの直後に次の条件付きcssスタイルスニペットを追加する必要があります。スティッキーなMSOTimes-New-Romanフォント：

<!--[if mso]>
<style type="text/css">
body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
</style>
<![endif]-->
6
CoderRoller

メールをどのように作成していますか？テーブルを使用している場合は

<td style="font-family: Helvetica, Arial, sans-serif;">

どのクライアントでも正常に動作します。のテキストの一部が残りの部分と異なる場合にのみ、スパンを使用する必要があります。

Outlook 2013は、ヘッダーを無視しません。私はたくさんの電子メールを作成し、ヘッダーでa：visitedのスタイルを設定しているので、これを知っています。これにより、Outlookは（特に）紫色に変更されず、間違いなく機能します。

編集：より正確な答えは、残念ながら毎回インラインでスタイルを指定する必要はないと言うことです。 （最初は質問のそのビットを見ませんでした！）

スニペット：

<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size: 14px; line-height: 18px; text-align: center; color: #000000;">

Some text here.....
</td>
</tr>
</table>
1
lejimmie

前の回答で述べたCoderRollerのように、フォントファミリ宣言をbodyタグ内に配置する必要がないというこのフォントの問題について指摘したいと思います。

また、私はこの問題について何か他のものを見つけました、私はこのような電子メールの中でグーグルApiのフォントを使用していました：

そして、bodyタグの内側：

<!--[if mso]>
    <style type="text/css">
        body, table, td {font-family: 'Playfair Display', Helvetica, sans-serif !important;}
    </style>
<![endif]-->

ただし、Outlookはそのようなカスタムフォントを使用することに同意しないため、カスタムフォントの後にある他のすべてのフォントのフォールバックを無視します。その場合は、カスタムgoogleフォントを削除して、次のようなものを使用してください。

<!--[if mso]>
    <style type="text/css">
        body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
    </style>
<![endif]-->

私は現在、HTMLのヘッドにこのcssスタイルを持っています。これをリトマスでテストしました。宣言がbodyタグ内にあるか、headタグ内にあるかは関係ありません。

1
Leo

残念ながら、私の経験では、Outlook（およびWindows Phone、図を参照）で一貫して機能するのはfontタグだけです。一部のクライアントはfontのface属性をレンダリングしないため、テキストにも標準のCSSインラインを追加する必要があります。

0
zazzyzeph

動作する非常に単純なソリューションがあります。非推奨のフォント要素内にすべてをラップするだけです！

<font face="Arial">
<!-- content -->
</font>
0
grifare -- Armagan Tekdoner

カスタムフォントは、広くサポートされている機能ではありません。 AOL Mail Native Androidメールアプリ（Gmailアプリではない）AppleメールiOSメールOutlook2000Outlook.comアプリOutlookiOSカスタムWebをサポートする唯一のメールクライアントフォント。

役に立つ記事。 https://litmus.com/blog/the-ultimate-guide-to-web-fonts

0
Richard Clifford