Outlook 이메일 템플릿 1

Outlook 용 템플릿 이메일을 만들려고하는데 문제가 있습니다.Outlook 이메일 템플릿 1

전자 메일을 만드는 데 사용하는 테이블에는 그림과 같이 + 글꼴이 인식되지 않기 때문에 1px의 여백/패딩이 있습니다.

나는 패딩 시도 : 0, 여백 : -1, 테이블 레이아웃 : 고정하고 다른 생각한다. 여기

내 코드입니다 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html> 
 
    
 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    <title>Single-Column Responsive Email Template</title> 
 
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
 
    <style> 
 
    @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800); 
 

 
\t table{ 
 
    \t border-spacing: 0; 
 
    \t border: none; 
 
    } 
 
\t td{ 
 
\t margin: 0px; 
 
\t  
 
\t  border: none; 
 
\t 
 
\t } 
 
\t tr{ 
 
\t \t margin: 0px; 
 
\t \t border: none; 
 
\t 
 
\t } 
 
\t img{ 
 
\t \t display:block; 
 
\t } 
 
\t p{ 
 
\t \t font-family: 'Open Sans', sans-serif; 
 
\t \t font-size: 14px; 
 
\t \t color: #1f2327; 
 
\t } 
 
    </style> 
 
</head> 
 
    
 
<body> 
 
    
 
<table border="0" style="height: 790px; width: 610px; border-collapse: collapse; " cellpadding="0" cellspacing="0" > 
 
\t \t <tr> 
 
\t \t \t <td width="90" style="text-align: right; width: 90px; height: 781px; padding:0; "> 
 
\t \t \t \t <img src="https://i.imgur.com/MLPTttG.png"> 
 
\t \t \t </td> 
 
\t \t \t <td> 
 
\t \t \t \t <table width="527" border="0" cellpadding="0" cellspacing="0"> 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t \t <td width="527" style=" width: 527px; height: 19px;"> 
 
\t \t \t \t \t \t <img src="https://i.imgur.com/wGaQ4Vf.png" style="width: 100%;"> 
 
\t \t \t \t \t \t </td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t \t <td style="height: 738px; margin: 20px;"> 
 
\t \t \t \t \t \t \t a 
 
\t \t \t \t \t \t </td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t \t <td style="width: 527px; height: 24px; background-color: #007034;"> 
 
\t \t \t \t \t \t \t <img src="https://i.imgur.com/vrb1QrE.png"> 
 
\t \t \t \t \t \t </td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t </table> 
 
\t \t \t </td> 
 
\t \t \t <td style="width: 37px; height: 781px;"> 
 
\t \t \t \t <img src="https://i.imgur.com/nVuB7Wk.png"> 
 
\t \t \t </td> 
 
\t \t </tr> 
 
</table> 
 
</body> 
 
</html>

출처

2017-11-02 T. Stefan

원하는 결과는 정확히 무엇입니까? – Maharkus

@maharkus https://imgur.com/kQIrH2T –

https://www.campaignmonitor.com/css/text-fonts/woff2/ 사용자 정의 글꼴은 전자 메일에서 널리 지원되지 않습니다. 사람들은 주로 사용자 정의 글꼴을 사용하여 이미지를 사용합니다. 픽셀 간격에 대해서는 실제로 알지 못하지만 전자 메일 클라이언트에서 무서운 CSS 지원과 관련이있을 수도 있습니다. – Maharkus

첫째; 이들은 아주 기본적인, 그리고 그들이 table 및 td 패딩 문제를 포함 전망 문제의 넓은 범위를 커버하여 CSS

#outlook a{ 
     padding:0; 
    } 
    .ReadMsgBody{ 
     width:100%; 
    } 
    body{ 
     width:100% !important; 
     min-width:100%; 
     -webkit-text-size-adjust:100%; 
     -ms-text-size-adjust:100%; 
     -webkit-font-smoothing: antialiased; 
    } 
    v*{ 
     behavior:url(#default#VML); 
     display:inline-block; 
    } 
    .ExternalClass{ 
     width:100%; 
    } 
    td{ 
     border-collapse: collapse!important; 
    } 
    .ExternalClass, 
    .ExternalClass p, 
    .ExternalClass span, 
    .ExternalClass font, 
    .ExternalClass td, 
    .ExternalClass div{ 
     line-height:100%; 
    } 
    a img{ 
     border:none; 
    } 
    a { 
     text-decoration:none !important; 
    } 
    img{ 
     display:block; 
     outline:none; 
     text-decoration:none; 
     border:none; 
     -ms-interpolation-mode: bicubic; 
    } 
    table{ 
     border-spacing:0; 
     border-collapse: collapse !important; 
     mso-table-lspace:0pt; 
     mso-table-rspace:0pt; 
    }

일부 조건문을 추가합니다.

내가 언급하고 싶은 두 번째 사항은 맞춤 글꼴입니다. 사용자 지정 글꼴은 특히 Outlook의 경우 특히 유용 할 수 있습니다. 진정한 유니버설 글꼴 스택을 고집하는 것이 좋습니다. Google 웹 글꼴을 사용하여 죽었을 경우 경고 메시지가 표시되거나 보이지 않거나 또는 Outlook에서 같은 방식으로 표시 될 수도 있습니다.

편집 : 또한 DOCTYPE이 엄격하다는 것을 알았습니다. 전환 권장 :

<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <meta name="format-detection" content="date=no"/> 
    <meta name="format-detection" content="telephone=no"/> 
    <!--[if !mso]><!-- --> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <!--<![endif]-->

이 헤더 부분은 지난 몇 년 동안 나에게 매우 좋았습니다.

출처

2017-11-02 18:47:57 scoopzilla

답변

관련 문제