HTML 模板中的字体在 GMAIL 中发生了变化
Font in HTML template changes in GMAIL
我制作了 html 模板，我注意到当我在 MS Outlook 中打开它时，字体与代码中的一样：'Poppins'。但是当我在 gmail 中打开它时，它会自动更改为 Times New Roman。我发现它是 gmail 默认行为的信息，我应该通过添加 table 应该有 font-family : 'Poppins' 来确保它不会改变（根据文章）。但不幸的是它不起作用。我还将所有选择器都放置到这个字体系列道具中，但它也没有用。您知道如何解决吗？
<!DOCTYPE html>
<html
lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:o="urn:schemas-microsoft-com:office:office"
>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="x-apple-disable-message-reformatting" />
<title>Reset password email</title>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<style>
table {
font-family: 'Poppins';
}
tr,
td {
border: 0px;
}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
rel="stylesheet"
/>
</head>
<body
style="
background: #ffffff;
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
font-family: 'Poppins';
"
>
<table
align="left"
cellpadding="0"
cellspacing="0"
style="
border: 0;
background: #ffffff;
width: 450px !important;
height: 436px;
font-family: 'Poppins';
"
>
<tbody>
<tr>
<td
style="
padding: 64px 0 0 53px;
font-weight: 500;
font-size: 12px !important;
line-height: 18px;
height: 18px;
width: 123px;
font-family: 'Poppins';
"
>
Zapomniałeś hasła ?
</td>
</tr>
<tr>
<td
style="
padding: 14px 0 0 53px;
font-weight: 400;
font-size: 12px !important;
line-height: 18px;
height: 18px;
width: 313px;
"
>
Aby zresetować hasło, proszę kliknąć w poniższy link:
</td>
</tr>
<tr>
<td
style="
border-radius: 3px;
background-color: #ffffff;
display: table-cell;
text-align: left;
vertical-align: middle;
"
>
<a
href="#"
style="
text-decoration: none;
font-weight: 500;
font-size: 12px;
color: #ffffff;
line-height: 30px;
background-color: #232835;
margin-left: 51px;
margin-top: 7px;
padding: 6px 36px 6px 36px;
border-radius: 3px;
letter-spacing: -2%;
"
>RESETUJ HASŁO</a
>
</td>
</tr>
<tr>
<td
style="
padding: 13px 0 0 53px;
font-weight: 400;
font-size: 12px !important;
line-height: 18px;
height: 18px;
width: 316px;
"
>
W razie problemów skontaktuj się z administratorem
</td>
</tr>
<tr>
<td
style="
padding: 9px 0 0 53px;
font-weight: 500;
font-size: 12px !important;
line-height: 18px;
height: 18px;
width: 140px;
"
>
Imię Nazwisko
</td>
</tr>
<tr>
<td
style="
padding: 0 0 0 53px;
font-weight: 500;
font-size: 12px !important;
line-height: 18px;
width: 140px;
"
>
500 500 500
</td>
</tr>
<tr>
<td
style="
padding: 0 0 0 53px;
font-weight: 500;
font-size: 12px !important;
line-height: 18px;
width: 140px;
"
>
<a style="text-decoration: none">admin@nevomo.com</a>
</td>
</tr>
<tr>
<td
style="
padding: 17px 0 0 53px;
font-weight: 400;
font-size: 12px !important;
line-height: 18px;
height: 18px;
width: 84px;
"
>
Pozdrawiamy,
</td>
</tr>
<tr>
<td>
<img
src="https://i.ibb.co/YhtGLnf/nevomo-logo-orange.png"
alt="nevomo-logo-orange"
border="0"
style="
width: 112.17px;
height: 15.74px;
padding: 12.13px 0 0 56.41px;
color: #eb5d1c;
"
alt="logo"
/>
</td>
</tr>
<tr>
<td
style="
padding: 7.6px 0 0px 53px;
font-weight: 400;
font-size: 11px !important;
line-height: 16.5px;
width: 206px;
"
>
ul.Mińska 63A lok.245
</td>
</tr>
<tr>
<td
style="
padding: 0 0 0px 53px;
font-weight: 400;
font-size: 11px !important;
line-height: 16.5px;
width: 206px;
"
>
03-828 Warszawa
</td>
</tr>
<tr>
<td
style="
padding: 0 0 64px 53px;
font-weight: 400;
font-size: 11px !important;
line-height: 16.5px;
width: 206px;
"
>
www | facebook | instagram | linkedin
</td>
</tr>
</tbody>
</table>
</body>
</html>
尝试使用标签 @font-face { font-family: "Poppins "; src: url("../fonts/Poppins-Regular.ttf"), url("../fonts/Poppins-Bold.ttf"), url("../fonts/Poppins-Italic.ttf"); } 在 css 中设置您的字体，但将 url 替换为服务 Poppins 字体的 cdn，或者如果您想要自行托管，则保留这种方式你的字体。请记住，如果您有不同的文件类型，如 woff、woff2 或 otf，那么您必须使用上述模式覆盖所有文件，并为每个文件声明一个 @font-face。
我制作了 html 模板，我注意到当我在 MS Outlook 中打开它时，字体与代码中的一样：'Poppins'。但是当我在 gmail 中打开它时，它会自动更改为 Times New Roman。我发现它是 gmail 默认行为的信息，我应该通过添加 table 应该有 font-family : 'Poppins' 来确保它不会改变（根据文章）。但不幸的是它不起作用。我还将所有选择器都放置到这个字体系列道具中，但它也没有用。您知道如何解决吗？
<!DOCTYPE html>
<html
lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:o="urn:schemas-microsoft-com:office:office"
>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="x-apple-disable-message-reformatting" />
<title>Reset password email</title>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<style>
table {
font-family: 'Poppins';
}
tr,
td {
border: 0px;
}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
rel="stylesheet"
/>
</head>
<body
style="
background: #ffffff;
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
font-family: 'Poppins';
"
>
<table
align="left"
cellpadding="0"
cellspacing="0"
style="
border: 0;
background: #ffffff;
width: 450px !important;
height: 436px;
font-family: 'Poppins';
"
>
<tbody>
<tr>
<td
style="
padding: 64px 0 0 53px;
font-weight: 500;
font-size: 12px !important;
line-height: 18px;
height: 18px;
width: 123px;
font-family: 'Poppins';
"
>
Zapomniałeś hasła ?
</td>
</tr>
<tr>
<td
style="
padding: 14px 0 0 53px;
font-weight: 400;
font-size: 12px !important;
line-height: 18px;
height: 18px;
width: 313px;
"
>
Aby zresetować hasło, proszę kliknąć w poniższy link:
</td>
</tr>
<tr>
<td
style="
border-radius: 3px;
background-color: #ffffff;
display: table-cell;
text-align: left;
vertical-align: middle;
"
>
<a
href="#"
style="
text-decoration: none;
font-weight: 500;
font-size: 12px;
color: #ffffff;
line-height: 30px;
background-color: #232835;
margin-left: 51px;
margin-top: 7px;
padding: 6px 36px 6px 36px;
border-radius: 3px;
letter-spacing: -2%;
"
>RESETUJ HASŁO</a
>
</td>
</tr>
<tr>
<td
style="
padding: 13px 0 0 53px;
font-weight: 400;
font-size: 12px !important;
line-height: 18px;
height: 18px;
width: 316px;
"
>
W razie problemów skontaktuj się z administratorem
</td>
</tr>
<tr>
<td
style="
padding: 9px 0 0 53px;
font-weight: 500;
font-size: 12px !important;
line-height: 18px;
height: 18px;
width: 140px;
"
>
Imię Nazwisko
</td>
</tr>
<tr>
<td
style="
padding: 0 0 0 53px;
font-weight: 500;
font-size: 12px !important;
line-height: 18px;
width: 140px;
"
>
500 500 500
</td>
</tr>
<tr>
<td
style="
padding: 0 0 0 53px;
font-weight: 500;
font-size: 12px !important;
line-height: 18px;
width: 140px;
"
>
<a style="text-decoration: none">admin@nevomo.com</a>
</td>
</tr>
<tr>
<td
style="
padding: 17px 0 0 53px;
font-weight: 400;
font-size: 12px !important;
line-height: 18px;
height: 18px;
width: 84px;
"
>
Pozdrawiamy,
</td>
</tr>
<tr>
<td>
<img
src="https://i.ibb.co/YhtGLnf/nevomo-logo-orange.png"
alt="nevomo-logo-orange"
border="0"
style="
width: 112.17px;
height: 15.74px;
padding: 12.13px 0 0 56.41px;
color: #eb5d1c;
"
alt="logo"
/>
</td>
</tr>
<tr>
<td
style="
padding: 7.6px 0 0px 53px;
font-weight: 400;
font-size: 11px !important;
line-height: 16.5px;
width: 206px;
"
>
ul.Mińska 63A lok.245
</td>
</tr>
<tr>
<td
style="
padding: 0 0 0px 53px;
font-weight: 400;
font-size: 11px !important;
line-height: 16.5px;
width: 206px;
"
>
03-828 Warszawa
</td>
</tr>
<tr>
<td
style="
padding: 0 0 64px 53px;
font-weight: 400;
font-size: 11px !important;
line-height: 16.5px;
width: 206px;
"
>
www | facebook | instagram | linkedin
</td>
</tr>
</tbody>
</table>
</body>
</html>
尝试使用标签 @font-face { font-family: "Poppins "; src: url("../fonts/Poppins-Regular.ttf"), url("../fonts/Poppins-Bold.ttf"), url("../fonts/Poppins-Italic.ttf"); } 在 css 中设置您的字体，但将 url 替换为服务 Poppins 字体的 cdn，或者如果您想要自行托管，则保留这种方式你的字体。请记住，如果您有不同的文件类型，如 woff、woff2 或 otf，那么您必须使用上述模式覆盖所有文件，并为每个文件声明一个 @font-face。