提问人：swerg 提问时间：10/26/2023 最后编辑：Minal Chauhanswerg 更新时间：10/26/2023 访问量：26
Refrencing font and mobile responsivness HTML 电子邮件
Refrencing font and mobile responsivness HTML EMAIL
问：
即使设备没有下载，我也需要打开 sans 才能加载。我还需要我的电子邮件具有移动响应能力，并且在手机或Gmail中加载时，它看起来都是错误的。但是，如果我在计算机上的电子邮件应用程序中打开它，它看起来很棒。我在下面的代码中更改什么才能使其工作，这让我发疯！
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<style>
.tutorial4 {
align: left;
width: 600px;
padding-left: 11px;
font-family: "Open Sans";
font-size: 16px;
font-weight: regular;
}
.tutorial {
display: inline-block;
align: left;
width: 350px;
padding: 60px 11px 10px;
font-family: "Open Sans";
font-size: 25px;
font-weight: bolder;
}
.tutorial1 {
text-align: left;
}
.tutorial3 {
align: left;
width: 550px;
padding: 40px 20px 40px;
background-color: #DAE1F7;
font-family: "Open Sans";
font-size: 16px;
border-radius: 30px;
}
.button {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 30px;
}
.button1 {
background-color: #000000; /* Black */
font-family:"Open Sans";
font-size:14px
}
.button2 {
background-color: #008CBA; /* Blue */
}
</style>
<div class="tutorial1">
<div class="tutorial">Review & Sign</div>
<div class="tutorial"><img src="https://images.squarespace-cdn.com/content/v1/644f1595e1464456b3e1895a/6518db34-b32c-4381-aab0-041a151e9f43/keyzii_logo_white+2.png?format=1500w" alt="keyzii logo" style="width:120px" ></div>
</div>
<div class="tutorial3">"A very long long long long name" has sent a document for you to review and sign.
<br><br>
<button class="button button1">Open Document</button>
</div>
<br>
<br>
<div class= "tutorial4">
<a style="font-family:'Open Sans'; font-weight: bolder">Document Title</a>
<br>
<a style="font-family:'Open Sans'; font-weight: regular"><b>Signers:</b> email address, email address, email address</a>
<br><br>
<a style="font-family:'Open Sans'; font-weight: regular;">Please click on the button above to open, review and sign the document.
<br>Make sure you have read and understood keyzii sign details below.</a>
<br><br>
<button class="button button1">Call Now</button>
</div>
<br>
<br>
<hr style="width:37%;text-align:left;margin-left:0; color:#A4A4A4">
<br><br>
<div class= "tutorial4">
<a style="font-family:'Open Sans';font-size: 25px; font-weight: bolder">keyzii sign</a>
<br>
<br>
<a style="font-family:'Open Sans'; font-weight: regular">About keyzii sign and how it works
<br>If you need to xyz<br>Do not share info</a>
</div>
</body>
</html>答：
-1赞
Nathan
10/26/2023
#1
您拥有 600 像素的元素，并且正在仅大约 350 像素的设备上查看它！因此，您需要为这些元素添加类似的东西。max-width:100%
其次，某些电子邮件客户端（包括某些类型的 Gmail 帐户（例如 Gmail IMAP/POP）不允许阻止。因此，与其在那里使用样式，不如将它们内联。<style>
对于字体，请转到 Google Fonts 并使用那里的代码。但请注意此处电子邮件的网络字体的可用性：https://www.caniemail.com/features/css-at-font-face/。但是，Google 已经安装了 Roboto 和 Open Sans。因此，您的字体堆栈需要使电子邮件程序默认使用正确的字体类型。"Open Sans", sans-serif;
评论