Информационный бюллетень HTML: шрифты и вертикальное выравнивание - PullRequest
Новая
       48

Информационный бюллетень HTML: шрифты и вертикальное выравнивание

0 голосов
/ 19 ноября 2018

Я создаю новостную рассылку HTML. Я использую вложенный массив. У меня два вопроса: как мне импортировать шрифт? Потому что @ import и @ font-face не работают в моем информационном бюллетене (но работают с простым html)

И второе это:

Как я могу " 2 выравнивать по вертикали по середине " 2 разного размера шрифта? Он работает над простым html, но не над новостной рассылкой ... 

<table width="100%" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td style="padding:10px;">
        <div>                      
            <!--[if mso]>
                                          <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:60px;v-text-anchor:middle;width:180px;" arcsize="17%" stroke="f" fillcolor="#00436f">
                                            <w:anchorlock/>
                                            <center>
                                          <![endif]-->
                          <a href="#"
                                            style="background-color:#00436f;font-weight:bold;border-radius:10px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;text-align:center;text-decoration:none;width:180px;-webkit-text-size-adjust:none;padding-top: 25px; padding-bottom: 25px;">                                                                                                            <span style="font-size:2em;font-weight:bold;vertical-align:middle">15</span>&nbsp;
                                          <span style="font-size:1.2em;font-weight:bold;text-transform:uppercase;vertical-align:middle">Février</span>
                                            </a>
                              <!--[if mso]>
                                        </center>
                                      </v:roundrect>
                                    <![endif]-->
              </div>
        <!--<p style="Margin: 0;font-size: 14px;line-height: 17px;width: 100%;padding: 25px 0;text-align: center;border-radius: 10px;background: #00436f;-->
        <!--      color: white;">-->
        <!--</p>-->
        <p style="padding-top:10px;Margin: 0;line-height:1;font-size: 1em;font-weight:bold;color:#797979">Réunion d'information Loiret Numérique</p>
        <p style="Margin: 0;font-size: 12px;line-height: 14px">
          Mairie de Montargis - Salle Montdignan
        </p>
      </td>
    </tr>
  </tbody>
</table>

Что я получаю:

Что мне нужно:

Мои шрифты: 

@media screen{
@import url("https://use.typekit.net/jqe0zpu.css");
@import url("https://www.site.fr/.../GT-Walsheim-Regular.ttf");

@font-face {
  font-family: 'Walsheim';
  font-weight: normal;
  font-style: normal;
  src: local("Walsheim"),url('https://www.site.fr/.../GT-Walsheim-Regular.eot');

}

@font-face {
  font-family: 'Walsheim';
  src: local("Walsheim"),url('https://www.site.fr/.../GT-Walsheim-Bold.eot');
  src: url('https://www.site.fr/.../GT-Walsheim-Bold.ttf') format('truetype'),
    url('https://www.site.fr/.../GT-Walsheim-Bold.woff') format('woff'),
    url('https://www.site.fr/.../GT-Walsheim-Bold.woff2') format('woff2'),
    url('https://www.site.fr/.../GT-Walsheim-Bold.eot?#iefix') format('embedded-opentype');
  font-weight: 800;
  font-style: normal;
}       
    }

Ответы [ 2 ]

0 голосов
/ 19 ноября 2018

Как я уже упоминал в своем комментарии, Outlook не работает со всеми веб-шрифтами, такими как шрифты Google.Вы не указываете полные пути к ресурсам, поэтому у нас нет возможности проверить, что вы делаете, и найти решение.

Мое первое предложение - открыть вашу электронную почту в веб-браузере и проверить, чтобы увидетьесли это работает вообще.Если да, то я предлагаю проверить, что вы делаете в почтовом клиенте Apple или IOS, так как они, кажется, хорошо работают с веб-шрифтами.Если это работает, вы знаете, что все правильно закодировано.

Как правило, документ HTML с веб-шрифтом требует ссылку на этот шрифт и применяется в классе для использования в документе.

Выдолжна иметь ссылку, подобную этой: 

<style>
  @import url("https://www.site.fr/.../GT-Walsheim-Regular.ttf");
</style>

Или вот так: 

<link href="https://use.typekit.net/jqe0zpu.css" rel="stylesheet">

Далее, вам нужно найти какой-нибудь способ вывести шрифт в документ. 

<style>
.classname { 
  font-family: GT-Walsheim, Arial, sans-serif;
}
</style>

В последнем примере я добавил Arial как запасной шрифт, который довольно безопасен для Интернета, поскольку Walsheim не собирается работать с Gmail и, скорее всего, не работает с Outlook 2007, 2010, 2013-2019.

Наконец, примените имя класса: 

<p class="classname">Hello</p>

Вы также можете придумать и добавить встроенные стили: 

<p class="classname" style="font-family: GT-Walsheim, Arial, sans-serif;">Hello</p>

Это очень простой план работы с сетью.шрифты в электронной почте.

Удачи.

0 голосов
/ 19 ноября 2018

Вот более простой способ использования div тегов: 

<style>
  @import url('https://fonts.googleapis.com/css?family=Open+Sans');
  #fevrier {
    background: #00436f;
    border-radius: 10px;
    font-weight: bold;
    color: #ffffff;
    display: inline-block;
    font-family: sans-serif;
    text-align: center;
    text-decoration: none;
    width: 180px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    vertical-align: middle -webkit-text-size-adjust:none;
    padding-top: 25px;
    padding-bottom: 25px;
  }
  
  #fevrier .text {
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
  }
</style>


<div id="fevrier">
  15 <span class="text">FÉVRIER </span>
</div>
...