Мой вопрос состоит из двух частей.Я пытаюсь создать шаблон электронной почты и хочу добавить google fonts и хочет добавить flex свойства
1 . Я добавляю Шрифт
он отлично работает в codeBeautify Но когда я отправляю электронное письмо и проверяю шрифт, его там нет, я думаю, по умолчанию он показывает serif roboto helvetica.
2 .Я использую свойства flex как flex-direction : column и flex : 1.Они не применяются, и я не вижу их в окне проверки элементов.
Вот мой код.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
</head>
<body>
<table style="width: 100%;">
<tbody>
<tr>
<td align="center" valign="top" id="parentTd" style="height:100%;margin:0;padding:0;width:100%">
<table style="border-collapse: collapse;
height: 100%;
margin: 0;
padding: 0;
width: 100%;">
<tbody>
<tr>
<td align="center" valign="top" id="templateBody"
style="background:#0382ff none no-repeat center/cover;background-color:#0382ff;background-image:none;background-repeat:no-repeat;background-position:center;background-size:cover;border-top:0;border-bottom:0;padding-top:0px;padding-bottom:0px">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"
class="templateContainer" style="border-collapse:collapse;">
<tbody>
<tr>
<td valign="top"
style="background:transparent none no-repeat center/cover;background-color:transparent;background-image:none;background-repeat:no-repeat;background-position:center;background-size:cover;border-top:0;border-bottom:0;padding-top:0;padding-bottom:0">
<!-- Header partial -->
<% include ../../partials/header %>
<table border="0" cellpadding="0" cellspacing="0" width="100%"
style="min-width:100%;border-collapse:collapse">
<tbody>
<tr>
<td valign="top">
<!-- Content -->
<table align="left" border="0" cellpadding="0"
cellspacing="0" width="100%"
style="min-width:100%;border-collapse:collapse">
<tbody>
<tr>
<!-- Left side containers -->
<td
style="padding-right:18px;width:30%;height: 1px;">
<% include ../../partials/containers %>
</td>
<!-- MAIN content -->
<td style="">
<table align="center" border="0"
cellspacing="0" width="100%"
style="background-color:#ffffff;border-collapse:collapse;max-width:768px;">
<tbody>
<!-- First section -->
<tr>
<td
style="background-color: #fbfcff;padding: 20px 0px 10px 0px;height:228px; box-sizing: border-box;">
<table
align="center"
border="0"
cellspacing="0"
width="100%">
<tbody>
<!-- You have been selected tr -->
<tr>
<td valign="top"
style="color:#0382FF;font-size:30px;font-weight:bold;text-align:center;word-break:break-word;line-height:150%">
<span
style="font-size:1.4rem">
<font
face="Quicksand">
<strong
style="line-height: 25px;">You've
been
selected!</strong>
</font>
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<!-- Right side containers -->
<td
style="padding-right:18px;width:30%;height: 1px">
<% include ../../partials/containers %>
</td>
</tr>
</tbody>
</table>
<!-- Footer partial -->
<% include ../../partials/footer %>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>