如何在电子邮件模板中使用 montserrat 字体？
How to use montserrat font in email template?
我正在为其中一个项目创建一个新的电子邮件模板。我想在我的电子邮件模板中使用 Montserrat 字体。但是，当我收到电子邮件时，内容充满了 Times New Roman 而没有 Montserrat 字体。如何在电子邮件模板中使用 Montserrat 字体？
我还用内联 css 编写了代码。巴士不工作。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="width:100%;font-family:montserrat;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0;">
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:thin,extra-light,light,100,200,300,400,500,600,700,800" rel="stylesheet">
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="telephone=no" name="format-detection">
<title>New email</title>
<!--[if (mso 16)]>
<style type="text/css">
a {text-decoration: none;}
</style>
<![endif]-->
<!--[if gte mso 9]><style>sup { font-size: 100% !important; }</style><![endif]-->
<style type="text/css">
@media only screen and (max-width:600px) {p, ul li, ol li, a { font-size:16px!important; line-height:150%!important } h1 { font-size:20px!important; text-align:center; line-height:120%!important } h2 { font-size:16px!important; text-align:left; line-height:120%!important } h3 { font-size:20px!important; text-align:center; line-height:120%!important } h1 a { font-size:20px!important } h2 a { font-size:16px!important; text-align:left } h3 a { font-size:20px!important } .es-menu td a { font-size:14px!important } .es-header-body p, .es-header-body ul li, .es-header-body ol li, .es-header-body a { font-size:10px!important } .es-footer-body p, .es-footer-body ul li, .es-footer-body ol li, .es-footer-body a { font-size:12px!important } .es-infoblock p, .es-infoblock ul li, .es-infoblock ol li, .es-infoblock a { font-size:12px!important } *[class="gmail-fix"] { display:none!important } .es-m-txt-c, .es-m-txt-c h1, .es-m-txt-c h2, .es-m-txt-c h3 { text-align:center!important } .es-m-txt-r, .es-m-txt-r h1, .es-m-txt-r h2, .es-m-txt-r h3 { text-align:right!important } .es-m-txt-l, .es-m-txt-l h1, .es-m-txt-l h2, .es-m-txt-l h3 { text-align:left!important } .es-m-txt-r img, .es-m-txt-c img, .es-m-txt-l img { display:inline!important } .es-button-border { display:block!important } a.es-button { font-size:14px!important; display:block!important; border-left-width:0px!important; border-right-width:0px!important } .es-btn-fw { border-width:10px 0px!important; text-align:center!important } .es-adaptive table, .es-btn-fw, .es-btn-fw-brdr, .es-left, .es-right { width:100%!important } .es-content table, .es-header table, .es-footer table, .es-content, .es-footer, .es-header { width:100%!important; max-width:600px!important } .es-adapt-td { display:block!important; width:100%!important } .adapt-img { width:100%!important; height:auto!important } .es-m-p0 { padding:0px!important } .es-m-p0r { padding-right:0px!important } .es-m-p0l { padding-left:0px!important } .es-m-p0t { padding-top:0px!important } .es-m-p0b { padding-bottom:0!important } .es-m-p20b { padding-bottom:20px!important } .es-mobile-hidden, .es-hidden { display:none!important } .es-desk-hidden { display:table-row!important; width:auto!important; overflow:visible!important; float:none!important; max-height:inherit!important; line-height:inherit!important } .es-desk-menu-hidden { display:table-cell!important } table.es-table-not-adapt, .esd-block-html table { width:auto!important } table.es-social { display:inline-block!important } table.es-social td { display:inline-block!important } }
#outlook a {
padding:0;
}
.ExternalClass {
width:100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height:100%;
}
.es-button {
mso-style-priority:100!important;
text-decoration:none!important;
}
a[x-apple-data-detectors] {
color:inherit!important;
text-decoration:none!important;
font-size:inherit!important;
font-family:inherit!important;
font-weight:inherit!important;
line-height:inherit!important;
}
.es-desk-hidden {
display:none;
float:left;
overflow:hidden;
width:0;
max-height:0;
line-height:0;
mso-hide:all;
}
.es-button-border:hover a.es-button {
background:#ffffff!important;
border-color:#ffffff!important;
}
.es-button-border:hover {
background:#ffffff!important;
border-style:solid solid solid solid!important;
border-color:#3d5ca3 #3d5ca3 #3d5ca3 #3d5ca3!important;
}
td .es-button-border:hover a.es-button-1 {
background:#ffffff!important;
border-color:#ffffff!important;
}
td .es-button-border-2:hover {
background:#ffffff!important;
border-style:solid solid solid solid!important;
border-color:#e5e5e5 #e5e5e5 #e5e5e5 #e5e5e5!important;
}
</style>
</head>
<body style="width:100%;font-family:montserrat;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0;">
<div class="es-wrapper-color" style="background-color:#FAFAFA;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" color="#fafafa"></v:fill>
</v:background>
<![endif]-->
<table class="es-wrapper" width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;padding:0;Margin:0;width:100%;height:100%;background-repeat:repeat;background-position:center top;">
<tr style="border-collapse:collapse;">
<td valign="top" style="padding:0;Margin:0;">
<table class="es-content" cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;">
<tr style="border-collapse:collapse;">
<td style="padding:0;Margin:0;background-color:#FAFAFA;" bgcolor="#fafafa" align="center">
<table class="es-content-body" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;" width="600" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center">
<tr style="border-collapse:collapse;">
<td style="Margin:0;padding-top:10px;padding-bottom:15px;padding-left:20px;padding-right:20px;border-radius:10px 10px 0px 0px;background-color:#FFFFFF;background-position:left top;" bgcolor="#ffffff" align="left">
<table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td width="560" valign="top" align="center" style="padding:0;Margin:0;">
<table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td align="center" style="padding:0;Margin:0;"><img class="adapt-img" src="https://cdn1.imggmi.com/uploads/2019/10/29/fa07bb493fd5106619500a4f53c013e4-full.png" height="52" width="151" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;" width="151"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr style="border-collapse:collapse;">
<td style="padding:0;Margin:0;padding-left:20px;padding-right:20px;padding-top:40px;background-color:transparent;background-position:left top;" bgcolor="transparent" align="left">
<table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td width="560" valign="top" align="center" style="padding:0;Margin:0;">
<table style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-position:left top;" width="100%" cellspacing="0" cellpadding="0">
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-right:10px;padding-top:25px;padding-left:35px;"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:24px;color:#666666;">Hello Sam</p></td>
</tr>
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-right:10px;padding-top:25px;padding-left:35px;"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:24px;color:#666666;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p></td>
</tr>
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-right:10px;padding-top:25px;padding-left:35px;"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:24px;color:#666666;">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p></td>
</tr>
<tr style="border-collapse:collapse;">
<td align="center" style="padding:0;Margin:0;">
<table class="es-content-body" width="600" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;">
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-left:15px;padding-top:20px;padding-right:35px;">
<table width="100%" cellspacing="0" cellpadding="5" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td align="center" style="Margin:0;padding-top:10px;padding-bottom:10px;padding-left:20px;padding-right:20px;">
<table style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;width:500px;" class="cke_show_border" cellspacing="1" cellpadding="1" border="0" align="left">
<thead bgcolor="#eeeeee">
<tr style="border-collapse:collapse;">
<td width="40%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:200%;mso-line-height-rule:exactly;font-family:montserrat;text-align:center;">Item Type</h4></td>
<td width="40%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:200%;mso-line-height-rule:exactly;font-family:montserrat;text-align:center;">Quantity</h4></td>
<td width="20%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:200%;mso-line-height-rule:exactly;font-family:montserrat;text-align:center;">Price</h4></td>
</tr>
</thead>
<tr style="border-collapse:collapse;">
<td style="padding:5px 10px 5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="40%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:32px;color:#666666;text-align:center;">Shirt</p></td>
<td style="padding:5px 10px 5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="40%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:32px;color:#666666;text-align:center;">2</p></td>
<td style="padding:5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="20%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:32px;color:#666666;text-align:center;">5000.00</p></td>
</tr>
<tr style="border-collapse:collapse;">
<td style="padding:5px 10px 5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="40%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:32px;color:#666666;text-align:center;">Trousers</p></td>
<td style="padding:5px 10px 5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="40%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:32px;color:#666666;text-align:center;">3</p></td>
<td style="padding:5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="20%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:32px;color:#666666;text-align:center;">7000.00</p></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-top:10px;padding-left:35px;padding-right:35px;">
<table style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;border-top:3px solid #EEEEEE;border-bottom:3px solid #EEEEEE;" width="100%" cellspacing="0" cellpadding="0">
<tr style="border-collapse:collapse;">
<td align="left" style="Margin:0;padding-left:10px;padding-right:10px;padding-top:15px;padding-bottom:15px;">
<table style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;width:500px;" class="cke_show_border" cellspacing="1" cellpadding="1" border="0" align="left">
<tr style="border-collapse:collapse;">
<td width="40%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:120%;mso-line-height-rule:exactly;font-family:montserrat;text-align:center;">TOTAL</h4></td>
<td width="40%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:120%;mso-line-height-rule:exactly;font-family:montserrat;"><br></h4></td>
<td width="20%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:120%;mso-line-height-rule:exactly;font-family:montserrat;">12000.00</h4></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr style="border-collapse:collapse;">
<td class="es-m-txt-c" align="center" bgcolor="transparent" style="Margin:0;padding-left:10px;padding-right:10px;padding-top:40px;padding-bottom:40px;"><span class="es-button-border es-button-border-2" style="border-style:solid;border-color:#FFFFFF;background:#FFFFFF;border-width:2px;display:inline-block;border-radius:11px;width:auto;"><a href="https://viewstripo.email/" class="es-button es-button-1" target="_blank" style="mso-style-priority:100 !important;text-decoration:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:Montserrat;font-size:14px;color:#34B9B8;border-style:solid;border-color:#FFFFFF;border-width:15px 20px 15px 20px;display:flex;background:#FFFFFF;border-radius:7px;font-weight:bold;font-style:normal;line-height:17px;width:auto;text-align:center;border:2px solid #EEEEEE;border-left-width:2px;border-right-width:2px;padding:6px;"><span style="margin-top:6px;">MAKE A REPLY</span></a></span></td>
</tr>
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-right:10px;padding-top:25px;padding-left:35px;"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:24px;color:#666666;">Wamly</p><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:24px;color:#666666;">ABC</p></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>
您的 HTML.
中缺少 两个 东西
1.您没有后备字体。
需要回退字体，因此如果找不到字体，将检查字体系列中的下一个字体是否显示。
示例：
font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
您的代码只有：
font-family: 'Montserrat'
浏览器只查找 Montserrat，如果找不到，则默认为 Times New Roman。我已经用后备字体（如下）修复了你的HTML，但请检查这些是否是你想要的后备字体。
2。您需要专门为 Outlook 定义字体。
您还需要在文档的头部添加以下代码，这样如果 Outlook 无法找到 Web 字体，它将显示一个字体系列供您的浏览器选择。
<!--[if (mso 9)]>
<style type="text/css">
table td{font-family: 'Helvetica Neue', Helvetica, Arial, 'sans-serif' !important;}
</style>
<![endif]-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="width:100%;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0;">
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:thin,extra-light,light,100,200,300,400,500,600,700,800" rel="stylesheet">
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="telephone=no" name="format-detection">
<title>New email</title>
<!--[if (mso 9)]>
<style type="text/css">
a {text-decoration: none;}
table td{font-family: 'Helvetica Neue', Helvetica, Arial, 'sans-serif' !important;}
</style>
<![endif]-->
<!--[if gte mso 9]><style>sup { font-size: 100% !important; }</style><![endif]-->
<style type="text/css">
@media only screen and (max-width:600px) {p, ul li, ol li, a { font-size:16px!important; line-height:150%!important } h1 { font-size:20px!important; text-align:center; line-height:120%!important } h2 { font-size:16px!important; text-align:left; line-height:120%!important } h3 { font-size:20px!important; text-align:center; line-height:120%!important } h1 a { font-size:20px!important } h2 a { font-size:16px!important; text-align:left } h3 a { font-size:20px!important } .es-menu td a { font-size:14px!important } .es-header-body p, .es-header-body ul li, .es-header-body ol li, .es-header-body a { font-size:10px!important } .es-footer-body p, .es-footer-body ul li, .es-footer-body ol li, .es-footer-body a { font-size:12px!important } .es-infoblock p, .es-infoblock ul li, .es-infoblock ol li, .es-infoblock a { font-size:12px!important } *[class="gmail-fix"] { display:none!important } .es-m-txt-c, .es-m-txt-c h1, .es-m-txt-c h2, .es-m-txt-c h3 { text-align:center!important } .es-m-txt-r, .es-m-txt-r h1, .es-m-txt-r h2, .es-m-txt-r h3 { text-align:right!important } .es-m-txt-l, .es-m-txt-l h1, .es-m-txt-l h2, .es-m-txt-l h3 { text-align:left!important } .es-m-txt-r img, .es-m-txt-c img, .es-m-txt-l img { display:inline!important } .es-button-border { display:block!important } a.es-button { font-size:14px!important; display:block!important; border-left-width:0px!important; border-right-width:0px!important } .es-btn-fw { border-width:10px 0px!important; text-align:center!important } .es-adaptive table, .es-btn-fw, .es-btn-fw-brdr, .es-left, .es-right { width:100%!important } .es-content table, .es-header table, .es-footer table, .es-content, .es-footer, .es-header { width:100%!important; max-width:600px!important } .es-adapt-td { display:block!important; width:100%!important } .adapt-img { width:100%!important; height:auto!important } .es-m-p0 { padding:0px!important } .es-m-p0r { padding-right:0px!important } .es-m-p0l { padding-left:0px!important } .es-m-p0t { padding-top:0px!important } .es-m-p0b { padding-bottom:0!important } .es-m-p20b { padding-bottom:20px!important } .es-mobile-hidden, .es-hidden { display:none!important } .es-desk-hidden { display:table-row!important; width:auto!important; overflow:visible!important; float:none!important; max-height:inherit!important; line-height:inherit!important } .es-desk-menu-hidden { display:table-cell!important } table.es-table-not-adapt, .esd-block-html table { width:auto!important } table.es-social { display:inline-block!important } table.es-social td { display:inline-block!important } }
#outlook a {
padding:0;
}
.ExternalClass {
width:100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height:100%;
}
.es-button {
mso-style-priority:100!important;
text-decoration:none!important;
}
a[x-apple-data-detectors] {
color:inherit!important;
text-decoration:none!important;
font-size:inherit!important;
font-family:inherit!important;
font-weight:inherit!important;
line-height:inherit!important;
}
.es-desk-hidden {
display:none;
float:left;
overflow:hidden;
width:0;
max-height:0;
line-height:0;
mso-hide:all;
}
.es-button-border:hover a.es-button {
background:#ffffff!important;
border-color:#ffffff!important;
}
.es-button-border:hover {
background:#ffffff!important;
border-style:solid solid solid solid!important;
border-color:#3d5ca3 #3d5ca3 #3d5ca3 #3d5ca3!important;
}
td .es-button-border:hover a.es-button-1 {
background:#ffffff!important;
border-color:#ffffff!important;
}
td .es-button-border-2:hover {
background:#ffffff!important;
border-style:solid solid solid solid!important;
border-color:#e5e5e5 #e5e5e5 #e5e5e5 #e5e5e5!important;
}
</style>
</head>
<body style="width:100%;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0;">
<div class="es-wrapper-color" style="background-color:#FAFAFA;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" color="#fafafa"></v:fill>
</v:background>
<![endif]-->
<table class="es-wrapper" width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;padding:0;Margin:0;width:100%;height:100%;background-repeat:repeat;background-position:center top;">
<tr style="border-collapse:collapse;">
<td valign="top" style="padding:0;Margin:0;">
<table class="es-content" cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;">
<tr style="border-collapse:collapse;">
<td style="padding:0;Margin:0;background-color:#FAFAFA;" bgcolor="#fafafa" align="center">
<table class="es-content-body" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;" width="600" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center">
<tr style="border-collapse:collapse;">
<td style="Margin:0;padding-top:10px;padding-bottom:15px;padding-left:20px;padding-right:20px;border-radius:10px 10px 0px 0px;background-color:#FFFFFF;background-position:left top;" bgcolor="#ffffff" align="left">
<table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td width="560" valign="top" align="center" style="padding:0;Margin:0;">
<table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td align="center" style="padding:0;Margin:0;"><img class="adapt-img" src="https://cdn1.imggmi.com/uploads/2019/10/29/fa07bb493fd5106619500a4f53c013e4-full.png" height="52" width="151" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;" /></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr style="border-collapse:collapse;">
<td style="padding:0;Margin:0;padding-left:20px;padding-right:20px;padding-top:40px;background-color:transparent;background-position:left top;" bgcolor="transparent" align="left">
<table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td width="560" valign="top" align="center" style="padding:0;Margin:0;">
<table style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-position:left top;" width="100%" cellspacing="0" cellpadding="0">
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-right:10px;padding-top:25px;padding-left:35px;"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:24px;color:#666666;">Hello Sam</p></td>
</tr>
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-right:10px;padding-top:25px;padding-left:35px;"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:24px;color:#666666;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p></td>
</tr>
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-right:10px;padding-top:25px;padding-left:35px;"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:24px;color:#666666;">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p></td>
</tr>
<tr style="border-collapse:collapse;">
<td align="center" style="padding:0;Margin:0;">
<table class="es-content-body" width="600" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;">
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-left:15px;padding-top:20px;padding-right:35px;">
<table width="100%" cellspacing="0" cellpadding="5" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td align="center" style="Margin:0;padding-top:10px;padding-bottom:10px;padding-left:20px;padding-right:20px;">
<table style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;width:500px;" class="cke_show_border" cellspacing="1" cellpadding="1" border="0" align="left">
<thead bgcolor="#eeeeee">
<tr style="border-collapse:collapse;">
<td width="40%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:200%;mso-line-height-rule:exactly;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';text-align:center;">Item Type</h4></td>
<td width="40%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:200%;mso-line-height-rule:exactly;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';text-align:center;">Quantity</h4></td>
<td width="20%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:200%;mso-line-height-rule:exactly;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';text-align:center;">Price</h4></td>
</tr>
</thead>
<tr style="border-collapse:collapse;">
<td style="padding:5px 10px 5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="40%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:32px;color:#666666;text-align:center;">Shirt</p></td>
<td style="padding:5px 10px 5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="40%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:32px;color:#666666;text-align:center;">2</p></td>
<td style="padding:5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="20%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:32px;color:#666666;text-align:center;">5000.00</p></td>
</tr>
<tr style="border-collapse:collapse;">
<td style="padding:5px 10px 5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="40%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:32px;color:#666666;text-align:center;">Trousers</p></td>
<td style="padding:5px 10px 5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="40%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:32px;color:#666666;text-align:center;">3</p></td>
<td style="padding:5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="20%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:32px;color:#666666;text-align:center;">7000.00</p></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-top:10px;padding-left:35px;padding-right:35px;">
<table style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;border-top:3px solid #EEEEEE;border-bottom:3px solid #EEEEEE;" width="100%" cellspacing="0" cellpadding="0">
<tr style="border-collapse:collapse;">
<td align="left" style="Margin:0;padding-left:10px;padding-right:10px;padding-top:15px;padding-bottom:15px;">
<table style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;width:500px;" class="cke_show_border" cellspacing="1" cellpadding="1" border="0" align="left">
<tr style="border-collapse:collapse;">
<td width="40%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:120%;mso-line-height-rule:exactly;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';text-align:center;">TOTAL</h4></td>
<td width="40%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:120%;mso-line-height-rule:exactly;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';"><br></h4></td>
<td width="20%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:120%;mso-line-height-rule:exactly;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';">12000.00</h4></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr style="border-collapse:collapse;">
<td class="es-m-txt-c" align="center" bgcolor="transparent" style="Margin:0;padding-left:10px;padding-right:10px;padding-top:40px;padding-bottom:40px;"><span class="es-button-border es-button-border-2" style="border-style:solid;border-color:#FFFFFF;background:#FFFFFF;border-width:2px;display:inline-block;border-radius:11px;width:auto;"><a href="https://viewstripo.email/" class="es-button es-button-1" target="_blank" style="mso-style-priority:100 !important;text-decoration:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';font-size:14px;color:#34B9B8;border-style:solid;border-color:#FFFFFF;border-width:15px 20px 15px 20px;display:flex;background:#FFFFFF;border-radius:7px;font-weight:bold;font-style:normal;line-height:17px;width:auto;text-align:center;border:2px solid #EEEEEE;border-left-width:2px;border-right-width:2px;padding:6px;"><span style="margin-top:6px;">MAKE A REPLY</span></a></span></td>
</tr>
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-right:10px;padding-top:25px;padding-left:35px;"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:24px;color:#666666;">Wamly</p><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:24px;color:#666666;">ABC</p></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>
Web 字体仅适用于少数设备
Apple Mail
iOS Mail
Google Android
Samsung Mail (Android 8.0)
Outlook for Mac
Outlook App
您可以在此处找到可以在 Gmail 中使用和呈现的字体：
https://jsfiddle.net/syfer/1xtp98r5/
我正在为其中一个项目创建一个新的电子邮件模板。我想在我的电子邮件模板中使用 Montserrat 字体。但是，当我收到电子邮件时，内容充满了 Times New Roman 而没有 Montserrat 字体。如何在电子邮件模板中使用 Montserrat 字体？
我还用内联 css 编写了代码。巴士不工作。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="width:100%;font-family:montserrat;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0;">
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:thin,extra-light,light,100,200,300,400,500,600,700,800" rel="stylesheet">
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="telephone=no" name="format-detection">
<title>New email</title>
<!--[if (mso 16)]>
<style type="text/css">
a {text-decoration: none;}
</style>
<![endif]-->
<!--[if gte mso 9]><style>sup { font-size: 100% !important; }</style><![endif]-->
<style type="text/css">
@media only screen and (max-width:600px) {p, ul li, ol li, a { font-size:16px!important; line-height:150%!important } h1 { font-size:20px!important; text-align:center; line-height:120%!important } h2 { font-size:16px!important; text-align:left; line-height:120%!important } h3 { font-size:20px!important; text-align:center; line-height:120%!important } h1 a { font-size:20px!important } h2 a { font-size:16px!important; text-align:left } h3 a { font-size:20px!important } .es-menu td a { font-size:14px!important } .es-header-body p, .es-header-body ul li, .es-header-body ol li, .es-header-body a { font-size:10px!important } .es-footer-body p, .es-footer-body ul li, .es-footer-body ol li, .es-footer-body a { font-size:12px!important } .es-infoblock p, .es-infoblock ul li, .es-infoblock ol li, .es-infoblock a { font-size:12px!important } *[class="gmail-fix"] { display:none!important } .es-m-txt-c, .es-m-txt-c h1, .es-m-txt-c h2, .es-m-txt-c h3 { text-align:center!important } .es-m-txt-r, .es-m-txt-r h1, .es-m-txt-r h2, .es-m-txt-r h3 { text-align:right!important } .es-m-txt-l, .es-m-txt-l h1, .es-m-txt-l h2, .es-m-txt-l h3 { text-align:left!important } .es-m-txt-r img, .es-m-txt-c img, .es-m-txt-l img { display:inline!important } .es-button-border { display:block!important } a.es-button { font-size:14px!important; display:block!important; border-left-width:0px!important; border-right-width:0px!important } .es-btn-fw { border-width:10px 0px!important; text-align:center!important } .es-adaptive table, .es-btn-fw, .es-btn-fw-brdr, .es-left, .es-right { width:100%!important } .es-content table, .es-header table, .es-footer table, .es-content, .es-footer, .es-header { width:100%!important; max-width:600px!important } .es-adapt-td { display:block!important; width:100%!important } .adapt-img { width:100%!important; height:auto!important } .es-m-p0 { padding:0px!important } .es-m-p0r { padding-right:0px!important } .es-m-p0l { padding-left:0px!important } .es-m-p0t { padding-top:0px!important } .es-m-p0b { padding-bottom:0!important } .es-m-p20b { padding-bottom:20px!important } .es-mobile-hidden, .es-hidden { display:none!important } .es-desk-hidden { display:table-row!important; width:auto!important; overflow:visible!important; float:none!important; max-height:inherit!important; line-height:inherit!important } .es-desk-menu-hidden { display:table-cell!important } table.es-table-not-adapt, .esd-block-html table { width:auto!important } table.es-social { display:inline-block!important } table.es-social td { display:inline-block!important } }
#outlook a {
padding:0;
}
.ExternalClass {
width:100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height:100%;
}
.es-button {
mso-style-priority:100!important;
text-decoration:none!important;
}
a[x-apple-data-detectors] {
color:inherit!important;
text-decoration:none!important;
font-size:inherit!important;
font-family:inherit!important;
font-weight:inherit!important;
line-height:inherit!important;
}
.es-desk-hidden {
display:none;
float:left;
overflow:hidden;
width:0;
max-height:0;
line-height:0;
mso-hide:all;
}
.es-button-border:hover a.es-button {
background:#ffffff!important;
border-color:#ffffff!important;
}
.es-button-border:hover {
background:#ffffff!important;
border-style:solid solid solid solid!important;
border-color:#3d5ca3 #3d5ca3 #3d5ca3 #3d5ca3!important;
}
td .es-button-border:hover a.es-button-1 {
background:#ffffff!important;
border-color:#ffffff!important;
}
td .es-button-border-2:hover {
background:#ffffff!important;
border-style:solid solid solid solid!important;
border-color:#e5e5e5 #e5e5e5 #e5e5e5 #e5e5e5!important;
}
</style>
</head>
<body style="width:100%;font-family:montserrat;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0;">
<div class="es-wrapper-color" style="background-color:#FAFAFA;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" color="#fafafa"></v:fill>
</v:background>
<![endif]-->
<table class="es-wrapper" width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;padding:0;Margin:0;width:100%;height:100%;background-repeat:repeat;background-position:center top;">
<tr style="border-collapse:collapse;">
<td valign="top" style="padding:0;Margin:0;">
<table class="es-content" cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;">
<tr style="border-collapse:collapse;">
<td style="padding:0;Margin:0;background-color:#FAFAFA;" bgcolor="#fafafa" align="center">
<table class="es-content-body" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;" width="600" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center">
<tr style="border-collapse:collapse;">
<td style="Margin:0;padding-top:10px;padding-bottom:15px;padding-left:20px;padding-right:20px;border-radius:10px 10px 0px 0px;background-color:#FFFFFF;background-position:left top;" bgcolor="#ffffff" align="left">
<table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td width="560" valign="top" align="center" style="padding:0;Margin:0;">
<table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td align="center" style="padding:0;Margin:0;"><img class="adapt-img" src="https://cdn1.imggmi.com/uploads/2019/10/29/fa07bb493fd5106619500a4f53c013e4-full.png" height="52" width="151" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;" width="151"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr style="border-collapse:collapse;">
<td style="padding:0;Margin:0;padding-left:20px;padding-right:20px;padding-top:40px;background-color:transparent;background-position:left top;" bgcolor="transparent" align="left">
<table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td width="560" valign="top" align="center" style="padding:0;Margin:0;">
<table style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-position:left top;" width="100%" cellspacing="0" cellpadding="0">
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-right:10px;padding-top:25px;padding-left:35px;"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:24px;color:#666666;">Hello Sam</p></td>
</tr>
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-right:10px;padding-top:25px;padding-left:35px;"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:24px;color:#666666;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p></td>
</tr>
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-right:10px;padding-top:25px;padding-left:35px;"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:24px;color:#666666;">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p></td>
</tr>
<tr style="border-collapse:collapse;">
<td align="center" style="padding:0;Margin:0;">
<table class="es-content-body" width="600" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;">
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-left:15px;padding-top:20px;padding-right:35px;">
<table width="100%" cellspacing="0" cellpadding="5" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td align="center" style="Margin:0;padding-top:10px;padding-bottom:10px;padding-left:20px;padding-right:20px;">
<table style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;width:500px;" class="cke_show_border" cellspacing="1" cellpadding="1" border="0" align="left">
<thead bgcolor="#eeeeee">
<tr style="border-collapse:collapse;">
<td width="40%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:200%;mso-line-height-rule:exactly;font-family:montserrat;text-align:center;">Item Type</h4></td>
<td width="40%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:200%;mso-line-height-rule:exactly;font-family:montserrat;text-align:center;">Quantity</h4></td>
<td width="20%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:200%;mso-line-height-rule:exactly;font-family:montserrat;text-align:center;">Price</h4></td>
</tr>
</thead>
<tr style="border-collapse:collapse;">
<td style="padding:5px 10px 5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="40%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:32px;color:#666666;text-align:center;">Shirt</p></td>
<td style="padding:5px 10px 5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="40%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:32px;color:#666666;text-align:center;">2</p></td>
<td style="padding:5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="20%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:32px;color:#666666;text-align:center;">5000.00</p></td>
</tr>
<tr style="border-collapse:collapse;">
<td style="padding:5px 10px 5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="40%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:32px;color:#666666;text-align:center;">Trousers</p></td>
<td style="padding:5px 10px 5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="40%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:32px;color:#666666;text-align:center;">3</p></td>
<td style="padding:5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="20%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:32px;color:#666666;text-align:center;">7000.00</p></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-top:10px;padding-left:35px;padding-right:35px;">
<table style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;border-top:3px solid #EEEEEE;border-bottom:3px solid #EEEEEE;" width="100%" cellspacing="0" cellpadding="0">
<tr style="border-collapse:collapse;">
<td align="left" style="Margin:0;padding-left:10px;padding-right:10px;padding-top:15px;padding-bottom:15px;">
<table style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;width:500px;" class="cke_show_border" cellspacing="1" cellpadding="1" border="0" align="left">
<tr style="border-collapse:collapse;">
<td width="40%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:120%;mso-line-height-rule:exactly;font-family:montserrat;text-align:center;">TOTAL</h4></td>
<td width="40%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:120%;mso-line-height-rule:exactly;font-family:montserrat;"><br></h4></td>
<td width="20%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:120%;mso-line-height-rule:exactly;font-family:montserrat;">12000.00</h4></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr style="border-collapse:collapse;">
<td class="es-m-txt-c" align="center" bgcolor="transparent" style="Margin:0;padding-left:10px;padding-right:10px;padding-top:40px;padding-bottom:40px;"><span class="es-button-border es-button-border-2" style="border-style:solid;border-color:#FFFFFF;background:#FFFFFF;border-width:2px;display:inline-block;border-radius:11px;width:auto;"><a href="https://viewstripo.email/" class="es-button es-button-1" target="_blank" style="mso-style-priority:100 !important;text-decoration:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:Montserrat;font-size:14px;color:#34B9B8;border-style:solid;border-color:#FFFFFF;border-width:15px 20px 15px 20px;display:flex;background:#FFFFFF;border-radius:7px;font-weight:bold;font-style:normal;line-height:17px;width:auto;text-align:center;border:2px solid #EEEEEE;border-left-width:2px;border-right-width:2px;padding:6px;"><span style="margin-top:6px;">MAKE A REPLY</span></a></span></td>
</tr>
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-right:10px;padding-top:25px;padding-left:35px;"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:24px;color:#666666;">Wamly</p><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family:Montserrat;line-height:24px;color:#666666;">ABC</p></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>
您的 HTML.
中缺少 两个 东西1.您没有后备字体。
需要回退字体，因此如果找不到字体，将检查字体系列中的下一个字体是否显示。
示例：
font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
您的代码只有：
font-family: 'Montserrat'
浏览器只查找 Montserrat，如果找不到，则默认为 Times New Roman。我已经用后备字体（如下）修复了你的HTML，但请检查这些是否是你想要的后备字体。
2。您需要专门为 Outlook 定义字体。
您还需要在文档的头部添加以下代码，这样如果 Outlook 无法找到 Web 字体，它将显示一个字体系列供您的浏览器选择。
<!--[if (mso 9)]>
<style type="text/css">
table td{font-family: 'Helvetica Neue', Helvetica, Arial, 'sans-serif' !important;}
</style>
<![endif]-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="width:100%;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0;">
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:thin,extra-light,light,100,200,300,400,500,600,700,800" rel="stylesheet">
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="telephone=no" name="format-detection">
<title>New email</title>
<!--[if (mso 9)]>
<style type="text/css">
a {text-decoration: none;}
table td{font-family: 'Helvetica Neue', Helvetica, Arial, 'sans-serif' !important;}
</style>
<![endif]-->
<!--[if gte mso 9]><style>sup { font-size: 100% !important; }</style><![endif]-->
<style type="text/css">
@media only screen and (max-width:600px) {p, ul li, ol li, a { font-size:16px!important; line-height:150%!important } h1 { font-size:20px!important; text-align:center; line-height:120%!important } h2 { font-size:16px!important; text-align:left; line-height:120%!important } h3 { font-size:20px!important; text-align:center; line-height:120%!important } h1 a { font-size:20px!important } h2 a { font-size:16px!important; text-align:left } h3 a { font-size:20px!important } .es-menu td a { font-size:14px!important } .es-header-body p, .es-header-body ul li, .es-header-body ol li, .es-header-body a { font-size:10px!important } .es-footer-body p, .es-footer-body ul li, .es-footer-body ol li, .es-footer-body a { font-size:12px!important } .es-infoblock p, .es-infoblock ul li, .es-infoblock ol li, .es-infoblock a { font-size:12px!important } *[class="gmail-fix"] { display:none!important } .es-m-txt-c, .es-m-txt-c h1, .es-m-txt-c h2, .es-m-txt-c h3 { text-align:center!important } .es-m-txt-r, .es-m-txt-r h1, .es-m-txt-r h2, .es-m-txt-r h3 { text-align:right!important } .es-m-txt-l, .es-m-txt-l h1, .es-m-txt-l h2, .es-m-txt-l h3 { text-align:left!important } .es-m-txt-r img, .es-m-txt-c img, .es-m-txt-l img { display:inline!important } .es-button-border { display:block!important } a.es-button { font-size:14px!important; display:block!important; border-left-width:0px!important; border-right-width:0px!important } .es-btn-fw { border-width:10px 0px!important; text-align:center!important } .es-adaptive table, .es-btn-fw, .es-btn-fw-brdr, .es-left, .es-right { width:100%!important } .es-content table, .es-header table, .es-footer table, .es-content, .es-footer, .es-header { width:100%!important; max-width:600px!important } .es-adapt-td { display:block!important; width:100%!important } .adapt-img { width:100%!important; height:auto!important } .es-m-p0 { padding:0px!important } .es-m-p0r { padding-right:0px!important } .es-m-p0l { padding-left:0px!important } .es-m-p0t { padding-top:0px!important } .es-m-p0b { padding-bottom:0!important } .es-m-p20b { padding-bottom:20px!important } .es-mobile-hidden, .es-hidden { display:none!important } .es-desk-hidden { display:table-row!important; width:auto!important; overflow:visible!important; float:none!important; max-height:inherit!important; line-height:inherit!important } .es-desk-menu-hidden { display:table-cell!important } table.es-table-not-adapt, .esd-block-html table { width:auto!important } table.es-social { display:inline-block!important } table.es-social td { display:inline-block!important } }
#outlook a {
padding:0;
}
.ExternalClass {
width:100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height:100%;
}
.es-button {
mso-style-priority:100!important;
text-decoration:none!important;
}
a[x-apple-data-detectors] {
color:inherit!important;
text-decoration:none!important;
font-size:inherit!important;
font-family:inherit!important;
font-weight:inherit!important;
line-height:inherit!important;
}
.es-desk-hidden {
display:none;
float:left;
overflow:hidden;
width:0;
max-height:0;
line-height:0;
mso-hide:all;
}
.es-button-border:hover a.es-button {
background:#ffffff!important;
border-color:#ffffff!important;
}
.es-button-border:hover {
background:#ffffff!important;
border-style:solid solid solid solid!important;
border-color:#3d5ca3 #3d5ca3 #3d5ca3 #3d5ca3!important;
}
td .es-button-border:hover a.es-button-1 {
background:#ffffff!important;
border-color:#ffffff!important;
}
td .es-button-border-2:hover {
background:#ffffff!important;
border-style:solid solid solid solid!important;
border-color:#e5e5e5 #e5e5e5 #e5e5e5 #e5e5e5!important;
}
</style>
</head>
<body style="width:100%;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0;">
<div class="es-wrapper-color" style="background-color:#FAFAFA;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" color="#fafafa"></v:fill>
</v:background>
<![endif]-->
<table class="es-wrapper" width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;padding:0;Margin:0;width:100%;height:100%;background-repeat:repeat;background-position:center top;">
<tr style="border-collapse:collapse;">
<td valign="top" style="padding:0;Margin:0;">
<table class="es-content" cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;">
<tr style="border-collapse:collapse;">
<td style="padding:0;Margin:0;background-color:#FAFAFA;" bgcolor="#fafafa" align="center">
<table class="es-content-body" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;" width="600" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center">
<tr style="border-collapse:collapse;">
<td style="Margin:0;padding-top:10px;padding-bottom:15px;padding-left:20px;padding-right:20px;border-radius:10px 10px 0px 0px;background-color:#FFFFFF;background-position:left top;" bgcolor="#ffffff" align="left">
<table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td width="560" valign="top" align="center" style="padding:0;Margin:0;">
<table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td align="center" style="padding:0;Margin:0;"><img class="adapt-img" src="https://cdn1.imggmi.com/uploads/2019/10/29/fa07bb493fd5106619500a4f53c013e4-full.png" height="52" width="151" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;" /></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr style="border-collapse:collapse;">
<td style="padding:0;Margin:0;padding-left:20px;padding-right:20px;padding-top:40px;background-color:transparent;background-position:left top;" bgcolor="transparent" align="left">
<table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td width="560" valign="top" align="center" style="padding:0;Margin:0;">
<table style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-position:left top;" width="100%" cellspacing="0" cellpadding="0">
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-right:10px;padding-top:25px;padding-left:35px;"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:24px;color:#666666;">Hello Sam</p></td>
</tr>
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-right:10px;padding-top:25px;padding-left:35px;"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:24px;color:#666666;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p></td>
</tr>
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-right:10px;padding-top:25px;padding-left:35px;"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:24px;color:#666666;">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p></td>
</tr>
<tr style="border-collapse:collapse;">
<td align="center" style="padding:0;Margin:0;">
<table class="es-content-body" width="600" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;">
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-left:15px;padding-top:20px;padding-right:35px;">
<table width="100%" cellspacing="0" cellpadding="5" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td align="center" style="Margin:0;padding-top:10px;padding-bottom:10px;padding-left:20px;padding-right:20px;">
<table style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;width:500px;" class="cke_show_border" cellspacing="1" cellpadding="1" border="0" align="left">
<thead bgcolor="#eeeeee">
<tr style="border-collapse:collapse;">
<td width="40%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:200%;mso-line-height-rule:exactly;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';text-align:center;">Item Type</h4></td>
<td width="40%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:200%;mso-line-height-rule:exactly;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';text-align:center;">Quantity</h4></td>
<td width="20%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:200%;mso-line-height-rule:exactly;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';text-align:center;">Price</h4></td>
</tr>
</thead>
<tr style="border-collapse:collapse;">
<td style="padding:5px 10px 5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="40%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:32px;color:#666666;text-align:center;">Shirt</p></td>
<td style="padding:5px 10px 5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="40%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:32px;color:#666666;text-align:center;">2</p></td>
<td style="padding:5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="20%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:32px;color:#666666;text-align:center;">5000.00</p></td>
</tr>
<tr style="border-collapse:collapse;">
<td style="padding:5px 10px 5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="40%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:32px;color:#666666;text-align:center;">Trousers</p></td>
<td style="padding:5px 10px 5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="40%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:32px;color:#666666;text-align:center;">3</p></td>
<td style="padding:5px 0;Margin:0;border-bottom:2px solid #EEEEEE;" width="20%" align="left"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:32px;color:#666666;text-align:center;">7000.00</p></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-top:10px;padding-left:35px;padding-right:35px;">
<table style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;border-top:3px solid #EEEEEE;border-bottom:3px solid #EEEEEE;" width="100%" cellspacing="0" cellpadding="0">
<tr style="border-collapse:collapse;">
<td align="left" style="Margin:0;padding-left:10px;padding-right:10px;padding-top:15px;padding-bottom:15px;">
<table style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;width:500px;" class="cke_show_border" cellspacing="1" cellpadding="1" border="0" align="left">
<tr style="border-collapse:collapse;">
<td width="40%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:120%;mso-line-height-rule:exactly;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';text-align:center;">TOTAL</h4></td>
<td width="40%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:120%;mso-line-height-rule:exactly;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';"><br></h4></td>
<td width="20%" style="padding:0;Margin:0;"><h4 style="Margin:0;line-height:120%;mso-line-height-rule:exactly;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';">12000.00</h4></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr style="border-collapse:collapse;">
<td class="es-m-txt-c" align="center" bgcolor="transparent" style="Margin:0;padding-left:10px;padding-right:10px;padding-top:40px;padding-bottom:40px;"><span class="es-button-border es-button-border-2" style="border-style:solid;border-color:#FFFFFF;background:#FFFFFF;border-width:2px;display:inline-block;border-radius:11px;width:auto;"><a href="https://viewstripo.email/" class="es-button es-button-1" target="_blank" style="mso-style-priority:100 !important;text-decoration:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';font-size:14px;color:#34B9B8;border-style:solid;border-color:#FFFFFF;border-width:15px 20px 15px 20px;display:flex;background:#FFFFFF;border-radius:7px;font-weight:bold;font-style:normal;line-height:17px;width:auto;text-align:center;border:2px solid #EEEEEE;border-left-width:2px;border-right-width:2px;padding:6px;"><span style="margin-top:6px;">MAKE A REPLY</span></a></span></td>
</tr>
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-right:10px;padding-top:25px;padding-left:35px;"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:24px;color:#666666;">Wamly</p><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:16px;font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';line-height:24px;color:#666666;">ABC</p></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>
Web 字体仅适用于少数设备
Apple Mail
iOS Mail
Google Android
Samsung Mail (Android 8.0)
Outlook for Mac
Outlook App
您可以在此处找到可以在 Gmail 中使用和呈现的字体： https://jsfiddle.net/syfer/1xtp98r5/