我有一个html的密码重置邮箱模板，我正在try 设置，而不是默认的django邮箱.代码如下:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap"
rel="stylesheet"
/>
<style>
body {
font-family: "Inter", sans-serif;
font-size: 20px;
color: #434343;
margin: 0;
}
.main-container {
max-width: 60%;
}
.centered-contents {
display: flex;
justify-content: center;
}
.pswd-button {
background: #677db6;
border-radius: 25px;
color: #ffffff;
cursor: pointer;
text-decoration: none;
padding: 15px;
padding-top: 10px;
padding-bottom: 10px;
}
.top-bar {
width: 100%;
background-color: #d9d9d9;
display: flex;
align-items: center;
}
.top-bar-title {
color: #677db6;
margin: 20px;
}
</style>
</head>
<body>
<div class="top-bar">
<p class="top-bar-title">Nombre de Web</p>
</div>
<div class="centered-contents">
<div class="main-container">
<p style="font-size: 24px">
Hola <span style="color: #677db6">nombre</name></span>!
</p>
<p>
Está recibiendo este correo porque ha solicitado un cambio de
contraseña en
<span style="color: #677db6">web</span>. Para
continuar, por favor utilice el botón que se muestra a continuación:
</p>
<div class="centered-contents">
<a class="pswd-button" href="#"> Restablecer Contraseña </a>
</div>
<p>
Le recordamos su nombre de usuario:
<span style="color: #677db6">usuario</span>
</p>
<p>
Si no ha solicitado ningún cambio de contraseña, no se preocupe. Puede
ignorar este correo.
</p>
<p>Atentamente,</p>
<p>El equipo técnico de <span style="color: #677db6">Web</span></p>
</div>
</div>
</body>
</html>
并且，在我的浏览器(chrome)中渲染，它看起来如下所示:
我正在try 使用django中的模板，在templates文件夹中创建一个password_reset_email.html，并将其传递给django.contrib.auth.PasswordResetView.然而，我收到的邮箱(显示在gmail中)如下所示:
我做错了什么？我try 了以下方法来解决此问题:
- 删除所有
css，并将所有样式inside放入组件.
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap"
rel="stylesheet"
/>
</head>
<body style="
font-family: 'Inter', sans-serif;
font-size: 20px;
color: #434343;
margin: 0;
">
<div style="
width: 100%;
background-color: #d9d9d9;
display: flex;
align-items: center;
">
<p style="
color: #677db6;
margin: 20px;
">
Nombre de Web</p>
</div>
<div style="
display: flex;
justify-content: center;
">
<div style="max-width: 60%;">
<p style="font-size: 24px">
Hola <span style="color: #677db6">nombre</name></span>!
</p>
<p>
Está recibiendo este correo porque ha solicitado un cambio de
contraseña en
<span style="color: #677db6">web</span>. Para
continuar, por favor utilice el botón que se muestra a continuación:
</p>
<div style="
display: flex;
justify-content: center;
">
<a style="
background: #677db6;
border-radius: 25px;
color: #ffffff;
cursor: pointer;
text-decoration: none;
padding: 15px;
padding-top: 10px;
padding-bottom: 10px;
"
href="#"> Restablecer Contraseña </a>
</div>
<p>
Le recordamos su nombre de usuario:
<span style="color: #677db6">usuario</span>
</p>
<p>
Si no ha solicitado ningún cambio de contraseña, no se preocupe. Puede
ignorar este correo.
</p>
<p>Atentamente,</p>
<p>El equipo técnico de <span style="color: #677db6">Web</span></p>
</div>
</div>
</body>
</html>
这将修复除字体和对齐方式以外的所有内容
- 为对齐添加表 struct :
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap" rel="stylesheet" />
</head>
<body style="
font-family: 'Inter', sans-serif;
font-size: 20px;
color: #434343;
margin: 0;
">
<div style="
width: 100%;
background-color: #d9d9d9;
display: flex;
align-items: center;
">
<p style="
color: #677db6;
margin: 20px;
">Nombre de Web</p>
</div>
<table cellspacing=”0” cellpadding=”0” width="100%">
<tr>
<td width="25%"></td>
<td>
<table cellspacing=”0” cellpadding=”0” width="100%">
<tr>
<td>
<p style="font-size: 24px">
Hola <span style="color: #677db6">nombre</name></span>!
</p>
<p>
Está recibiendo este correo porque ha solicitado un cambio de contraseña en
<span style="color: #677db6">web</span>. Para continuar, por favor utilice el botón que se muestra a continuación:
</p>
</td>
</tr>
<tr>
<td align="center" style="padding: 15px;">
<a style="
background: #677db6;
border-radius: 25px;
color: #ffffff;
cursor: pointer;
text-decoration: none;
padding: 15px;
padding-top: 10px;
padding-bottom: 10px;
" href="#">Restablecer Contraseña</a>
</td>
</tr>
<tr>
<td>
<p>
Le recordamos su nombre de usuario:
<span style="color: #677db6">usuario</span>
</p>
<p>
Si no ha solicitado ningún cambio de contraseña, no se preocupe. Puede ignorar este correo.
</p>
<p>Atentamente,</p>
<p>El equipo técnico de <span style="color: #677db6">Web</span></p>
</td>
</tr>
</table>
</td>
<td width="25%"></td>
</tr>
</table>
</body>
</html>
这只会使字体仍然无法工作:
所以，我的问题是:如何使字体(Inter，font-weight 300)也正确显示？