2016-08-25 2 views
0

Как мы можем использовать пользовательские шрифты в почтовой программе, особенно gmail. Я много искал, но не нашел ничего полезного, но я увидел одну «uxpin» почтовую программу с использованием шрифта «proxima nova» в моей учетной записи gmail ... будет очень благодарна за любую помощь.Как использовать пользовательский шрифт в gmail?

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<!--[if !mso]><!-- --> 
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
<!--<![endif]--> 
<title>Virgin Atlantic</title> 

<style type="text/css"> 
    @font-face {font-family: 'GothamLight'; src: url('http://ravisharma.ml/mailer1/fonts/GothamLight.eot'); src: url('http://ravisharma.ml/mailer1/fonts/GothamLight.eot?#iefix') format('embedded-opentype'),   url('http://ravisharma.ml/mailer1/fonts/GothamLight.woff') format('woff'),   url('http://ravisharma.ml/mailer1/fonts/GothamLight.ttf') format('truetype'),   url('http://ravisharma.ml/mailer1/fonts/GothamLight.svg#GothamLight') format('svg'); font-weight: normal; font-style: normal;} 
    @media screen{ 
    body { 
    font-family: 'Open Sans', Arial, sans-serif !important; 
    } 
} 

} @media screen and (max-width: 639px){ 
     #main_table{ 
      width:100% !important; 
      display:block; 
     } 

} @media screen and (max-width: 639px){ 
     h1{ 
      font-size:20px !important; 
     } 

} @media screen and (max-width: 639px){ 
     h2{ 
      font-size:14px !important; 
     } 

} @media screen and (max-width: 639px){ 
     p{ 
      font-size:10px !important; 
     } 

} @media screen and (max-width: 639px){ 
     h3{ 
      font-size:14px !important; 
     } 

} 

</style> 

</head> 

<body style="margin: 0;padding: 0;"> 
    <table id="main_table" align="center" cellpadding="0" cellspacing="0" border-spacing="0" style="width: 640px;border-collapse: collapse;font-family: Arial, Helvetica, san-serif;"> 
     <tr> 
      <td class="td_50" style="width: 50%;"> 
       <a href="#" style="text-decoration: none;color: #b24761;"><img src="https://gallery.mailchimp.com/eb9c4a4284960321518684c4d/images/432620e4-25dc-4f16-a784-9f67b629e72a.jpg" alt="virgin atlantic" style="width: 100%;float: left;display: block;margin: 0 auto;"></a> 
      </td><!--title ends--> 

      <td class="td_50" style="width: 50%;"> 
       <a href="#" style="text-decoration: none;color: #b24761;"><img src="https://gallery.mailchimp.com/eb9c4a4284960321518684c4d/images/cd675339-2051-4c40-b4c2-0101af8dbda4.jpg" alt="virgin atlantic" style="width: 100%;float: left;display: block;margin: 0 auto;"></a> 
      </td><!--title ends--> 
     </tr><!--table row 1 ends--> 

     <tr> 
      <td colspan="2" class="td_100" style="width: 100%;"> 
       <img src="https://gallery.mailchimp.com/eb9c4a4284960321518684c4d/images/e714b3ca-2b83-4241-8e81-bda71a259254.jpg" alt="virgin atlantic" style="width: 100%;float: left;display: block;margin: 0 auto;"> 
      </td><!--title ends--> 

     </tr><!--table row 1 ends--> 

     <tr> 
      <td colspan="2" class="content td_100" style="width: 100%;padding: 20px;background: #fff;"> 
       <h1 style="font-family: 'Open Sans', Arial, sans-serif; 'Margin:0;padding: 10px 0 25px 0;width: 100%;float: left;font-size: 25.5px;">BUSINESS IS AN ADVENTURE MAKE IT EPIC.</h1> 
       <h2 style="Margin: 0;padding: 0;width: 100%;float: left;font-size: 16px;color: #111;line-height: 24px;">Are you heading London or US anytime soon? We have everything you expect in business, but in Premium Economy</h2> 
       <ul style="Margin: 0 ;padding: 0;width: 100%;float: left;padding-top: 20px;"> 
        <li style="width: 100%;float: left;list-style: none; Margin:0; padding:8px 0; line-height:normal;"><p class="p1" align="left" style="display: inline;font-size: 13px;color: #111;Margin:0; width: 3%;float: left; line-height:normal;">- </p><p class="p2" align="left" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 97%;float: left; line-height:normal;">Speed through the airport thanks to special priority checkin, bag drop and boarding.</p></li> 
        <li style="width: 100%;float: left;list-style: none; Margin:0; padding:8px 0; line-height:normal;"><p class="p1" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 3%;float: left; line-height:normal;">- </p><p class="p2" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 97%;float: left; line-height:normal;">Extra baggage allowance of 3 cases upto 23kg each..</p></li> 
        <li style="width: 100%;float: left;list-style: none; Margin:0; padding:8px 0; line-height:normal;"><p class="p1" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 3%;float: left; line-height:normal;">- </p><p class="p2" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 97%;float: left; line-height:normal;">Recline on your luxurious wide leather seat with headrest one of the biggest in its class.</p></li> 
        <li style="width: 100%;float: left;list-style: none; Margin:0; padding:8px 0; line-height:normal;"><p class="p1" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 3%;float: left; line-height:normal;">- </p><p class="p2" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 97%;float: left; line-height:normal;">Relax preflight with glass of welcome bubbly and newspaper in our dedicated cabin.</p></li> 
        <li style="width: 100%;float: left;list-style: none; Margin:0; padding:8px 0; line-height:normal;"><p class="p1" align="left" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 3%;float: left; line-height:normal;">- </p><p class="p2" align="left" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 97%;float: left; line-height:normal;">Enjoy your choice of three delicious main dishes including a vegetarian option, upgraded with china crockery,     
        cutlery and linen.</p></li> 
        <li style="width: 100%;float: left;list-style: none; Margin:0; padding:8px 0; line-height:normal;"><p class="p1" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 3%;float: left; line-height:normal;">- </p><p class="p2" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 97%;float: left; line-height:normal;">Snooze or freshen up on night flights with your Relax Pack.</p></li> 
        <li style="width: 100%;float: left;list-style: none; Margin:0; padding:8px 0; line-height:normal;"><p class="p1" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 3%;float: left; line-height:normal;">- </p><p class="p2" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 97%;float: left; line-height:normal;">Stay connected with inseat power and onboard WIFI.</p></li> 
        <li style="width: 100%;float: left;list-style: none; Margin:0; padding:8px 0; line-height:normal;"><p class="p1" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 3%;float: left; line-height:normal;">- </p><p class="p2" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 97%;float: left; line-height:normal;">Help yourself to tempting snacks or stretch your leg at our social space called Wander Wall.</p></li> 
       </ul> 

       <h3 style="width: 100%;float: left; Margin:0; padding-top: 35px;color: #111;font-size: 16px;">Book now on <a href="http://www.virgin-atlantic.com/us/en.html" style="text-decoration: none;color: #b24761;">www.virginatlantic.com</a></h3> 
      </td><!--title ends--> 

     </tr><!--table row 1 ends--> 
    </table><!--table ends--> 
</body> 
</html> 
+1

Не знаете, о чем вы просите. Вы хотите настроить собственный интерфейс Gmail? Или вы хотите отправлять почту на учетные записи Gmail с помощью пользовательских шрифтов? Это имеет какое-либо отношение к программированию? – JJJ

+0

Да, я хочу отправить почту пользователям gmail с пользовательскими шрифтами. –

ответ

0

Вы должны иметь возможность использовать его так, как они используются на обычных веб-страницах. Итак, сначала вы просто включить припаркованные WebFonts в <head> вашего документа:

<head> 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
</head> 

Там могут быть проблемы с Outlook, так что вы могли бы сделать загрузку шрифта условную для Outlook, так:

<head> 
    <!--[if !mso]><!-- --> 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
    <!--<![endif]--> 
</head> 

Тогда вам просто нормально установить шрифт в CSS:

h1, h2, h3, h4, h5, h6 { 
    font-family: ‘Open Sans’, Arial, sans-serif !important; // Arial will be used as a fallback, in Outlook for example 
} 

или инлайн:

<p style="font-family: ‘Open Sans’, Arial, sans-serif;">Open Sans text</p> 
+0

Я пробовал все, что вы предлагали, но он все еще не работает и использует arial .... Я использую mailchimp для отправки писем. –

+0

Извините, я не знаком с MailChimp, кроме имени. Не могли бы вы попробовать это следующим образом: https://ericlbarnes.com/2015/03/06/mailchimp-fonts/ – thepio

+0

Я заметил, что если я добавлю «Open Sans» в font-family из панели «inpect element», он работает, но по умолчанию его нет, хотя я добавил в inline css, как указано выше ... Я думаю, что gmail удаляет «Open Sans» из свойства font-family по какой-то причине, и шрифты хорошо работают в mailchimp –

Смежные вопросы