Question

我正在处理带有Google字体（蒙特塞拉特）的电子邮件模板，但是当我在Outlook邮件上打开它时，除了其他电子邮件外，我在电子邮件模板上的字体和图像显示不正确。 Outlook显示默认字体（新罗马时间），我还附上了gmail和outlook的截图供参考

我使用此代码：

<!--[if gte mso 9]>
<style type="text/css">
/* my css for displaying the background and fonts */
</style>
<![endif]-->

Answer 1

这是一个例子。希望这项工作。

背景图片示例：

<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
    <tr>
        <td style="width: 300px; height: 80px; background-image: url('http://placekitten.com/g/300/80');">
        <!--[if gte mso 9]>
            <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 300px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/300/80" />
            <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 300px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
            <div>
        <![endif]-->
            <table width="300" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
                <tr>
                    <td height="80" align="center" valign="top" style="color:#ffffff;font-size:20px;">
                        <span>Text</span>
                    </td>
                </tr>
            </table>
        <!--[if gte mso 9]>
            </div>
            </v:shape>
        <![endif]-->
        </td>
        <td style="width: 100px; height: 80px; background-image: url('http://placekitten.com/g/100/80');">
        <!--[if gte mso 9]>
            <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 100px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/100/80" />
            <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 100px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
            <div>
        <![endif]-->
            <table width="80" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
                <tr>
                    <td height="80" align="center" valign="top">
                        <span>Text</span>
                    </td>
                </tr>
            </table>
        <!--[if gte mso 9]>
            </div>
            </v:shape>
        <![endif]-->
        </td>
        <td style="width: 200px; height: 80px; background-image: url('http://placekitten.com/g/200/100');">
        <!--[if gte mso 9]>
            <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 200px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/200/100" />
            <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 200px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
            <div>
        <![endif]-->
            <table width="200" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
                <tr>
                    <td height="80" align="center" valign="top" style="color:#ffffff;font-size:20px;">
                        <span>Text</span>
                    </td>
                </tr>
            </table>
        <!--[if gte mso 9]>
            </div>
            </v:shape>
        <![endif]-->
        </td>
    </tr>
</table>
<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
    <tr>
        <td style="width: 600px; height: 150px; background-image: url('http://placekitten.com/g/600/150');">
        <!--[if gte mso 9]>
            <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 600px; height: 150px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/600/150" />
            <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 600px; height: 150px; top: -5; left: -10; border: 0; z-index: 2;'>
            <div>
        <![endif]-->
            <table width="600" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
                <tr>
                    <td height="150" align="center" valign="top" style="color:#ffffff;font-size:20px;">
                        <span>Text</span>
                    </td>
                </tr>
            </table>
        <!--[if gte mso 9]>
            </div>
            </v:shape>
        <![endif]-->
        </td>
    </tr>
</table>

字体示例：

    @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: local('Montserrat-Regular'), 
    url(https://fonts.gstatic.com/s/montserrat/v7/zhcz-
   _WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff'); 
    }

outlook电子邮件模板上的字体问题

1 个答案: