Google 字体中的字体系列在 MJML 中不起作用

Question

尽管我按照说明操作，但在 mjml.io 上使用 google 字体时遇到问题。 我尝试了一些字体，仅用于测试目的，但只有第二种有效。 但我实际需要使用的字体是“Source Sans 3”。 好像只接受单个单词名称的字体？

我需要使用的字体：

• https://fonts.googleapis.com/css?family=Source+Sans+3

我用于测试的字体：

• https://fonts.googleapis.com/css?family=Itim
• https://fonts.googleapis.com/css?family=Itim&family=Karla+Tamil+Upright

Answer 1

您需要将姓氏括在额外的引号中，如下所示：

font name=""Source Sans 3""

或

font name="'Source Sans 3'"

作为替代方案，您也可以通过从 CSS 查询结果复制

@font-face

规则并将其粘贴到您的

<mj-style>

来创建自己的姓氏

<mjml>
  
  <mj-head>  
    <mj-style>
@font-face {
  font-family: 'customFont';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/sourcesans3/v15/nwpBtKy2OAdR1K-IwhWudF-R9QMylBJAV3Bo8Ky462EK9Cs.woff2) format('woff2');
}
    </mj-style>
  </mj-head>
  
  
  <mj-body>
    <mj-section>
      <mj-column>

        <mj-text font-size="20px" color="#F45E43" font-family="customFont">Hamburgle</mj-text>

      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

<mjml>
  
  <mj-head>
    <mj-font name="'Source Sans 3'" href="https://fonts.googleapis.com/css?family=Source+Sans+3" />
    <mj-font name="&quot;Open Sans&quot;" href="https://fonts.googleapis.com/css?family=Open+Sans" />
    <mj-font name="'Advent Pro'" href=" https://fonts.googleapis.com/css2?family=Advent+Pro:ital,wght@0,400;0,700;1,400;1,700" />
    
    <mj-style>
@font-face {
  font-family: 'customFont';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/sourcesans3/v15/nwpBtKy2OAdR1K-IwhWudF-R9QMylBJAV3Bo8Ky462EK9Cs.woff2) format('woff2');
}
    </mj-style>
  </mj-head>
  
  
  <mj-body>
    <mj-section>
      <mj-column>

        <mj-text font-size="20px" color="#F45E43" font-family="'Source Sans 3'">Hamburgle</mj-text>
        <mj-text font-size="20px" color="#F45E43" font-family="&quot;Open Sans&quot;">Hamburgle</mj-text>
        <mj-text font-size="20px" color="#F45E43" font-family="customFont">Hamburgle</mj-text>

        <mj-text font-size="20px" color="#F45E43" font-family="'Advent Pro'" font-style="italic">Hamburgle</mj-text>
        <mj-text font-size="20px" color="#F45E43" font-family="'Advent Pro'" font-style="italic" font-weight="700">Hamburgle</mj-text>


      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

请记住这样的查询 请参阅 mjml.io 上的 预览