参考字体和移动响应 HTML 电子邮件

问题描述 投票：0回答：1

即使设备没有下载，我也需要打开 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;font-family:"Open Sans"; font-size:14px} /* Black */
.button2 {background-color: #008CBA;} /* Blue */
</style>
      <div class="tutorial1">
         <div class="tutorial">Review &amp; 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>
html css mobile html-email
1个回答
0
投票

您有 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;
，以便电子邮件程序默认使用正确的字体类型。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.