HTML 无法在电子邮件中正确显示

Question

HTML:

<div id="container">
    <div id="social-links">
        <img src="http://www.collegify.com/emailer/roads/delhi/images/Promotional_03.jpg" alt="">
        www.twitter.com/roadsprep
        <br />
        <img src="http://www.collegify.com/emailer/roads/delhi/images/Promotional_09.jpg" alt="">
        www.facebook.com/roadsprep
    </div>
    <div id="website-link">www.roadsprep.com</div>
    <div id="now-at-gurgaon">
        NOW AT
        <BR />
        GURGAON
    </div>
    <div id="gray-box">
        We specialize in
        <br />
        SAT, GRE, GMAT, ACT
        <br />
        IELTS and TOEFL coaching!
    </div>
    <div id="pointers">
        <ul>
            <li>Over 6 years of Test Prep Experience!</li>
            <li>Over 300 students with 2100 + scores</li>
            <li>On average, an improvement of 400 point improvement in scores</li>
        </ul>
    </div>
    <div id="contact-info">
        <strong>Roads Academy Private Limited</strong>
        <br />
        Office No. 4001, Basement, DLF Phase IV, Near, Galleria Market, Gurgaon - 122 009, Haryana
        <br />
        <strong>Phone:</strong>
        +91 85100 66662
        <strong>Email:</strong>
        support@roadsprep.com
    </div>
</div>

CSS:

* {
    font-family: 'Open Sans Condensed', sans-serif;
}
#container {
    background-image: url(http://www.collegify.com/emailer/roads/delhi/images/Promotional-Flyer-for-Delhi-Front-1.jpg);
    background-repeat: no-repeat;
    width: 600px;
    height: 910px;
    margin: 0 auto;
    padding-top: 31px;
}
#social-links {
    margin: 0 0 0 32px;
    float: left;
    width: 200px;
    height: 57px;
    font-size: 13px;
    font-weight: bold;
}
#website-link {
    margin: 0 21px 0 0;
    float: right;
    width: 200px;
    text-align: right;
    font-size: 22px;
    font-weight: bold;
}
#now-at-gurgaon {
    margin: 230px 0 0 128px;
    color: #454b4f;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    width: 181px;
    line-height: 22px;
    font-family: Arial, Helvetica, sans-serif;
}
#gray-box {
    background-color: #454a4e;
    width: 280px;
    height: 80px;
    border-top: solid 1px #1b1d21;
    margin-top: 315px;
    padding-left: 40px;
    font-size: 22px;
    font-weight: bold;
    line-height: 25px;
    color: #fbc911;
}
#pointers {
    width: 280px;
    padding: 0 0 0 20px;
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
    color: #454a4e;
}
#contact-info {
    border-top: solid 1px #2f3337;
    width: 537px;
    margin: 10px auto 0 auto;
    text-align: center;
    padding-top: 10px;
    line-height: 20px;
    font-size: 17px;
}

网页字体头部代码:

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>

这在浏览器中显示完美，但在电子邮件中不起作用。我知道我不能只将代码粘贴到电子邮件中，我需要在浏览器中预览它，直接从那里复制它，然后将其粘贴到电子邮件正文中，但它无法正确显示。我正在使用 Gmail。

Answer 1

电子邮件往往会去除标题内容，因此您不太可能为新字体添加外部链接。

通常，电子邮件中的 html 尽可能简单，因为它们呈现 html 的能力有限(尤其是 Outlook)。请记住，您将(可能)将其发送到各种电子邮件客户端 - 它们都会略有不同。

这应该有所帮助:https://www.campaignmonitor.com/css/